React Native Lottie Animation

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

npm i --save lottie-react-native

1	npm i --save lottie-react-native

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

pod install

1	pod install

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 –

import React from 'react';
import { Modal, View } from 'react-native';
import { styles } from "./componentResources/ComponentStyleSheet";

//Here import the lottie view
import LottieView from 'lottie-react-native';

const ProgressDialog = ({ visible, pleaseWaitVisible, pleaseWaitText, loadingText, loaderColor }) => (
  <Modal
    onRequestClose={() => null}
    animationType="fade"
    transparent={true}
    visible={visible}>
    <View style={styles.progressDialogContainer}>
      <View style={styles.progressDialogContent}>
//Here, Use the lottie view for loading animation.
        <LottieView style ={{flex:5}} source={require('../images/lottie_loading.json')} autoPlay loop />
      </View>
    </View>
  </Modal>
);

export default ProgressDialog;

import React from 'react';

import { Modal, View } from 'react-native';

import { styles } from "./componentResources/ComponentStyleSheet";

//Here import the lottie view

import LottieView from 'lottie-react-native';

const ProgressDialog = ({ visible, pleaseWaitVisible, pleaseWaitText, loadingText, loaderColor }) => (

<Modal

onRequestClose={() => null}

animationType="fade"

transparent={true}

visible={visible}>

//Here, Use the lottie view for loading animation.

</View>

</Modal>

);

export default ProgressDialog;

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 –

ld: warning: Could not find auto-linked library 'swiftFoundation'

ld: warning: Could not find auto-linked library 'swiftDarwin'

ld: warning: Could not find auto-linked library 'swiftCoreFoundation'

ld: warning: Could not find auto-linked library 'swiftCore'

ld: warning: Could not find auto-linked library 'swiftCoreGraphics'

ld: warning: Could not find auto-linked library 'swiftObjectiveC'

ld: warning: Could not find auto-linked library 'swiftFoundation'

ld: warning: Could not find auto-linked library 'swiftDarwin'

ld: warning: Could not find auto-linked library 'swiftCoreFoundation'

ld: warning: Could not find auto-linked library 'swiftCore'

ld: warning: Could not find auto-linked library 'swiftCoreGraphics'

ld: warning: Could not find auto-linked library 'swiftObjectiveC'

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 </ : ) >

Neeraj Sharma 6 March 2021

. . .

Discuss on Helpdesk

React Native Lottie Animation

Leave a Comment Cancel Reply

Message Sent!