Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 188.8.131.52 release ready!
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 – https://github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md
Interesting blogs about technology – https://mobikul.com/blog
Happy coding </ : ) >
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.