Search code examples
react-nativereact-native-reanimatedreact-native-reanimated-v2

Call React Native code when reanimated SharedValue changes


I have a reanimated ReadOnly<SharedValue<boolean>> that is derived from another SharedValue:

  const solidHeader = useDerivedValue(() => {
    return top.value <= -(height / 2);
  });

I would like to call a RN function (non-reanimated) when solidHeader.value changes. Concretely I would like to update my react-navigation's header transparency:

// This doesn't get called when `solidHeader.value` is updated in reanimated's thread
useEffect(() => {
  navigation.setOptions({headerTransparent: !solidHeader.value});
}, [solidHeader.value]);

I have tried the following which "seems" to be the correct way, but then I get the error

Reanimated: Animated.call node args should be an array with elements of type AnimatedNode. One or more of them are not AnimatedNodes
    useCode(() => {
      return call([solidHeader], (solidHeader) => {
        console.warn(solidHeader);
        navigation.setOptions({
          headerTransparent: !solidHeader,
        });
      });
    }, [solidHeader]);

Is what I'm achieving even possible?


Solution

  • I think useCode is for reanimated 1 and useSharedValue is for reanimated 2. follow the doc: Try useAnimatedReaction