Issue with 'ViewPropTypes.styles' after upgrading expo from 45 to 46 and 'fixing' deprecated-props

Question

I have just upgraded expo from 45 to 46 to run on my physical device (apparently this update is need for the expo app). Both of this issues came up:

I have found many solutions for the deprecated module, most of them with this fix: upgrading on node_moldules/react-native/index.tsx (as many solutions suggest):

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

Although after doing this "solution", I got the following error (and the "main" error persists too):

Answer 1

Prop-type validation is auto handle by typescript and not need explicit show in your code. TypeScript provides static type checking, which is a much more powerful and efficient way to validate the types of your props at compile-time rather than runtime like PropTypes.When using TypeScript, you can define types or interfaces for your props and then TypeScript will automatically check that the props passed to your components match the expected types during development. If the types don't match, TypeScript will raise an error during compilation, preventing runtime issues.

Instead of using PropTypes (which is runtime validation), with TypeScript, you define the types of the props explicitly, and TypeScript takes care of checking them at compile-time. Example:

<Card 
  fullname={123}  // This will raise an error if 'fullname' is expected to be a string
  image="https://someimage.url"
  linkText="Go to profile"
  onPressLinkText={() => {}}
/>

TypeScript checks the types at compile time, which can catch errors early during development before the app is even run.TypeScript can often automatically infer types, so you don’t have to explicitly define types in many cases. If you're using TypeScript, you do not need PropTypes for prop validation. TypeScript handles it natively with its type system. PropTypes were mainly used for runtime validation in JavaScript before TypeScript became widely adopted.

If you're using React Native with PropTypes and you're not ready to switch to TypeScript, then the deprecated-react-native-prop-types package can help you keep using PropTypes for older versions of React Native. However, if you're using TypeScript, you should rely on TypeScript's type system instead. The best combination is to use TypeScript for compile time check and 'ZOD' package for run-time check

Answer 2

Well, I manage to solve it.
What has to be done?
1. Install patch-package and deprecated-react-native-prop-types.
2. In node_moldules/react-native/index.tsx. Insert the require lines:

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

3. Probably you will get the same issue with props as me, this means that some of your dependencies are outdated. Search for PropTypes.style (On every dependency on node_modules -> "yes it is boring and exhaustive", what I did to find the dependencies with issue was to comment all my code, and slowly uncomment it, so when the error shows I know which page is causing it), after finding the dependency with PropTypes.style, try to update the dependencies with yarn <dependencie>. If it does not fix the issue, then replace PropTypes.style with require('deprecated-react-native-prop-types').ViewPropTypes.
4. If updating dependencies fixed for you, your done.
5. If you had to include require(...) in any of the dependencies, don't forget to run yarn patch-package <package-name>
6. And also don't forget to run yarn patch-package after installing any packages with yarn or npm