[Android][Fabric] PageCarousel's ScrollView's contentOffset resets pagination to initial value on re-render when style={...} changes (with animated height style)

[genesiscz]

Description

This is not a real bug caused by this library, but CAN be probably a very painful to debug hence the bug report (and can be mitigated before RN/RNR team mitigates the issue). I wasted 6 hours fixing this so I want to share it with you just in case somebody hits the same issue.

Here's the upstream issue reported and has all the details software-mansion/react-native-reanimated#7453

This issue does not occur if:

The Fabric architecture is disabled (using Paper).
The contentOffset prop is removed from the Animated.ScrollView.
The animated height style is removed from the Animated.ScrollView.
Running on iOS (regardless of Fabric/Paper).

The fix was simple for us:

• We already have copied several components from this library into our own code directly, and commenting contentOffset={...} was enough

Related to

• Components

Steps to reproduce

See snack.expo.dev/@genesiscz/reanimated-contentoffset?platform=android

Expected behavior

PageCarousel to stay on the page that I scrolled to.

Actual behavior

Instead, when I scroll to page 2, and then wait for re-render of the TabController's parent component, page snaps back to initial contentOffset={...} https://github.com/wix/react-native-ui-lib/blob/7ba8152fa2ec883ca994c1acc97880d1ea8aa61a/src/components/tabController/PageCarousel.tsx#L113C1-L114C1

More Info

Code snippet

See snack.expo.dev/@genesiscz/reanimated-contentoffset?platform=android

Environment

• React Native version: 0.77.2
• React Native UI Lib version: 7.40.0

Affected platforms

• Android - new Architecture/Fabric only
• iOS
• Web