유저의 행동유도를 위해 토스트 애니메이션을 넣으려 한다.
react native에서 애니메이션 구현이 어렵다고 소문을 들어서, 후덜덜하고 있었는데,
갓 디자이너 분께서 작업 빠르게 하기 위해 애니메이션 파일을 lottie로 만들어서 json파일을 던져 주셨다.
gif를 svg로 만든거라나.. lottie 넣는 법이라고 치면 어렵지 않을거라고 힌트까지 던져주셔서 가벼운 마음으로 작업을 시작해본다.

install

npm i --save lottie-react-native
npm i --save lottie-ios@3.1.8

cd ios
pod install


[버전 정보]
"lottie-ios": "^3.1.8",
"lottie-react-native": "^3.5.0",

code

return (
    <>
      <LottieView
        source={require('../../gif/dody2.json')}
        autoPlay
        loop
      />
    </>
  );

source에 들어가는 파일이 lottie파일이어야 하고, https://lottiefiles.com/ 여기서 무료 예시들을 사용해볼 수 있다. 너무 좋은 사이트다.

결과 및 문제

android

안드로이드에서는 잘 작동이 된다.

ios

문제는 ios인데, gif가 띄어지지 않는다.찾아보니 나와 같은 문제가 몇몇 보였다.

xcode로 run하면 잘 나온다!
알수가없네 진짜 일단 xcode로 run해서 작업을 했다. 이유를 아시는 분 댓글로 좀 알려주세용..

+그러다가 몇일 뒤 cli로 run해도 잘 되더라...... (또륵)