[UseSharedValue] useSharedValue dose not apply on re render

[danbeo95]

I have a simple component below with width useSharedValue
But when the child component rerenders (because the parent gets rerender) the width is not equal to 100 (value from useSharedValue)
Is it a bug or behavior? Anyone can help me explain

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

[MatiPl01]

You aren't using the shared value properly. If you want to use reanimated shared values to style components, you would have to use the useAnimatedStyle hook to create the animated style first, and then pass the resulting style to the component's style property.

See this example:

import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

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

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

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

Please let me know if it fixes your issue.

[MatiPl01]

Sorry for late response.
As far as I understand your code, you are creating the AnimatedSafeAreaView inside the Loading component. Animated components created with createAnimatedComponent should be always created outside the component scope. Try moving const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView); outside of your Loading component.

If this doesn't help (createAnimatedComponent might not work with some components), you can use the Animated.View instead of the AnimatedSafeAreaView and pass animated style in the style property of the Animated.View component that will be a parent/child of your SafeAreaView component.

Here is a code snippet that shows what I mean:

const Loading = ({
  LoaderComponent,
  loaderColor,
  loaderSize,
  message,
  AnimationValue
}: LoadingProps) => {
  const AnimationStyle = useAnimatedStyle(() => {
    return {
    transform: [{translateY: AnimationValue.value}],
    };
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Animated.View style=[{ flex: 1, justifyContent: 'center', alignItems: 'center' }, AnimationStyle]}>
       ...
      </Animated.View>
    </SafeAreaView>
  )
}

[MatiPl01]

I can see another problem in your code, which is the withTiming function usage:

useEffect(() => {
  const animateLoading = () => {
    'worklet'; // This line is important for marking the function as a worklet
    LoadingAnimationValue.value = withTiming(-500, { duration: 1000 }, () => {
      setLoading(false);
    });
  };

  const loadTrigger = setTimeout(() => {
    animateLoading();
  }, 2000);

  return () => {
    clearTimeout(loadTrigger);
  };
}, []);

You pass this function as a callback

() => {
  setLoading(false);
}

which calls the setLoading function. The setLoading is executed on the JS thread, whereas the callback function is executed on the UI thread. To make setLoading work, you will have to use runOnJS from react-native-reanimated as follows:

withTiming(-500, { duration: 1000 }, () => {
   runOnJS(setLoading)(false);
});

You can also remove 'worklet' from animateLoading because it makes no difference in there.

[Vimal1464]

OMG love 100000x times !
I have was struggling with this thank you soo much
BTW Mate, can you please checkout this react-native-boilerplate
Can we both contribute to it ? if you are free

[MatiPl01]

You are welcome! I checked your library and it looks good. I'm afraid I have not much time now to help you with the development and cannot find time to contribute.

[Vimal1464]

@MatiPl01 ok 😢, but can you a star ⭐️.