How to re-play Lottie animation in React Native

When working with Lottie animations in React Native, you might need to replay the animation in certain situations. Lottie is a widely used library for adding high-quality animations to mobile applications. To replay Lottie animations in React Native, you can control the animation's playback state. Here are the specific steps and examples:

1. Install the Lottie library

First, ensure that you have installed the lottie-react-native and lottie-ios libraries. If not, you can install them using npm or yarn:

bash
npm install lottie-react-native lottie-ios

or

bash
yarn add lottie-react-native lottie-ios

2. Import the Lottie component

In your React Native component, import the LottieView component:

javascript
import LottieView from 'lottie-react-native';

3. Use Ref to Control the Animation

You can utilize React's ref to get a reference to the Lottie animation component, which allows you to control its playback, pause, and reset.

javascript
import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import LottieView from 'lottie-react-native';

const AnimationScreen = () => {
    const animationRef = useRef(null);

    const replayAnimation = () => {
        if (animationRef.current) {
            animationRef.current.reset();
            animationRef.current.play();
        }
    };

    return (
        <View>
            <LottieView
                ref={animationRef}
                source={require('./path/to/animation.json')}
                autoPlay
                loop
            />
            <Button title="Replay Animation" onPress={replayAnimation} />
        </View>
    );
};

export default AnimationScreen;

4. Explanation of the Code

• Using useRef: The useRef hook is used to create a reference (animationRef) that points to the Lottie animation component.
• Control function replayAnimation: When the user clicks the button, this function is triggered. Inside the function, reset() is called to reset the animation to its initial state, followed by play() to replay the animation.

5. Important Notes

• Make sure the animation file animation.json is correctly imported and placed in the correct path.
• If the animation does not need to loop, set the loop property of the LottieView component to false.

By following these steps, you can control the replay of Lottie animations in your React Native application, which significantly enhances user experience and improves application interactivity.