[react-native] LottieView 애니메이션 적용하기

리액트 네이티브 개발환경에서 애니메이션을 적용하고 싶을 때, Lottie 라는 라이브러리를 이용하면 쉽게 구현할 수 있다.

 

용량이 크고 파일이 무거운 gif 파일을 이용하는 대신, LottieView 를 이용해보자.

 

먼저, 확장자가 json 인 애니메이션 파일을 직접 만들거나 예제 파일을 찾아서 구해 놓은 후,

 

라이브러리 설치를 진행하자 

 

React-Native Community

https://github.com/lottie-react-native/lottie-react-native

GitHub - lottie-react-native/lottie-react-native: Lottie wrapper for React Native.

 

라이브러리 설치

 

yarn add lottie-react-native
yarn add lottie-ios@3.2.3
 
OR
 
npm i --save lottie-react-native
npm i --save lottie-ios@3.2.3

 

 

IOS 개발을 위해 CocoaPods를 사용하고 있다면 pod install 까지 진행한다.

 

 

다음은 설치한 라이브러리인 LottieView를 import 하고 사용해보자

 

 

 import LottieView from 'lottie-react-native';
    ...
    return (
        <SafeAreaView style={{backgroundColor:'#fff',height:'100%'}}>
            <View>
            <LottieView 
                        source={require('../resource/animation/test.json') /** 움직이는 LottieView */
                        }
                        style={{width:200,backgroundColor:'#f4f6f2'}}
                        autoPlay loop
            />
            </View>

LottieView의 source 속성 내부에 json 파일의 경로를 넣어주면 된다.

나는 프로젝트 폴더 내부에 있는 animation 폴더를 상대경로로 지정해주었다.

 

리액트 네이티브 커뮤니티 레퍼런스에 기재되어있는 LottieView 속성은 다음과 같다.

 

PropDescriptionDefault

source	Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json').	None
style	Style attributes for the view, as expected in a standard View.	The aspectRatio exported by Bodymovin will be set. Also the width if you haven't provided a width or height
loop	A boolean flag indicating whether or not the animation should loop.	true
autoPlay	A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API.	false
colorFilters	An array of objects denoting layers by KeyPath and a new color filter value (as hex string).	[]

source : 애니메이션 파일 경로

style : 뷰 스타일 정의

loop : 반복 여부

autoPlay : 마운팅 될 때, 자동 실행 여부

colorFilters : 레이어 색상 변경