software-mansion / software-mansion/react-native-reanimated

Using `contentOffset` causes invalid scroll events to fire when animated ScrollView is first mounted

Open
#6,563 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Platform: iOS Repro provided
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
  1. Create a ScrollView that has an onScroll handler that logs contentOffset
  2. Add a contentOffset of { x: 0, y: -100 }
  3. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.