Auto start animation.

Description

Hi guys, I have faced the problem. I just want to animate background image when component is loaded… I wrote a couple of lines, but I don’t understand what to do next 😃

Code

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

...

const SplashScreen = ({ ready, onLoading }: SplashScreenProps) => {
	const scale =  useSharedValue(0);
	
	useEffect(() => {
		if (!ready) {
			(async () => {
				await RNSplashScreen.hideAsync();
			})()
		}
	}, [ready]);
	
	return (
		<ImageBackground
			source={picture[0]}
			style={{
				flex: 1,
				justifyContent: "flex-end"
			}}
		>
			<Animated.Image
				style={[
					{
						transform: [{ scale }],
					},
				]}
				source={picture[1]}
			/>
		</ImageBackground>
	)
};

• Use expo
• React: 16.11.0
• React Native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz
• React Native Reanimated: 2.0.0-alpha.6

[likern]

I would not recommend to use this approach:

  const animatedOpacity = useDerivedValue(() => {
    return withTiming(opacity.value, { duration: 200 }, (isFinished) => {
      console.log(`opacity: ${opacity.value}`);
      if (isFinished) {
        if (opacity.value === 1) {
          // Here we at desired state of opacity
          setText("Hey, I'm over" )
        }
      } 
    });
  });

Because it might run the animation even before the component renders on some low-end devices or with some heavy components.

I mean for the autorun option.

Yes, I agree. I answered only on start something when animation is finished. Correct animation implementation was out of scope of my answer 😉

[terrysahaidak]

I would not recommend to use this approach:

  const animatedOpacity = useDerivedValue(() => {
    return withTiming(opacity.value, { duration: 200 }, (isFinished) => {
      console.log(`opacity: ${opacity.value}`);
      if (isFinished) {
        if (opacity.value === 1) {
          // Here we at desired state of opacity
          setText("Hey, I'm over" )
        }
      } 
    });
  });

Because it might run the animation even before the component renders on some low-end devices or with some heavy components.

I mean for the autorun option.