[change] Remove PropTypes exports and internal use

Removes the following deprecated exports: `ColorPropType`, `EdgeInsetsPropType`, `PointPropType`, `TextPropTypes`, and `ViewPropTypes`. Remove all use of `prop-types` in the implementations of components. Flow types are used instead, so there will no longer be runtime warnings related to props. NOTE: Removes support for `className` prop. Fix #1383 Close #1477 Close #1474 Close #1489
necolas · Dec 18, 2019 · 1ad1693 · 1ad1693
1 parent 924e891
commit 1ad1693
Show file tree

Hide file tree

Showing 133 changed files with 1,051 additions and 3,032 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -34,7 +34,9 @@
     "window": false,
     // Flow global types,
     "$Enum": false,
+    "$PropertyType": false,
     "$ReadOnly": false,
+    "$ReadOnlyArray": false,
     "CSSStyleSheet": false,
     "HTMLInputElement": false,
     "ReactClass": false,
@@ -66,7 +68,6 @@
     "no-dupe-class-members": 2,
     "no-dupe-keys": 2,
     "no-duplicate-case": 2,
-    "no-duplicate-imports": 2,
     "no-empty-character-class": 2,
     "no-empty-pattern": 2,
     "no-eval": 2,

diff --git a/README.md b/README.md
@@ -30,6 +30,8 @@ Who is using React Native in production web apps?
 
 Browser support: Chrome, Firefox, Edge, Safari 7+, IE 10+.
 
+Components and APIs deprecated in React Native are not supported by React Native for Web.
+
 ## Quick start
 
 The easiest way to get started is to edit this
@@ -141,11 +143,9 @@ React Native v0.60
 | AppState                 | ✓      |  |
 | BackHandler              | (✓)    | Mock. No equivalent web APIs. |
 | Clipboard                | ✓      |  |
-| ColorPropType            | ✓      |  |
 | DeviceInfo               | (✓)    | Limited information. |
 | Dimensions               | ✓      |  |
 | Easing                   | ✓      |  |
-| EdgeInsetsPropType       | ✓      |  |
 | Geolocation              | ✓      |  |
 | I18nManager              | ✓      | Includes additional support for runtime switch to RTL. |
 | InteractionManager       | (✓)    |  |
@@ -158,14 +158,11 @@ React Native v0.60
 | PanResponder             | ✓      |  |
 | PixelRatio               | ✓      |  |
 | Platform                 | ✓      |  |
-| PointPropType            | ✓      |  |
 | Settings                 | ✘      | No equivalent web APIs. |
 | Share                    | ✓      | Only available over HTTPS. Read about the [Web Share API](https://wicg.github.io/web-share/). |
 | StyleSheet               | ✓      |  |
-| TextPropTypes            | ✓      |  |
 | UIManager                | ✓      |  |
 | Vibration                | ✓      |  |
-| ViewPropTypes            | ✓      |  |
 
 ## Contributing
 

diff --git a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap
@@ -3,12 +3,11 @@
 exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
 "
 export { View } from 'react-native';
-export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native';
+export { StyleSheet, Text, unstable_createElement } from 'react-native';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 export { default as View } from 'react-native-web/dist/exports/View';
-export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
 export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
 export { default as Text } from 'react-native-web/dist/exports/Text';
 export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
@@ -18,12 +17,11 @@ export { default as unstable_createElement } from 'react-native-web/dist/exports
 exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
 "
 export { View } from 'react-native-web';
-export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web';
+export { StyleSheet, Text, unstable_createElement } from 'react-native-web';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 export { default as View } from 'react-native-web/dist/exports/View';
-export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
 export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
 export { default as Text } from 'react-native-web/dist/exports/Text';
 export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
@@ -34,7 +32,7 @@ exports[`Rewrite react-native to react-native-web import from "native-native": i
 "
 import ReactNative from 'react-native';
 import { View } from 'react-native';
-import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
 import * as ReactNativeModules from 'react-native';
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -43,7 +41,6 @@ import ReactNative from 'react-native-web/dist/index';
 import View from 'react-native-web/dist/exports/View';
 import { Invalid } from 'react-native-web/dist/index';
 import MyView from 'react-native-web/dist/exports/View';
-import ViewPropTypes from 'react-native-web/dist/exports/ViewPropTypes';
 import * as ReactNativeModules from 'react-native-web/dist/index';
 "
 `;
@@ -52,7 +49,7 @@ exports[`Rewrite react-native to react-native-web import from "native-native": i
 "
 import ReactNative from 'react-native';
 import { View } from 'react-native';
-import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
 import * as ReactNativeModules from 'react-native';
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -61,21 +58,19 @@ import ReactNative from 'react-native-web/dist/cjs/index';
 import View from 'react-native-web/dist/cjs/exports/View';
 import { Invalid } from 'react-native-web/dist/cjs/index';
 import MyView from 'react-native-web/dist/cjs/exports/View';
-import ViewPropTypes from 'react-native-web/dist/cjs/exports/ViewPropTypes';
 import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
 "
 `;
 
 exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
 "
 import { unstable_createElement } from 'react-native-web';
-import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import unstable_createElement from 'react-native-web/dist/exports/createElement';
-import ColorPropType from 'react-native-web/dist/exports/ColorPropType';
 import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
 import View from 'react-native-web/dist/exports/View';
 import TouchableOpacity from 'react-native-web/dist/exports/TouchableOpacity';
@@ -124,16 +119,14 @@ exports[`Rewrite react-native to react-native-web require "react-native-web": re
 "
 const ReactNative = require('react-native-web');
 const { unstable_createElement } = require('react-native-web');
-const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
+const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 const ReactNative = require('react-native-web/dist/index');
 
 const unstable_createElement = require('react-native-web/dist/exports/createElement').default;
 
-const ColorPropType = require('react-native-web/dist/exports/ColorPropType').default;
-
 const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
 
 const View = require('react-native-web/dist/exports/View').default;

diff --git a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js
@@ -7,36 +7,36 @@ const tests = [
     title: 'import from "native-native"',
     code: `import ReactNative from 'react-native';
 import { View } from 'react-native';
-import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
 import * as ReactNativeModules from 'react-native';`,
     snapshot: true
   },
   {
     title: 'import from "native-native"',
     code: `import ReactNative from 'react-native';
 import { View } from 'react-native';
-import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
 import * as ReactNativeModules from 'react-native';`,
     snapshot: true,
     pluginOptions: { commonjs: true }
   },
   {
     title: 'import from "react-native-web"',
     code: `import { unstable_createElement } from 'react-native-web';
-import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';`,
     snapshot: true
   },
   {
     title: 'export from "react-native"',
     code: `export { View } from 'react-native';
-export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native';`,
+export { StyleSheet, Text, unstable_createElement } from 'react-native';`,
     snapshot: true
   },
   {
     title: 'export from "react-native-web"',
     code: `export { View } from 'react-native-web';
-export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
+export { StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
     snapshot: true
   },
   {
@@ -58,7 +58,7 @@ const { StyleSheet, TouchableOpacity } = require('react-native');`,
     title: 'require "react-native-web"',
     code: `const ReactNative = require('react-native-web');
 const { unstable_createElement } = require('react-native-web');
-const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
+const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
     snapshot: true
   }
 ];

diff --git a/packages/babel-plugin-react-native-web/src/moduleMap.js b/packages/babel-plugin-react-native-web/src/moduleMap.js
@@ -10,13 +10,11 @@ module.exports = {
   Button: true,
   CheckBox: true,
   Clipboard: true,
-  ColorPropType: true,
   DeviceEventEmitter: true,
   DeviceInfo: true,
   Dimensions: true,
   DrawerLayoutAndroid: true,
   Easing: true,
-  EdgeInsetsPropType: true,
   FlatList: true,
   I18nManager: true,
   Image: true,
@@ -35,7 +33,6 @@ module.exports = {
   Picker: true,
   PixelRatio: true,
   Platform: true,
-  PointPropType: true,
   ProgressBar: true,
   RefreshControl: true,
   SafeAreaView: true,
@@ -51,7 +48,6 @@ module.exports = {
   TabBarIOS: true,
   Text: true,
   TextInput: true,
-  TextPropTypes: true,
   TimePickerAndroid: true,
   ToastAndroid: true,
   Touchable: true,
@@ -62,7 +58,6 @@ module.exports = {
   UIManager: true,
   Vibration: true,
   View: true,
-  ViewPropTypes: true,
   VirtualizedList: true,
   YellowBox: true,
   createElement: true,

diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js
@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types */
-
 import Benchmark from './Benchmark';
 import { Picker, StyleSheet, ScrollView, TouchableOpacity, View } from 'react-native';
 import React, { Component } from 'react';

diff --git a/packages/benchmarks/src/app/Benchmark/index.js b/packages/benchmarks/src/app/Benchmark/index.js
@@ -6,7 +6,6 @@
  */
 
 /* global $Values */
-/* eslint-disable react/prop-types */
 
 import * as Timing from './timing';
 import React, { Component } from 'react';

diff --git a/packages/benchmarks/src/app/Button.js b/packages/benchmarks/src/app/Button.js
@@ -1,21 +1,9 @@
-import { ColorPropType, StyleSheet, TouchableHighlight, Text } from 'react-native';
+import { StyleSheet, TouchableHighlight, Text } from 'react-native';
 import React, { Component } from 'react';
-import { bool, func, string } from 'prop-types';
 
 export default class Button extends Component<*> {
   static displayName = '@app/Button';
 
-  static propTypes = {
-    accessibilityLabel: string,
-    color: ColorPropType,
-    disabled: bool,
-    onPress: func.isRequired,
-    style: TouchableHighlight.propTypes.style,
-    testID: string,
-    textStyle: Text.propTypes.style,
-    title: string.isRequired
-  };
-
   render() {
     const {
       accessibilityLabel,

diff --git a/packages/benchmarks/src/app/Layout.js b/packages/benchmarks/src/app/Layout.js
@@ -1,15 +1,8 @@
 import { colors } from './theme';
-import { element } from 'prop-types';
 import React, { Component } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 export default class Layout extends Component {
-  static propTypes = {
-    actionPanel: element,
-    listPanel: element,
-    viewPanel: element
-  };
-
   state = {
     widescreen: false
   };

diff --git a/packages/benchmarks/src/app/ReportCard.js b/packages/benchmarks/src/app/ReportCard.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import Text from './Text';
 import { StyleSheet, View } from 'react-native';
 import React, { Fragment } from 'react';

diff --git a/packages/benchmarks/src/app/Text.js b/packages/benchmarks/src/app/Text.js
@@ -1,8 +1,6 @@
-/* eslint-disable react/prop-types */
-
-import { bool } from 'prop-types';
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
+import { bool } from 'prop-types';
 import { colors } from './theme';
 
 class AppText extends React.Component {

diff --git a/packages/benchmarks/src/cases/SierpinskiTriangle.js b/packages/benchmarks/src/cases/SierpinskiTriangle.js
@@ -1,5 +1,4 @@
 import { BenchmarkType } from '../app/Benchmark';
-import { number, object } from 'prop-types';
 import React from 'react';
 import { interpolatePurples, interpolateBuPu, interpolateRdPu } from 'd3-scale-chromatic';
 
@@ -10,15 +9,6 @@ class SierpinskiTriangle extends React.Component {
 
   static benchmarkType = BenchmarkType.UPDATE;
 
-  static propTypes = {
-    components: object,
-    depth: number,
-    renderCount: number,
-    s: number,
-    x: number,
-    y: number
-  };
-
   static defaultProps = {
     depth: 0,
     renderCount: 0

diff --git a/packages/benchmarks/src/cases/TextTree.js b/packages/benchmarks/src/cases/TextTree.js
@@ -1,20 +1,11 @@
 import { BenchmarkType } from '../app/Benchmark';
-import { number, object } from 'prop-types';
 import React, { Component } from 'react';
 
 class TextTree extends Component {
   static displayName = 'TextTree';
 
   static benchmarkType = BenchmarkType.MOUNT;
 
-  static propTypes = {
-    breadth: number.isRequired,
-    components: object,
-    depth: number.isRequired,
-    id: number.isRequired,
-    wrap: number.isRequired
-  };
-
   render() {
     const { breadth, components, depth, id, wrap } = this.props;
     const { TextBox } = components;

diff --git a/packages/benchmarks/src/cases/Tree.js b/packages/benchmarks/src/cases/Tree.js
@@ -1,20 +1,11 @@
 import { BenchmarkType } from '../app/Benchmark';
-import { number, object } from 'prop-types';
 import React, { Component } from 'react';
 
 class Tree extends Component {
   static displayName = 'Tree';
 
   static benchmarkType = BenchmarkType.MOUNT;
 
-  static propTypes = {
-    breadth: number.isRequired,
-    components: object,
-    depth: number.isRequired,
-    id: number.isRequired,
-    wrap: number.isRequired
-  };
-
   render() {
     const { breadth, components, depth, id, wrap } = this.props;
     const { Box } = components;

diff --git a/packages/benchmarks/src/implementations/aphrodite/Box.js b/packages/benchmarks/src/implementations/aphrodite/Box.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import View from './View';
 import { StyleSheet } from 'aphrodite';

diff --git a/packages/benchmarks/src/implementations/aphrodite/View.js b/packages/benchmarks/src/implementations/aphrodite/View.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { css, StyleSheet } from 'aphrodite';
 

diff --git a/packages/benchmarks/src/implementations/css-modules/Box.js b/packages/benchmarks/src/implementations/css-modules/Box.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
 import View from './View';

diff --git a/packages/benchmarks/src/implementations/css-modules/View.js b/packages/benchmarks/src/implementations/css-modules/View.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
 import styles from './view-styles.css';

diff --git a/packages/benchmarks/src/implementations/emotion/Box.js b/packages/benchmarks/src/implementations/emotion/Box.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import View from './View';
 

diff --git a/packages/benchmarks/src/implementations/emotion/Dot.js b/packages/benchmarks/src/implementations/emotion/Dot.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { css } from 'emotion';