React Native Lottie Animation

Updated 28 November 2023


We are going to implement Lottie Animation in React Native application. It is easy to integrate and use in react native application.

Lottie has a large number of animation files which will make an app to be awesome. Let’s integrate.

First of all, integrate react-native-lottie in our react native project  just run the below command

It will download all Lottie library file to add animation

Add your first animation please download the Lottie JSON file from Lottie files put your JSON file in your source folder(Choose the folder wisely so you can use its the path)

For ios please run

I have downloaded and added lottie_loading.json in projectFolder/src/images/lottie_loading.json and use it in the Default loader class just like it –

ProgressDialog class is using for every loading moment like fetch data from the server then this class will be used to show loading.

Here, pass the lottie_loading.json path in the source tag. autoPlay loop used for animation will be animating infinite time with loop.

When you save the file and run your Android or iOS app then you will find the animation like –


You will face build issue in ios like it –

then you have to go Xcode > Select target folder > Files > New File > Swift File > Then select Create Bridging Header in the pop-up and run your ios project again issue will be resolved.

You can add more features in the Lottie like style, duration, color filters, etc. You can find the doc here –

Interesting blogs about technology –
Happy coding </ : ) >

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home