Reanimated useSharedValue does not apply on re-render

Question

I have a simple component below with width useSharedValue, but when the child component re-renders (because the parent gets re-rendered) the width is not equal to 100 (value from useSharedValue). Is this a bug or correct behavior?

function Child() {
  const width = useSharedValue(100);
  return (
    <View>
      <Button>Click</Button>
      <Animated.View style={{ width }} />
    </View>
  );
}

Answer 1

You should use useAnimatedStyle

function Child() {
  const width = useSharedValue(100);

  const animatedStyles = useAnimatedStyle(() => ({
    width: width.value,
  }))

  return (
    <View>
      <Button>Click</Button>
      <Animated.View style={animatedStyles} />
    </View>
  );
}