How store SharedValue to reused it at parent component ?

[dathuynh-eh]

• I have a problem with SharedValue in children component manipulate animation for one component at parent scopes. Do we have any way for solving this problem without passing props from parent to children?
• Code Exp:

function Parent() {
  const animatedValue = useSharedValue(0);

  return (
    <View>
      <Children animatedValue={animatedValue} />
      <BottomTab animatedValue={animatedValue} />
    </View>
  );
};

function Children({animatedValue}) {
  const scrollHandler = useAnimatedScrollHandler(event => {
    animatedValue.value = event.contentOffset.y;
  });

  return (
    <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
      <Content animatedValue={animatedValue} />
    </Animated.ScrollView>
  );
}

function BottomTab({animatedValue}) {
  const stylez = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: animatedValue.value,
        },
      ],
    };
  });

  return <Animated.View style={stylez} />;
}