Redeem Now
Read More
Read now

React Native Lottie Animation

Save

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 –

Lottie React native

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 – https://github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md

Interesting blogs about technology – https://mobikul.com/blog
Happy coding </ : ) >

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close