Set value immediately after another one have been set in Reanimated 2

Question

I am using Reanimated 2 to build a game with React Native its performance is incredibly good but I have a problem.

I am using a shared value to animate a View as we all know setting the value of the shared value will automatically change the style of the View, my problem is that let's say it will be a Button that the user presses to give the View an elevation simply by changing a shared value used in the animated style of the View, the elevation is simply translation in the y axis.

The elevation value is 0 at first. The user clicks the button the value changes to for example 500 immediately with no transition and no animation, the View will immediately show at 500 above its starting position. And from 500 the View will drop back to 0 with animation. I tried the code below but no help.

const elevation = useSharedValue(0);
const handleClick = () => {
   elevation.value = 500;
   elevation.value = withTiming(0, { duration: 1000 });
}
const viewAnimatedStyle = useAnimatedStyle(() => ({
   transform: [
        {
            translateY: elevation.value,
        }
    ]
}))

when pressing the button the view doesn't move, it seems that Reanimated skips the first elevation.value assignment, and since the second assignment is to 0 (the same old value) the View doesn't move.

[Edit] Animated.View is imported from Reanimated 2 and used. I left it out for simplicity.

Answer 1

You need to use <Animated.View> for the useAnimatedStyle, If you are now using It will not be working correctly.

function App() {
  const width = useSharedValue(50);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });

  // attach animated style to a View using style property
  return <Animated.View style={[styles.box, animatedStyle]} />;
}