Lottie는 에어비앤비에서 제공하는 라이브러리로, 많은 사람들이 공유한 애니메이션을 무료로 이용할 수 있고 커스텀까지 가능하다.
무게가 큰 gif 파일에 비해 가벼운 json 파일만으로 웹, 앱 등 다양한 곳에 멋진 애니메이션을 넣을 수 있다.
하지만 react native 0.73의 최신 버전을 활용하는 필자는 호환되는 버전을 찾는 데 어려움을 느꼈기 때문에 사용 방법을 정리해 보려 한다.
1. 설치
로띠를 이용하기 위해서는 2가지의 모듈을 설치해야 한다.
사실상 버전 정보 때문에 이 글을 쓰는 것과 다름없다. 버전이 맞지 않으면 오류가 난다...어떤 오류인지는 밑에서 설명하겠다.
아래 command를 통해 두 모듈을 설치한다.
npm i --save lottie-react-native@6.7.2
npm i --save lottie-ios@4.4.1
다음 command를 통해 pod에도 추가한다.
cd ios
pod install
안드로이드의 경우 수동 의존성 추가 작업이 필요하다.
android/app/src/main/java/MainApplication.kt
원래 MainApplication.java여야 하는데, 리액트 네이티브 0.73부터는 코틀린을 사용한다고 한다. 필자도 갑자기 웬 kt 파일이 있는지 깜짝 놀랐다.
// import section에 추가한다.
import com.airbnb.android.react.lottie.LottiePackage;override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
// 여기에 추가한다.
add(LottiePackage())
}android/app/build.gradle
// dependencies 부분에 추가한다.
implementation project(':lottie-react-native')android/settings.gradle
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')이때 주의할 점은 특정 코드보다 위에 써주어야 한다는 것이다. 안그러면 build failed가 뜨니 맨 위에 쓰도록 하자.
2. 사용
1. json 애니메이션 파일을 준비한다. (https://lottiefiles.com/featured 에서 샘플 무료 다운로드가 가능하다.)
2. 프로젝트 폴더 내로 파일을 이동한다.
필자는 assets/animations 폴더 안에 넣었다.
3. 컴포넌트화
각 애니메이션을 컴포넌트화한다.
// Ex.tsx
import React from 'react';
import LottieView from 'lottie-react-native';
export default function Ex() {
return (
<LottieView
source={require('../../assets/animations/ex.json')}
autoPlay
loop
style={{width: 200, height: 200}}
/>
);
}별 것 아니지만 중요한 내용은 크기를 지정해주어야 한다는 것이다. 크기를 지정하지 않으면 안 보인다!
4. 코드에서 사용
이대로 Ex를 import해서 사용할 수도 있지만, 그렇게 되면 모든 로띠 애니메이션마다 import를 따로 해주어야 한다.
불편하므로 index.js 또는 index.ts를 이용하여 한 번에 import할 수 있게 해주겠다.
// index.ts
export {default as Ex} from './Ex';
export {default as Ex2} from './Ex2';// Book.tsx
import {StyleSheet, Text, View} from 'react-native';
import {Ex} from '../components/animations';
export default function Book() {
return (
<View style={{flex: 1}}>
<Text>Book</Text>
<Ex />
</View>
);
}
const styles = StyleSheet.create({});
예쁘게 잘 나온다!
아래는 TroubleShooting 내용이다.
<Error>
CocoaPods could not find compatible versions for pod "lottie-ios"
해당 오류는 로띠를 사용할 때 lottie-react-native 모듈과 lottie-ios의 호환이 맞지 않아 발생하는 오류이다.
검색을 통해 lottie-react-native@4.0.3, lottie-ios@3.2.3이 호환이 맞는 버전이라는 걸 알고 새로 설치하였더니 새로운 오류 등장...
<Error>
Build Failed: unable to resolve class MavenDeployment beforeDeployment { MavenDeployment deployment -> signing.signPom(deployment) }
Build Failed: A problem occurred configuring project ':lottie-react-native'. compileSdkVersion is not specified. Please add it to build.gradle
하하..위 오류는 무슨 소리인지도 모르겠고 아래 오류는 분명 위에 의존성을 추가해줬는데, 뭐가 문제인지 complieSdkVersion이라는 말에 꽂혀서 알아듣지도 못할 gradle만 망연히 보다가, lottie 출시 노트를 발견하고 찾아 헤매다 찾은 버전: 6.7.2, 4.4.1!
정확히 두 버전을 특정지어 제시하는 이유는,
1. 두 모듈 사이 충돌 없이 호환되는 가장 최신의 버전이며
2. 리액트 네이티브 0.73에 호환되는 가장 최신의 버전이기 때문이다.
하지만 글을 정리하다 첫 오류문에 나와 있는 문구를 발견하고는 허탈...
lottie-react-native (from '../node_modules/lottie-react-native') was resolved to 6.7.2, which depends on lottie-ios (=4.4.1)
6.7.2에는 4.4.1을 사용하라는 말만 봤어도, 삽질하지 않았으리라.
역시 오류 코드에는 답이 있다. 잘 읽도록 하자.
