react / react/react-native

Animated tracking using the native driver does not work as expected

Đang mở
#37,900 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

API: Animated Issue: Author Provided Repro Needs: Triage :mag:
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

Tracking a dynamic animated value (such as scroll position) using the native driver doesn't work correctly. Instead of animating the pinned value simultaneously, the animation only starts once the dynamic value stops changing.

React Native Version

0.71.11

Output of npx react-native info
System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 81.73 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: 2022.11.07.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/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: Not Found
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.11 => 0.71.11 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

I have created an example app that illustrates the problem.

  1. Clone the repository from https://github.com/kolking/animated-tracking, install and run the app in the simulator.
  2. When the native driver is disabled, scroll the bottom part horizontally to see how red dots follow the scroll position with a stagger effect.
  3. Now, in the App.tsx change the NATIVE_DRIVER constant to true, reload the app and try scrolling the bottom part again.
Snack, code example, screenshot, or link to a repository

Also please take note that when the native driver is enabled, it ignores the initial contentOffset. As a result, the red dots are initially displayed on the left and will only move to the center after a manually triggered scroll event.

useNativeDriver: false useNativeDriver: true

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Tái hiện hành vi trong ví dụ theo dõi hoạt ảnh được liên kết, bắt đầu với App.tsx và toggle NATIVE_DRIVER. So sánh việc cuộn khi driver gốc bị tắt và được bật, bao gồm cả contentOffset ban đầu. Hoàn tất khi các chấm hoạt ảnh bám theo vị trí cuộn đang thay đổi với hiệu ứng so le và bắt đầu từ offset ban đầu khi driver gốc được bật.

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, typescript
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
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.