Post

React Native: fix 'react-native-reanimated' error

@react-navigation/drawer package의 dependency의 하나인 react-native-reanimated 설치과정에서 나타나는 오류로 React Navigation > Drawer Navigator Document 외에 별도의 설정이 필요하다.

React Native Renanimated

ERROR  Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Troubleshoot & Problem Solve

  1. react-native-reanimated를 설치한다.

    1
    
    yarn add react-native-reanimated
    
  2. babel.config.js 파일 생성 후, pluginsreact-native-reanimated/plugin를 추가한다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
     module.exports = {
       presets: [
         ...
       ],
       plugins: [
         ...
         'react-native-reanimated/plugin',
       ],
     };
    

    CAUTION: Reanimated plugin has to be listed last.

Reference

This post is licensed under CC BY 4.0 by the author.