[New Architecture] LayoutAnimation Breaking
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với ứng dụng demo có thể tái hiện trên branch layout-animation-issue và chạy ứng dụng đó với React Native 0.72.3, Fabric và New Architecture được bật. Thử LayoutAnimation ở chế độ bình thường và ở chế độ chuyển động chậm của simulator, sau đó so sánh hành vi với các video đã được báo cáo. Được xem là hoàn thành khi hiện tượng giật và các animation chậm bị bỏ qua được khắc phục trong kịch bản được minh họa.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 42/100