ViewPropTypes will be removed from React Native ~ ViewPropTypes exported from 'deprecated-react-native-prop-types'. 에러 해결 방법

리액트 네이티브 프로젝트 진행 중

갑자기 마주한 에러...

해결하는 데 이틀이나 걸린 에러...

해결 방법은 간단했다.

 

💡에러 원인

에러에 대한 정보가 많이 안 나와서 정확하게 이해는 못했지만 스택오버플로우 번역기를 돌려가면서

확인한 결과,, 대충 리액트 버전이 올라가면서 PropType 모듈을 지원 안 한다는 것 같음.

 

💡해결 방법

그래서 새로운 prop-types 모듈을 설치하고 node_modules/react-native/index.js 경로에 있는

파일 내용을 바꿔주어야 한다.

 

1. 모듈 설치

npm install deprecated-react-native-prop-types

 

2. node_modules/react-native/index.js  내용 수정

• 기존 코드 내용

// 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'.",
    );
  },

• 변경 코드

// Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    console.warn(
      'ColorPropType has been removed from React Native! This is a patch. ' +
        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    console.warn(
      'EdgeInsetsPropType has been removed from React Native! This is a patch. ' +
        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    console.warn(
      'PointPropType has been removed from React Native! This is a patch.  ' +
        "PointPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    console.warn(
      'ViewPropTypes has been removed from React Native! This is a patch. ' +
        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },

 

3.  아래 명령어 입력 후 재시작하면 제대로 작동한다!

npx patch-package react-native