RN: Deprecate Prop Types

Summary:
Deprecates `prop-types` from React Native.

Existing use cases will be presented with a warning to migrate to the newly published `deprecated-react-native-prop-types` module.

In a subsequent release, these will be removed from React Native.

Changelog:
[General][Changed] - Accessing `Image.propTypes`, `Text.propTypes`, `TextInput.propTypes`, `ColorPropType`, `EdgeInsetsPropType`, `PointPropType`, or `ViewPropTypes` now emits a deprecation warning.

Reviewed By: kacieb

Differential Revision: D29019309

fbshipit-source-id: 21e518e588fa05c498cc75ba81f69cfa8a9d0613

Author: yungsters

BUCK

@@ -690,6 +690,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__nullthrows",

Libraries/Components/TextInput/TextInput.js

@@ -10,8 +10,6 @@
 
 import * as React from 'react';
 
-import DeprecatedTextInputPropTypes from '../../DeprecatedPropTypes/DeprecatedTextInputPropTypes';
-
 import Platform from '../../Utilities/Platform';
 import StyleSheet, {
   type TextStyleProp,
@@ -34,7 +32,6 @@ import type {
   PressEvent,
 } from '../../Types/CoreEventTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
 const {useLayoutEffect, useRef, useState} = React;
 
@@ -1244,8 +1241,11 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
-// TODO: Deprecate this
-ExportedForwardRef.propTypes = DeprecatedTextInputPropTypes;
+/**
+ * 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 = {
@@ -1263,7 +1263,6 @@ type TextInputComponentStatics = $ReadOnly<{|
     focusTextInput: typeof TextInputState.focusTextInput,
     blurTextInput: typeof TextInputState.blurTextInput,
   |}>,
-  propTypes: typeof DeprecatedTextInputPropTypes,
 |}>;
 
 const styles = StyleSheet.create({

Libraries/Image/Image.android.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import DeprecatedImagePropType from '../DeprecatedPropTypes/DeprecatedImagePropType';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import * as React from 'react';
 import StyleSheet from '../StyleSheet/StyleSheet';
@@ -115,7 +114,6 @@ type ImageComponentStatics = $ReadOnly<{|
   abortPrefetch: typeof abortPrefetch,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
-  propTypes: typeof DeprecatedImagePropType,
 |}>;
 
 /**
@@ -299,10 +297,11 @@ Image.queryCache = queryCache;
  * comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
-Image.propTypes = DeprecatedImagePropType;
+/**
+ * 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: {

Libraries/Image/Image.ios.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import DeprecatedImagePropType from '../DeprecatedPropTypes/DeprecatedImagePropType';
 import * as React from 'react';
 import StyleSheet from '../StyleSheet/StyleSheet';
 
@@ -94,7 +93,6 @@ type ImageComponentStatics = $ReadOnly<{|
   prefetchWithMetadata: typeof prefetchWithMetadata,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
-  propTypes: typeof DeprecatedImagePropType,
 |}>;
 
 /**
@@ -234,7 +232,11 @@ Image.queryCache = queryCache;
  * delete this comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
-Image.propTypes = DeprecatedImagePropType;
+/**
+ * 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: {

Libraries/Text/Text.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import DeprecatedTextPropTypes from '../DeprecatedPropTypes/DeprecatedTextPropTypes';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import StyleSheet from '../StyleSheet/StyleSheet';
@@ -188,8 +187,11 @@ const Text: React.AbstractComponent<
 
 Text.displayName = 'Text';
 
-// TODO: Delete this.
-Text.propTypes = DeprecatedTextPropTypes;
+/**
+ * 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
@@ -204,8 +206,4 @@ function useLazyInitialization(newValue: boolean): boolean {
   return oldValue;
 }
 
-// $FlowFixMe[incompatible-cast] - No good way to type a React.AbstractComponent with statics.
-module.exports = (Text: typeof Text &
-  $ReadOnly<{
-    propTypes: typeof DeprecatedTextPropTypes,
-  }>);
+module.exports = Text;

index.js

@@ -97,12 +97,6 @@ import typeof RCTDeviceEventEmitter from './Libraries/EventEmitter/RCTDeviceEven
 import typeof RCTNativeAppEventEmitter from './Libraries/EventEmitter/RCTNativeAppEventEmitter';
 import typeof {RootTagContext} from './Libraries/ReactNative/RootTag';
 
-// Prop Types
-import typeof DeprecatedColorPropType from './Libraries/DeprecatedPropTypes/DeprecatedColorPropType';
-import typeof DeprecatedEdgeInsetsPropType from './Libraries/DeprecatedPropTypes/DeprecatedEdgeInsetsPropType';
-import typeof DeprecatedPointPropType from './Libraries/DeprecatedPropTypes/DeprecatedPointPropType';
-import typeof DeprecatedViewPropTypes from './Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes';
-
 import type {HostComponent as _HostComponentInternal} from './Libraries/Renderer/shims/ReactNativeTypes';
 
 export type HostComponent<T> = _HostComponentInternal<T>;
@@ -450,19 +444,34 @@ module.exports = {
         'LogBox is enabled by default so there is no need to call unstable_enableLogBox() anymore. This is a no op and will be removed in the next version.',
       );
   },
-  // Prop Types
-  // $FlowFixMe[value-as-type]
-  get ColorPropType(): DeprecatedColorPropType {
-    return require('./Libraries/DeprecatedPropTypes/DeprecatedColorPropType');
+  // Deprecated Prop Types
+  get ColorPropType(): $FlowFixMe {
+    console.warn(
+      'ColorPropType will be removed from React Native. Migrate to ' +
+        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
+    );
+    return require('deprecated-react-native-prop-types').ColorPropType;
   },
-  get EdgeInsetsPropType(): DeprecatedEdgeInsetsPropType {
-    return require('./Libraries/DeprecatedPropTypes/DeprecatedEdgeInsetsPropType');
+  get EdgeInsetsPropType(): $FlowFixMe {
+    console.warn(
+      'EdgeInsetsPropType will be removed from React Native. Migrate to ' +
+        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
+    );
+    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
   },
-  get PointPropType(): DeprecatedPointPropType {
-    return require('./Libraries/DeprecatedPropTypes/DeprecatedPointPropType');
+  get PointPropType(): $FlowFixMe {
+    console.warn(
+      'PointPropType will be removed from React Native. Migrate to ' +
+        "PointPropType exported from 'deprecated-react-native-prop-types'.",
+    );
+    return require('deprecated-react-native-prop-types').PointPropType;
   },
-  get ViewPropTypes(): DeprecatedViewPropTypes {
-    return require('./Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes');
+  get ViewPropTypes(): $FlowFixMe {
+    console.warn(
+      'ViewPropTypes will be removed from React Native. Migrate to ' +
+        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
+    );
+    return require('deprecated-react-native-prop-types').ViewPropTypes;
   },
 };
 

package.json

@@ -99,6 +99,7 @@
     "anser": "^1.4.9",
     "base64-js": "^1.1.2",
     "event-target-shim": "^5.0.1",
+    "deprecated-react-native-prop-types": "^2.1.0",
     "hermes-engine": "~0.9.0",
     "invariant": "^2.2.4",
     "jsc-android": "^250230.2.1",

yarn.lock

@@ -2350,6 +2350,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.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.1.0.tgz#1f71cc06951131dc6b968c352047bfdab9d478b2"
+  integrity sha512-VZZzU9V6hHxinVI4Ca7imJyXkCcJoRD1GTomQMZt+wcbx0iY22lqFXcJvpWVEoAz01+vhbuWt5Sc3tzrXhRZYw==
+  dependencies:
+    "@react-native/normalize-color" "*"
+    invariant "*"
+    prop-types "*"
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -3438,7 +3447,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==
@@ -5504,7 +5513,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@*, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==