Fix useScrollViewOffset taking wrong viewTag

[tjzel]

Summary

Fixes #5777

Currently useScrollViewOffset takes the viewTag to the underlying ScrollView by calling findNodeHandle itself on animatedRef. This doesn't take into consideration a ScrollView that's wrapped in another view. When you specify onRefresh property that's what happens - ScrollView becomes a child of another view. useAnimatedRef takes the correct tag because it uses in this case getScrollableNode member function of the component - but this logic isn't transferred to other hooks that require the tag.

This PR adds a getter function to the object returned by useAnimatedRef, so no function needing the tag should ever acquire it by itself - instead it should use the getter method.

Test plan

• iOS

• Android

• Fabric

Testing code

import React from 'react';
import {
  Text,
  Pressable,
  SafeAreaView,
  StyleSheet,
  Button,
  findNodeHandle,
} from 'react-native';
import Animated, {
  useAnimatedRef,
  useScrollViewOffset,
} from 'react-native-reanimated';

export default function App() {
  const animatedRef = useAnimatedRef<Animated.ScrollView>();
  const offset = useScrollViewOffset(animatedRef);
  const [refreshing, setRefreshing] = React.useState(false);

  function printOffset() {
    console.log('OFFSET VALUE');
    console.log(offset.value);
  }

  return (
    <SafeAreaView>
      <Button
        title="refresh"
        onPress={() => setRefreshing((oldState) => !oldState)}
      />
      <List
        animatedRef={animatedRef}
        printOffset={printOffset}
        refreshing={refreshing}
      />
    </SafeAreaView>
  );
}

const List = ({ animatedRef, printOffset, refreshing }) => {
  console.log('tag', findNodeHandle(animatedRef.current));
  return (
    <Animated.FlatList
      ref={animatedRef}
      refreshing={refreshing}
      onRefresh={() => console.log('refreshing')}
      onViewableItemsChanged={() => {
        printOffset();
      }}
      data={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]}
      renderItem={({ _, index }) => <Item onPress={printOffset} id={index} />}
    />
  );
};

const Item = ({ onPress, id }) => {
  return (
    <Pressable onPress={onPress} style={styles.pressable}>
      <Text>{id}</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  pressable: {
    padding: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    backgroundColor: 'white',
  },
});

[tomekzaw]

Does it work on Fabric? If yes, should we add a separate method getShadowNodeWrapper? 🤔

[tjzel]

I forgor about Fabric

[tomekzaw]

i trust you