Lottie

지원환경: React Native

실행환경: Toss AppSandbox App

Lottie 컴포넌트를 사용하면 Lottie JSON 파일을 불러와 애니메이션을 재생할 수 있어요.
높이를 필수로 지정해야 레이아웃 시프트(Layout Shift)를 방지할 수 있어요.

시그니처

typescript

function Lottie({ width, maxWidth, height, src, autoPlay, speed, style, onAnimationFailure, ...props }: Props): import("react/jsx-runtime").JSX.Element;

파라미터

propsobject
컴포넌트에 전달되는 props 객체예요. lottie-react-native 라이브러리의 LottieView 컴포넌트에서 지원하는 속성들을 사용할 수 있어요.
- props.widthnumber | '100%'
  Lottie 애니메이션의 너비예요.
- props.height필수 · number | '100%'
  Lottie 애니메이션의 높이예요. 레이아웃 시프팅 방지를 위해 필수로 지정해야 해요.
- props.src필수 · string
  Lottie JSON 파일의 URL이에요. 안정성 검사를 위해서 LottieView의 source를 직접 사용하지 않아요. src를 사용해 주세요.
- props.maxWidthnumber
  Lottie 애니메이션의 최대 너비예요.
- props.autoPlayboolean · true
  컴포넌트가 마운트되면 자동으로 애니메이션을 재생할지 여부예요.
- props.speednumber · 1
  애니메이션의 재생 속도예요.

반환 값

ReactElement
lottie-react-native 라이브러리의 LottieView 엘리먼트를 반환해요.

예제

Lottie 애니메이션 렌더링하기

아래 예시는 Lottie 애니메이션을 불러와 재생하고,
애니메이션 로드 실패 및 종료 시 각각 로그를 출력하는 방법을 보여줘요.

tsx

import { Lottie } from '@granite-js/react-native';

function LottieExample() {
 return (
   <Lottie
     height={100}
     src="https://my-lottie-animation-url.com"
     autoPlay={true}
     loop={false}
     onAnimationFailure={() => {
       console.log('Animation Failed');
     }}
     onAnimationFinish={() => {
       console.log('Animation Finished');
     }}
   />
 );

참고사항

height는 반드시 지정해야 레이아웃 시프트가 발생하지 않아요.
애니메이션이 정상적으로 동작하지 않으면 onAnimationFailure 콜백을 통해 에러 로그를 확인할 수 있어요.

Lottie ​

시그니처 ​

파라미터 ​

반환 값 ​

예제 ​

Lottie 애니메이션 렌더링하기 ​