react / react/react-native

0.69+ SectionList jumps

Abierto
#36,414 23 comentarios 6 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: SectionList Issue: Author Provided Repro Needs: Triage :mag:
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

Something happening with SectionList at react-native: 0.69+
See videos for better understanding. It is something with huge lists (big amount of items)
It starts to jump and blink

Also, I've noticed that when I'm doing downgrade of react-native to 0.68 - it starts to work totally fine

Video:
https://user-images.githubusercontent.com/77282657/223980567-9bedf240-abd6-4eec-a912-9a7af1116ec3.mov

React Native Version

0.69.6

Output of npx react-native info
OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 240.36 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.12.0 - /Users/denys/.rvm/rubies/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.6 => 0.69.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce
  • Install fresh expo project or clone from git
  • Scroll up and down to trigger pagination
  • Scroll for about 1-2-4 minutes (can't upload full 3 minutes video)
Snack, code example, screenshot, or link to a repository

https://github.com/DenysMoro/reactNativeSectionListJumps

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza reproduciendo los saltos y parpadeos del repositorio reactNativeSectionListJumps enlazado usando React Native 0.69.6, una SectionList grande y paginación durante el desplazamiento. Compara el comportamiento con React Native 0.68 y usa el video proporcionado y los pasos de reproducción como referencia. La tarea estará terminada cuando las SectionLists grandes ya no salten ni parpadeen al desplazarse en el escenario de paginación reportado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.