[React Native] react-native-reanimated v2 설치

https://pixabay.com/ko/photos/놀이터-회전-신장-매력-5188459/

React Native에서 공식적으로 Animated api를 제공해줍니다.

https://reactnative.dev/docs/0.63/animated

 

해당 기능은 1) 사용하기 쉽고 2) 공부할 자료가 많은 장점이 있습니다.

하지만 아래와 같은 단점이 존재합니다.

 

1) Reac Native에서 지원하고 있는 Animatd는 JS thread(Javascript Thread)에서 실행되며, 이는 JS thread가 바쁠 때 fps가 떨어지는 현상을 발생시킬 수 있다.

 

2) 위 현상을 해결하기 위해 useNativeDriver 옵션을 제공하지만 해당 옵셥을 적용할 수 있는 style 속성이 제한된다.

- transform 또는 opacity style 속성에는 적용가능 하지만 layout 관련 속성(width, height, padding)에는 적용이 안됩니다.

 

위의 문제를 해결하는 방법으로는 react-native-reanimated를 이용하는 것입니다.

react-native-reanimated의 공식 문서에 라이브러리의 목적이 아래와 같이 적혀있습니다.

 

Reanimated aims to provide ways of offloading animation and event handling logic off of the JavaScript thread and onto the UI thread.

 

성능 비교 및 자세한 설명

react-native-reanimated와 animated api의 성능 비교 및 자세한 설명은 아래의 게시글 들에 자세히 정리되어 있습니다.

 

https://medium.com/mj-studio/new-reanimated-v2-shines-react-native-animation-%EF%B8%8F-37e117ab652e

New Reanimated V2 shines React-Native animation ⚡️

https://www.josephk.io/see-reanimated-strength-for-yourself/

리애니메이티드(Reanimated)의 장점 직접 확인하기

 

공식 문서

react-native-reanimated의 github 주소와 공식 문서 주소는 아래와 같습니다.

https://github.com/software-mansion/react-native-reanimated

software-mansion/react-native-reanimated

https://docs.swmansion.com/react-native-reanimated/

Hello from React Native Reanimated | React Native Reanimated

 

react-native-reanimated는 version1과 version 2가 있습니다.

version 2의 설치 방법은 공식 문서에 나와 있으나 설치하면서 몇 가지 에러를 만나 설치법을 정리하려 합니다.

 

 

설치 방법

먼저 공식 문서의 설치 방법은 아래 페이지에 정리되어 있습니다.

https://docs.swmansion.com/react-native-reanimated/docs/installation

 

1. 라이브러리 설치

yarn add react-native-reanimated@next

yarn 대신 npm을 사용하면 안 되는 거 같습니다. 저는 처음에 npm으로 라이브러리를 설치한 후 실행은 잘됐지만 라이브러리를 사용할 때 에러가 발생됐습니다. 이와 관련된 issue와 comment는 아래 링크에서 확인 가능합니다.

https://github.com/software-mansion/react-native-reanimated/issues/1677#issuecomment-770654402

 

2. Babel Plugin 추가

프로젝트 디렉터리에 있는 babel.config.js에 react-native-reanimated의 plugin을 추가해줘야 합니다. plugin은 목록의 맨 아래에 추가를 해야 한다고 합니다. 저의 경우 아래와 같이 plugin을 추가했습니다.

 

babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '~',
          rootPathSuffix: 'src',
        },
      ],
      'react-native-reanimated/plugin'
    ],
  };

 

* babel.config.js를 수정한 후 앱을 재실행할 때 cache를 삭제하는 걸 권장합니다.

예시는 아래와 같습니다.

npm start --reset-cache
또는
yarn start --reset-cache

 

3. OS 별 추가 작업

라이브러리를 사용하기 위해서는 추가적인 작업이 필요합니다.

ios는 간단히 해결되지만 android는 몇 가지 수정을 더 해줘야 합니다.

 

ios 추가 작업

다른 라이브러리를 설치할 때처럼 pod install 진행하면 됩니다.

 

# ios directory에서 실행해야 합니다.
pod install

 

android 추가 작업

해당 작업을 하지 않고 android 앱을 실행하면 아래 페이지 속 에러를 만나게 됩니다.

https://stackoverflow.com/questions/65761015/invariant-violation-turbomoduleregistry-getenforcing-nativereanimated-c

 

react-native-reanimated가 android에서 auto-link가 되지 않아 해당 작업을 진행해야 합니다.

 

 

android/app/build.gradle 에서 enableHermes를 true로 설정합니다.

project.ext.react = [
    enableHermes: true,  
]

 

MainApplication.java에 아래와 같이 코드를 작성합니다.

...

import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add

...

private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        @Override
        protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
      };

 

저는 getJSIModulePackage 메서드가 없어서 이 메서드를 전체를 작성했습니다.

 

* 만약 위와 같이 설치 후 앱이 잘 동작하지 않는다면 build clean과 앱 제거 후 실행하는 걸 권장드립니다.

build clean은 android studio의 상단 Build -> Clean Project에서 할 수 있습니다. 

---

참고 자료

https://docs.swmansion.com/react-native-reanimated/ - react-native-reanimated 공식 문서

https://medium.com/mj-studio/new-reanimated-v2-shines-react-native-animation-%EF%B8%8F-37e117ab652e - MJ Studio Medium

https://www.josephk.io/see-reanimated-strength-for-yourself/ - josephk.io

 

읽어주셔서 감사합니다.

혹시 본 게시글 중 틀린 내용이 있다면 댓글을 통해 알려주세요 :)