[React Native] 로띠 아이콘 문의

개발
,
1

안녕하세요.

React Native로 앱인토스 구현 중, 앱빌더(Deus)에서 제공한 코드로 로띠 아이콘을 생성했는데 정상적으로 렌더링되지 않는 이슈가 있습니다! TDS에서 제공하는 “체크 로띠 아이콘 애니메이션”이 정상 동작하려면 어떻게 해야할까요?

<Asset.Image
  frameShape={{ width: 100 }}
  source={{ uri: `https://static.toss.im/lotties/check-spot-apng.png` }}
/>

사용 중인 라이브러리 버전은 다음과 같습니다.

"dependencies": {
    "@apps-in-toss/framework": "^1.1.1",
    "@granite-js/native": "0.1.21",
    "@granite-js/plugin-router": "0.1.21",
    "@granite-js/react-native": "0.1.21",
    "@toss-design-system/react-native": "^1.0.4",
    "dayjs": "^1.11.18",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },

image
image1920×1093 77.1 KB

2

@minsoo-web 확인 부탁드립니다.

3

안녕하세요 :slight_smile:
참고 가이드 전달드려요.

1개의 좋아요
4

안녕하세요. 해당 가이드를 읽고 다음 코드를 실행해보니 ‘Animation Failed’라고 콘솔로그를 출력하고 아무 것도 렌더링되지 않았습니다! 확인 부탁드립니다!


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

        <Lottie
          height={100}
          src="https://static.toss.im/lotties/check-spot-apng.png"
          autoPlay={true}
          loop={true}
          onAnimationFailure={() => {
            console.log('Animation Failed');
          }}
          onAnimationFinish={() => {
            console.log('Animation Finished');
          }}
        />
5

Lottie 컴포넌트의 src 는 lottie json 파일이어야해요 :slight_smile:

1개의 좋아요
6

넵 답변해주셔서 감사합니다!