React-native-reanimated: Auto start animation.

[VictorPullzz]

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

[terrysahaidak]

Hi. I think this is the best place to get started:
https://docs.swmansion.com/react-native-reanimated/docs/next/shared-values

[VictorPullzz]

@terrysahaidak
And how do I run the animation, let's say the picture is enlarged, from value and to value, and at the end the animation told me: "Hey, I'm over" :)

[likern]

Hi. I think this is the best place to get started:
https://docs.swmansion.com/react-native-reanimated/docs/next/shared-values

@terrysahaidak I might be wrong, but probably I've seen on some GitHub repos "Q&A" section. If it exists we can enable this feature

[terrysahaidak]

@terrysahaidak
And how do I run the animation, let's say the picture is enlarged, from value and to value, and at the end the animation told me: "Hey, I'm over" :)

I mean the following link will provide you everything you need to get started and implement the animation.

I've sent a link so I don't need to write it here the same thing covered in this guide :)

For a callback, you can learn more about it here:
https://docs.swmansion.com/react-native-reanimated/docs/next/animations#customizing-animations

[terrysahaidak]

Hi. I think this is the best place to get started:
docs.swmansion.com/react-native-reanimated/docs/next/shared-values

@terrysahaidak I might be wrong, but probably I've seen on some GitHub repos "Q&A" section. If it exists we can enable this feature

It's still in "testing" on github AFAIK, only like super popular repos got it.

[VictorPullzz]

@terrysahaidak
And how do I run the animation, let's say the picture is enlarged, from value and to value, and at the end the animation told me: "Hey, I'm over" :)

I mean the following link will provide you everything you need to get started and implement the animation.

I've sent a link so I don't need to write it here the same thing covered in this guide :)

For a callback, you can learn more about it here:
https://docs.swmansion.com/react-native-reanimated/docs/next/animations#customizing-animations

This dont help me. I don't see animation autostart

[terrysahaidak]

In order to start the animation, you need to assign it to the shared value. It's covered here.

So in order to "autostart" it, you need to assign it inside useEffect out anything else what you define as "autostart".

Also, according to the code you provided, there is a bug.
You passed scale directly to the component's styles but accordingly to this part of the guide you need to use useAnimatedStyle hook instead.

Let me know if you have other questions.

[likern]

@VictorPullzz

To do to do something / another animation at end of animation there is callback function which is called, when animation is finished.

  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" )
        }
      } 
    });
  });

Another option is to use useAnimatedReaction:

  useAnimatedReaction(
    () => {
      return animatedOpacity.value;
    },
    (data) => {
      // data holds what was returned from the first worklet's execution
      if (data === 1) {
        setText("Hey, I'm over" )
      }
    }
  );

There are multiple ways to do what you need. But due to bugs, constrainsts the only way to do is to just try and experiment what will work.

[jakub-gonet]

Seems resolved, closing. Thanks, @likern & @terrysahaidak for taking care of issues here, much appreciated.

[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.

[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 ;)

[VictorPullzz]

Thanks, I will try

[VictorPullzz]

@likern One question is there any function to increment value from some number to some number with fixed step? something: size: 0 to size : 1.5, step 0.1

[likern]

@likern One question is there any function to increment value from some number to some number with fixed step? something: size: 0 to size : 1.5, step 0.1

I think you can do that with interpolate. Or manually since worklets are just usual JavaScript functions. You can do pretty everything there.

[likern]

@likern One question is there any function to increment value from some number to some number with fixed step? something: size: 0 to size : 1.5, step 0.1

Not such function out of the box

[VictorPullzz]

@likern Thanks you for help!