Updates to SharedValue don't trigger change in AnimatedStyle

[dafrica1]

I'm new to React Native but even this is a bit odd for me.

I have two components that sit on top of a full-screen map: A component with form elements and a simple empty component underneath it where I use reanimated to change the height whenever the keyboard is opened or closed so that it pushes the form component above the keyboard so it is visible.

Previously this component was written using the reanimated 1.x API however when refactoring it to use the 3.x API, I've run into an issue where updating the .value prop of the SharedValue doesn't trigger a UI update.

Here's an example of what I'm looking at:

...
const height = useSharedValue(0);

  useEffect(() => {
    const keyboardWillShowListener = Keyboard.addListener(
      Platform.select({
        ios: "keyboardWillShow",
        android: "keyboardDidShow",
      }),
      (e) => {
        height.value = withTiming(e.endCoordinates.height, {
          duration: 250,
          easing: Easing.bezier(0.17, 0.59, 0.4, 0.77),
        });
      }
    );

    const keyboardWillHideListener = Keyboard.addListener(
      Platform.select({
        ios: "keyboardWillHide",
        android: "keyboardDidHide",
      }),
      () => {
        height.value = withTiming(0, {
          duration: 200,
          easing: Easing.bezier(0.17, 0.59, 0.4, 0.77),
        });
      }
    );

    return () => {
      keyboardWillShowListener.remove();
      keyboardWillHideListener.remove();
    };
  }, []);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      height: height.value,
    };
  });

  return (
      <Animated.View style={[styles.animatedView, animatedStyles]} />
  );
};

...

When I update height.value, it should trigger a change in animatedStyles but there is no change. Any ideas as to why updating a shared value isn't working?

[tjzel]

Hi @dafrica1 , I tested your snippet (although within its limits since it's not a full repro) and useAnimatedStyle is reacting to sharedValue changes - but I don't get the listener keyboardWillShow called - maybe it's the same in your case? Try adding some log into it and see if it's called.

[dafrica1]

Thanks for taking a look! The listener does fire properly (returns the right values with breakpoints and old-fashioned console.log)

I am also able to get it to work in an Expo Snack by itself however it does not react to the changes in my project. To test it even further, I removed all the animation code in my project and replaced it with a simple useState and that works without any problem.

I'm not sure if there are any external elements that could cause the sharedValue update to not work.

[tjzel]

If you have a snack repro feel free to open an issue - even if you aren't sure it's a bug or you just missed something 😁