[React-Native] React Native에서 Lottie 애니메이션 사용하기

1. 설치하기

yarn add lottie-react-native
yarn add lottie-ios@3.2.3

 

iOS에서는 특정 버전의 lottie-ios를 명시적으로 설치해줘야 해서 별도로 설치해준다.

---

[!] CocoaPods could not find compatible versions for pod "lottie-react-native": In Podfile: lottie-react-native (from ../node_modules/lottie-react-native) Specs satisfying the lottie-react-native (from ../node_modules/lottie-react-native) dependency were found, but they required a higher minimum deployment target.

간혹 위와 같은 오류가 발생하는 경우가 있는데, iOS의 최소 배포 타겟 버전이 Lottie가 요구하는 버전보다 낮아서 발생하는 문제다. xcode - general - minimum deployments에서 ios 버전을 13 이상으로 세팅해주면 해결된다.

---

2. 기본 사용법

import LottieView from 'lottie-react-native';
import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';

type Props = {
  style?: StyleProp<ViewStyle>;
};

const LottieAnimation = ({ style }: Props) => {
  return (
    <LottieView
      source={require('@assets/animations/animation.json')}
      autoPlay
      loop
      resizeMode="cover"
      style={[style, { width: '100%', height: '100%' }]}
    />
  );
};

export default LottieAnimation;

 

resizeMode를 "cover"로 설정하 애니메이션이 꽉 차게 표시된다.

 

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export default function AnimationControl() {
  const animationRef = useRef(null);

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={require('./assets/animation.json')}
        style={styles.animation}
      />
      
      <View style={styles.buttonContainer}>
        <Button
          title="재생"
          onPress={() => animationRef.current?.play()}
        />
        <Button
          title="정지"
          onPress={() => animationRef.current?.pause()}
        />
        <Button
          title="처음으로"
          onPress={() => animationRef.current?.reset()}
        />
      </View>
    </View>
  );
}

 

애니메이션을 컨트롤하는 버튼을 만들어서 애니메이션의 재생 상태 등을 컨트롤 할 수도 있다.

 

Lottie를 사용하면 복잡한 애니메이션을 쉽게 구현할 수 있다.

리액트 네이티브에서도 lottie를 지원하고 있어, 앱에서도 복잡한 애니메이션을 좀 더 깔끔하고 매끄럽게 구현할 수 있었다.