[New Architecture] LayoutAnimation Breaking
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
Description
After migrating to new architecture, the animation configured with LayoutAnimation are behaving differently, we can observe a kind of jerk in the animation. Attached the videos and repo for reproduction of the issue.
Also check in slow motion with simulator, eventually the views are not adopting the slow animation and breaking.
React Native Version
0.72.3
Output of npx react-native info
System:
OS: macOS 13.4.1
CPU: (12) arm64 Apple M2 Pro
Memory: 312.44 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.20.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 8.19.4
path: /usr/local/bin/npm
Watchman:
version: 2023.06.26.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /Users/ravindragupta/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.19
path: /usr/bin/javac
Ruby:
version: 3.0.4
path: /Users/ravindragupta/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: ^18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: false
newArchEnabled: true
iOS:
hermesEnabled: false
newArchEnabled: true
Steps to reproduce
Use LayoutAnimation with New Architecture (Fabric) and observe issues with animation.
Snack, code example, screenshot, or link to a repository
Reproducible Demo App: https://github.com/ravindraguptacapgemini/reproducer-react-native-maps-events/tree/layout-animation-issue
Videos and Screenshot:
https://github.com/facebook/react-native/assets/97147467/d9e66cc5-0fd5-4881-91d9-dd9b684aba97
https://github.com/facebook/react-native/assets/97147467/b5b752b5-7d02-412d-a61d-7a8a82e6dbd2
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la aplicación de demostración reproducible en la rama layout-animation-issue y ejecútala con React Native 0.72.3, Fabric y New Architecture habilitada. Prueba LayoutAnimation normalmente y en cámara lenta del simulador, y compara el comportamiento con los vídeos reportados. Se considera completado cuando el comportamiento entrecortado y las animaciones lentas omitidas se hayan resuelto en el escenario demostrado.
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
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 42/100