bug: useScrollOffset regression since 4.2.0

[ACHP]

Description

Since react-native-reanimated 4.2.0 we can't use useScrollOffset() on flatList that use renderScrollComponent IF the scrollView component isn't a direct scrollView.

example

const CustomScrollComponent = (props: ScrollViewProps) => (
  <View>
    <Reanimated.ScrollView {...props}/>
  </View>
)

It was working perfectly fine in reanimated 4.1.3 (react-native-worklet 0.6.1)

Full example

import {FlatListProps, ScrollViewProps, StyleSheet, Text, View} from 'react-native';
import Reanimated, {useAnimatedRef, useDerivedValue, useScrollOffset} from 'react-native-reanimated';
import {useCallback} from "react";


export default function App() {
  const animatedRef = useAnimatedRef<Reanimated.FlatList>();
  const scrollOffset = useScrollOffset(animatedRef);

  const data = Array.from({length: 100}, (_, i)=> `item-${i}` );
  const renderItem = useCallback<NonNullable<FlatListProps<string>["renderItem"]>>((info)=>{
    return <Text>{info.item}</Text>
  }, []);

  useDerivedValue(()=>{
    console.log(scrollOffset.value);
    return 1;
  })

  const renderScrollComponent = useCallback((props: ScrollViewProps)=>{
      return <CustomScrollComponent {...props}/>
  }, []);


  return (
    <View style={styles.container}>
      <Reanimated.FlatList
        data={data}
        ref={animatedRef}
        renderItem={renderItem}
        renderScrollComponent={renderScrollComponent}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


const CustomScrollComponent = (props: ScrollViewProps) => (
  <View>
    <Reanimated.ScrollView {...props}/>
  </View>
)

Demo

Reanimated <4.2.0

working_reanimated.mov

Reanimated 4.3.0

borken-reanimated.mov

Steps to reproduce

1. create an animated FlatList
2. observe the scrollview offset using useScrollOffset
3. render a custom scrollView using renderScrollComponent props
4. Wrap this scrollView in a View -> useScrollOffset does not work anymore

Snack or a link to a repository

https://github.com/ACHP/bug-reanimated-use-scroll-offset

Reanimated version

4.3.0

Worklets version

0.8.1

React Native version

0.81

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

New Architecture (Fabric renderer)

Reanimated feature flags

No

React Native release level

Stable

Build type

Debug app & dev bundle

Device

iOS simulator

Host machine

macOS

Device model

No response

Acknowledgements

Yes