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

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

import LottieViewfrom 'lottie-react-native';
import Reactfrom '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%' }]}
    />
  );
};
 
exportdefault LottieAnimation;

import React, { useRef }from 'react';
import { View, Button, StyleSheet }from 'react-native';
import LottieViewfrom 'lottie-react-native';
 
exportdefaultfunctionAnimationControl() {
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>
  );
}