How to access `useCurrentTabScrollY` from a parent component and not in the header?

[AugustoAleGon]

I am facing an issue when I try to get the useCurrentTabScrollY value and share to its parent. I already check the Animated Header on the examples, since the main issue is that SharedValue actually can't be access from its parent to make some modification on the header.

export const Header = ({ value }) => {
  value = useCurrentTabScrollY();

  const scrollYText = useDerivedValue(
    () => `Scroll Y is: ${value.value.toFixed(2)}`,
  );

  return (
    <View style={[styles.root]}>
      <Animated.View style={styles.container}>
        <ReText style={styles.text} text={scrollYText} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: '#2196f3',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    height: 250,
  },
  container: {
    height: 250,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  text: {
    position: 'absolute',
    color: 'white',
    fontSize: 24,
    textAlign: 'center',
  },
});

I am trying to pass as a value but from the parent I don't get any updates.

[nica0012]

the onScroll method does not work either on the Tabs.Flatlist

[FabianDean]

the onScroll method does not work either on the Tabs.Flatlist

I found that it doesn't work either, but you can do something like this with the Tabs.Flatlist being in a separate component

  const scrollHandler = useCallback(
    (value: number) => {
      /* Handle however */
    },
    [],
  );

  const scrollY = useCurrentTabScrollY();

  // From react-native-reanimated
  useAnimatedReaction(
    () => scrollY.value,
    (y) => {
      runOnJS(scrollHandler)(y);
    },
    [scrollHandler],
  );