software-mansion / software-mansion/react-native-reanimated
Using `contentOffset` causes invalid scroll events to fire when animated ScrollView is first mounted
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 11k
- Forks
- 1.5k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 172
Description
Description
Hi there! This is related to an issue I just filed with React Native (https://github.com/facebook/react-native/issues/46748) but I thought I'd file one here too, since a) this is what we're actually using in our app and b) the symptoms are slightly different
When using the contentOffset prop on Animated.ScrollView, we've observed that this causes extra scroll events to fire when the component is mounted. Specifically, it sends an event with the contentOffset equal to the value passed to the prop, then sends a second one - if the contentOffset is positive, it's the same value again, and if it's negative, it's 0. Unlike with a plain React Native ScrollView, it does this ~3 times - this is what's different from the React Native issue
We're trying to use a negative contentOffset.y value in conjunction with a paddingTop style so that the scrollview content can be offset from the top a certain distance.
Expected behaviour: no scroll events are fired until the scrollview is actually scrolled
Steps to reproduce
- Create a ScrollView that has an
onScrollhandler that logscontentOffset - Add a
contentOffsetof{ x: 0, y: -100 } - Observe the logs look like this:
-100
0
-100
0
-100
0
Snack or a link to a repository
https://github.com/mozzius/reanimated-scroll-evt-repro
Reanimated version
3.10.1
React Native version
0.74.5
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo Go
Architecture
Paper (Old Architecture)
Build type
Debug app & dev bundle
Device
iOS simulator
Device model
iPhone 15
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked reanimated-scroll-evt-repro on iOS with the reported Reanimated, React Native, Paper, and Hermes setup. Trace the Animated.ScrollView path that handles contentOffset and onScroll, then compare the logged sequence with the expected behavior of no events before scrolling. Done means the extra mount-time events no longer occur for the reported negative offset case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100