react / react/react-native

Animated tracking using the native driver does not work as expected

Ouverte
#37,900 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

API: Animated Issue: Author Provided Repro Needs: Triage :mag:
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Reproduisez le comportement de l’exemple lié de suivi animé, en commençant par App.tsx et le basculement NATIVE_DRIVER. Comparez le défilement avec le pilote natif désactivé et activé, y compris le contentOffset initial. C’est terminé lorsque les points animés suivent la position de défilement qui change avec l’effet de décalage et commencent à l’offset initial lorsque le pilote natif est activé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.