운동하고개발하고

에러해결 - ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'd.. 본문

Front-End/ReactNative

에러해결 - ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'd..

세폴리아 2023. 9. 24. 11:15

react native 를 개발중에 외부라이브러리 설치중에 생긴 에러...

전 deprecated-react-native-prop-types 이런 패키지를 설치한적도 없습니다 ㅠㅠ

역시 갓글링... 해결책 바로 제시

 

우선 해당 패키지를 설치해줍니다.

npm install deprecated-react-native-prop-types
또는
yarn add deprecated-react-native-prop-types

그리고 에러 관련 코드를 수정합니다.

/node_modules/reactnative/index.js

전 381번째 줄에 해당 코드가 있었습니다.

// Deprecated Prop Types 라고 검색하면 더 빠르실듯 합니다.

// Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    console.error(
      'ColorPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using ColorPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    console.error(
      'EdgeInsetsPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using EdgeInsetsPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    console.error(
      'PointPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using PointPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    console.error(
      'ViewPropTypes will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using ViewPropTypes, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },

 

이 부분을 아래와 같이 수정합니다.

 

// 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;
},

 

코드를 수정 후 패치를 해줍니다.

npx patch-package react-native

다시 빌드하면 됩니다..

하지만 이 방법은 임시방편이라 합니다... 리액트네이티브를 업그레이드 할 때 마다 다시 적용해야 하고..

지금 문제가 된 특정 라이브러리가 있는데, 이 라이브러리가 deprecated-react-native-prop-types 에서 가져오도록 업데이트될까지..

그래도 우선 개발은 해야하니 이렇게 진행합니다 !