Animated tracking using the native driver does not work as expected
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
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.
- Clone the repository from https://github.com/kolking/animated-tracking, install and run the app in the simulator.
- When the native driver is disabled, scroll the bottom part horizontally to see how red dots follow the scroll position with a stagger effect.
- Now, in the
App.tsxchange theNATIVE_DRIVERconstant totrue, 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 |
|---|---|
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riproduci il comportamento dell’esempio collegato di tracciamento animato, iniziando da App.tsx e dal toggle NATIVE_DRIVER. Confronta lo scorrimento con il driver nativo disabilitato e abilitato, incluso il contentOffset iniziale. Il lavoro è completo quando i punti animati seguono la posizione di scorrimento variabile con l’effetto sfalsato e iniziano all’offset iniziale quando il driver nativo è abilitato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react-native, typescript
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100