로딩 애니메이션

부가 설명
Tags
Lottie
animation
Lottie-React-Nativejson 파일 다운로드 사이드설치 (RN ≥ 0.60 기준)안드로이드 추가 설정타입스크립트 참조 ( tsconfig.json 옵션에 따라 import 방법 상이 )1. "esModuleInterop": false 일 경우2. "esModuleInterop": true && "allowSyntheticDefaultImports": true 일 경우코드 사용법

Lottie-React-Native

이런 애니메이션 많음.

json 파일 다운로드 사이드

적용하려면 json 파일이 필요한데 아래 사이트에서 검색해서 다운 가능.
 

설치 (RN ≥ 0.60 기준)

#둘 다 설치 해야함.
$ yarn add lottie-react-native
$ yarn add lottie-ios@3.2.3

or

$ npm i --save lottie-react-native
$ npm i --save lottie-ios@3.2.3

#pod install 실행
$ npx pod install
문제가 있다면 여기 참조
 

안드로이드 추가 설정

안드로이드에서 crash 난다면 auto linking 이 안됐다는 뜻이므로 별도 작업 필요.
1 - android/app/src/main/java/<AppName>/MainApplication.java
  • add import com.airbnb.android.react.lottie.LottiePackage; on the imports section
  • add packages.add(new LottiePackage()); in List<ReactPackage> getPackages();
notion image
2- android/app/build.gradle
add implementation project(':lottie-react-native') in the dependencies block
notion image
3- android/settings.gradle
add:
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
notion image
 

타입스크립트 참조 ( tsconfig.json 옵션에 따라 import 방법 상이 )

1. "esModuleInterop": false 일 경우

import LottieView = require("lottie-react-native");

2. "esModuleInterop": true && "allowSyntheticDefaultImports": true 일 경우

import LottieView from "lottie-react-native";
 

코드 사용법

...
import LottieView from 'lottie-react-native'
...

export default function App() {
//나중에 이 부분은 실제 서버에서 데이터 받아오는 async await으로 상태 업데이트 하면 됨.
//지금은 그냥 3.5초로 타임아웃 걸어둠.
  const [isLoading, setIsLoading] = useState(true);
  useEffect(()=>{
    setTimeout(() => {
      setIsLoading(false);
      } , 3500)
  }, []);

  if(isLoading)
    return(
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <LottieView source={require('./Assets/lf30_editor_xulvqwpz.json')} autoPlay loop />
      </View>
    )

  return (
    <Provider store={store} >
      <NavigationContainer styles={styles.container}>
        <Drawer.Navigator edgeWidth={0} drawerStyle={styles.drawerStyle} drawerContent={props => <DrawerContent {...props}/>}>
          <Drawer.Screen name="Home" component={MyStack}/>
          <Drawer.Screen name="UserInfo" component={UserInfo} />
        </Drawer.Navigator>
      </NavigationContainer>
    </Provider>
  );
}