From b966d297245a4c1e2c744cfe571396cfa7e5ffd3 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Wed, 26 Oct 2022 22:03:19 -0700 Subject: [PATCH] Add back deprecated prop-types Summary: In 2017, React published v15.5 which extracted the built-in `prop types` to a separate package to reflect the fact that not everybody uses them. In 2018, React Native started to remove `PropTypes` from React Native for the same reason. In 0.68 React Native introduced a deprecation warning which notified users that the change was coming, and in 0.69 we removed the PropTypes entirely. The feedback we've received from the community is that there has not been enough time to migrate libraries off of PropTypes. This has resulted in users needing to patch the React Native package `index.js` file directly to add back the PropTypes, instead of migrating off of them. We can empathize with this fix short term (it unblocks the upgrade) but long term this patch will cause users to miss important changes to `index.js`, and add a maintenance cost for users. Part of the reason there was not enough time is that we didn't do a good job surfacing libraries that were using PropTypes. This means, when you got a deprecation warning, it wasn't clear where the source of the usage was (either in your code or in a library). So even if you wanted to migrate, it was difficult to know where to actually make the change. In the next release, we've made it easier to find call sites using deprecated types by [fixing the code frame in errors](https://github.com/react-native-community/cli/pull/1699) reporting in LogBox, and ensuring that [the app doesn't crash without a warning](https://github.com/facebook/react-native/pull/34650). This should make it easier to identify exactly where the deprecated usage is, so you can migrate it. To help users get off of the patch, and allow more time to migrate, we're walking back the removal of PropTypes, and keeping it as a deprecation for a couple more versions. We ask that you either migrate off PropTypes to a type system like TypeScript, or migrate to the `deprecated-react-native-prop-types` package. Once we feel more confident that the community has migrated and will not need to patch React Native in order to fix this issue, we'll remove the PropTypes again. **If you have any trouble finding the source of the PropType usage, please file an issue so we can help track it down with you.** Changelog: [General][Changed] - Add back deprecated PropTypes Reviewed By: yungsters Differential Revision: D40725705 fbshipit-source-id: 8ce61be30343827efd6dc89a012eeef0b6676deb --- BUCK | 1 + Libraries/Components/TextInput/TextInput.js | 7 ++++++ Libraries/Image/Image.android.js | 6 ++++++ Libraries/Image/Image.ios.js | 6 ++++++ Libraries/Text/Text.js | 6 ++++++ index.js | 24 ++++++++++----------- package.json | 1 + yarn.lock | 13 +++++++++-- 8 files changed, 50 insertions(+), 14 deletions(-) diff --git a/BUCK b/BUCK index e1b1e68844cbd7..f6992f1619298c 100644 --- a/BUCK +++ b/BUCK @@ -742,6 +742,7 @@ rn_library( "//xplat/js:node_modules__abort_19controller", "//xplat/js:node_modules__anser", "//xplat/js:node_modules__base64_19js", + "//xplat/js:node_modules__deprecated_19react_19native_19prop_19types", "//xplat/js:node_modules__event_19target_19shim", "//xplat/js:node_modules__invariant", "//xplat/js:node_modules__memoize_19one", diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index fa45a7b441e8fb..386e6b87c8822e 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -1650,6 +1650,13 @@ const ExportedForwardRef: React.AbstractComponent< ); }); +/** + * Switch to `deprecated-react-native-prop-types` for compatibility with future + * releases. This is deprecated and will be removed in the future. + */ +ExportedForwardRef.propTypes = + require('deprecated-react-native-prop-types').TextInputPropTypes; + // $FlowFixMe[prop-missing] ExportedForwardRef.State = { currentlyFocusedInput: TextInputState.currentlyFocusedInput, diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index 1b552f6720538b..f874c6abc93f02 100644 --- a/Libraries/Image/Image.android.js +++ b/Libraries/Image/Image.android.js @@ -325,6 +325,12 @@ Image.queryCache = queryCache; * comment and run Flow. */ Image.resolveAssetSource = resolveAssetSource; +/** + * Switch to `deprecated-react-native-prop-types` for compatibility with future + * releases. This is deprecated and will be removed in the future. + */ +Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes; + const styles = StyleSheet.create({ base: { overflow: 'hidden', diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 1d9b1f80203d5e..6f1d72fcb5a8c3 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -260,6 +260,12 @@ Image.queryCache = queryCache; * delete this comment and run Flow. */ Image.resolveAssetSource = resolveAssetSource; +/** + * Switch to `deprecated-react-native-prop-types` for compatibility with future + * releases. This is deprecated and will be removed in the future. + */ +Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes; + const styles = StyleSheet.create({ base: { overflow: 'hidden', diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 2470a3c2627bc6..1f6524721cc820 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -270,6 +270,12 @@ const Text: React.AbstractComponent< Text.displayName = 'Text'; +/** + * Switch to `deprecated-react-native-prop-types` for compatibility with future + * releases. This is deprecated and will be removed in the future. + */ +Text.propTypes = require('deprecated-react-native-prop-types').TextPropTypes; + /** * Returns false until the first time `newValue` is true, after which this will * always return true. This is necessary to lazily initialize `Pressability` so diff --git a/index.js b/index.js index d2d8fd1316d69c..255b3e6af1a43a 100644 --- a/index.js +++ b/index.js @@ -433,44 +433,44 @@ module.exports = { }, // Deprecated Prop Types get ColorPropType(): $FlowFixMe { - invariant( - false, - 'ColorPropType has been removed from React Native, along with all ' + + 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 { - invariant( - false, - 'EdgeInsetsPropType has been removed from React Native, along with all ' + + 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 { - invariant( - false, - 'PointPropType has been removed from React Native, along with all ' + + 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 { - invariant( - false, - 'ViewPropTypes has been removed from React Native, along with all ' + + 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; }, }; diff --git a/package.json b/package.json index c0c3eb4cd0d845..410e3f812edd3f 100644 --- a/package.json +++ b/package.json @@ -118,6 +118,7 @@ "abort-controller": "^3.0.0", "anser": "^1.4.9", "base64-js": "^1.1.2", + "deprecated-react-native-prop-types": "^2.3.0", "event-target-shim": "^5.0.1", "invariant": "^2.2.4", "jest-environment-node": "^29.2.1", diff --git a/yarn.lock b/yarn.lock index 740f4c15920f8f..fbdd4966d241a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4145,6 +4145,15 @@ depd@~1.1.2: resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak= +deprecated-react-native-prop-types@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz#c10c6ee75ff2b6de94bb127f142b814e6e08d9ab" + integrity sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA== + dependencies: + "@react-native/normalize-color" "*" + invariant "*" + prop-types "*" + deprecation@^2.0.0, deprecation@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919" @@ -5548,7 +5557,7 @@ interpret@^1.0.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ= -invariant@^2.2.4: +invariant@*, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -7848,7 +7857,7 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +prop-types@*, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==