[React Native - android] Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'., js engine: v8

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'., js engine: v8
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: v8
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: v8

 

# 원인

기존에 react-native 라이브러리에서 제공하던 {ViewPropTypes} 를 더 이상 지원하지 않아, 별도의 라이브러리를 설치 후 [node_modules > react-native > index.js] 파일에서 아래 코드를 수정해줘야 한다.

 

1. deprecated-react-native-prop-types 라이브러리 설치

yarn add deprecated-react-native-prop-types

 

2. 기존 파일의 {ViewPropTypes} 라이브러리 수정

// before
import {ViewPropTypes} from 'react-native';
...


// after
import {ViewPropTypes} from 'deprecated-react-native-prop-types';

 

3. node_modules > react-native > index.js 파일 코드 수정

// before ////////////////////////////////////////////////////////////
...
  // Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    invariant(
      false,
      'ColorPropType has been removed from React Native. Migrate to ' +
        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
    );
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    invariant(
      false,
      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
    );
  },
  get PointPropType(): $FlowFixMe {
    invariant(
      false,
      'PointPropType has been removed from React Native. Migrate to ' +
        "PointPropType exported from 'deprecated-react-native-prop-types'.",
    );
  },
  get ViewPropTypes(): $FlowFixMe {
    invariant(
      false,
      'ViewPropTypes has been removed from React Native. Migrate to ' +
        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
    );
  },
};
...


// after ////////////////////////////////////////////////////////////
...
  // Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },
...

* reference : https://github.com/facebook/react-native/issues/33557#issuecomment-1265739999 

 

 

4. 수정한 라이브러리를 패치해 준다.

npx patch-package react-native

 

 

그러나 3rd party 라이브러리에서도 아직 react-native 에서 제공하는 {ViewPropTypes} 를 사용중이라서 그런지 여전히 비슷한 에러가 발생한다... 

* reference : https://github.com/meliorence/react-native-snap-carousel/issues/779

* reference : https://github.com/facebook/react-native/issues/33734

* reference : https://stackoverflow.com/q/72755476/17197148

 

나의 경우는 3rd party 라이브러리를 모두 업데이트 해주니 해결은 되었지만, 정확하게 어떤 라이브러리가 문제인지는 시간상 찾지 못했다.

* reference : https://bocoder.tistory.com/127