RN: Remove Native Prop Validation

Summary: As we migrate over to static typing solutions for props, we cannot rely on always having `propTypes` available at runtime. This gets us started on that journey by removing the native prop validation that happens when we require native components. bypass-lint Reviewed By: TheSavior Differential Revision: D7976854 fbshipit-source-id: f3ab579a7f0f8cfb716b0eb7fd4625f8168f3d96
facebook · Jun 1, 2018 · 8dc3ba0 · 8dc3ba0
1 parent 6c91054
commit 8dc3ba0
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 283 deletions.
diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -11,7 +11,6 @@
 'use strict';
 
 const Platform = require('Platform');
-const ProgressBarAndroid = require('ProgressBarAndroid');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
@@ -21,7 +20,10 @@ const requireNativeComponent = require('requireNativeComponent');
 import type {NativeComponent} from 'ReactNative';
 import type {ViewProps} from 'ViewPropTypes';
 
-let RCTActivityIndicator;
+const RCTActivityIndicator =
+  Platform.OS === 'android'
+    ? require('ProgressBarAndroid')
+    : requireNativeComponent('RCTActivityIndicatorView');
 
 const GRAY = '#999999';
 
@@ -98,11 +100,7 @@ const ActivityIndicator = (
 
   return (
     <View onLayout={onLayout} style={[styles.container, style]}>
-      {Platform.OS === 'ios' ? (
-        <RCTActivityIndicator {...nativeProps} />
-      ) : (
-        <ProgressBarAndroid {...nativeProps} />
-      )}
+      <RCTActivityIndicator {...nativeProps} />
     </View>
   );
 };
@@ -120,14 +118,6 @@ ActivityIndicatorWithRef.defaultProps = {
 };
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
-if (Platform.OS === 'ios') {
-  RCTActivityIndicator = requireNativeComponent(
-    'RCTActivityIndicatorView',
-    null,
-    {nativeOnly: {activityIndicatorViewStyle: true}},
-  );
-}
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',

diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -22,6 +22,8 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTDatePickerIOS = requireNativeComponent('RCTDatePicker');
+
 type Event = Object;
 
 type Props = $ReadOnly<{|
@@ -177,6 +179,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const RCTDatePickerIOS = requireNativeComponent('RCTDatePicker');
-
 module.exports = DatePickerIOS;
diff --git a/Libraries/Components/MaskedView/MaskedViewIOS.ios.js b/Libraries/Components/MaskedView/MaskedViewIOS.ios.js
@@ -17,6 +17,8 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTMaskedView = requireNativeComponent('RCTMaskedView');
+
 type Props = {
   ...ViewProps,
 
@@ -97,12 +99,4 @@ class MaskedViewIOS extends React.Component<Props> {
   }
 }
 
-const RCTMaskedView = requireNativeComponent('RCTMaskedView', {
-  name: 'RCTMaskedView',
-  displayName: 'RCTMaskedView',
-  propTypes: {
-    ...ViewPropTypes,
-  },
-});
-
 module.exports = MaskedViewIOS;
diff --git a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js
@@ -25,6 +25,8 @@ import type {ImageSource} from 'ImageSource';
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTProgressView = requireNativeComponent('RCTProgressView');
+
 type Props = $ReadOnly<{|
   ...ViewProps,
   progressViewStyle?: ?('default' | 'bar'),
@@ -91,11 +93,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const RCTProgressView = requireNativeComponent(
-  'RCTProgressView',
-  ProgressViewIOS,
-);
-
 module.exports = ((ProgressViewIOS: any): Class<
   ReactNative.NativeComponent<Props>,
 >);
diff --git a/Libraries/Components/SafeAreaView/SafeAreaView.ios.js b/Libraries/Components/SafeAreaView/SafeAreaView.ios.js
@@ -14,6 +14,8 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView');
+
 type Props = ViewProps & {
   children: any,
 };
@@ -34,12 +36,4 @@ class SafeAreaView extends React.Component<Props> {
   }
 }
 
-const RCTSafeAreaView = requireNativeComponent('RCTSafeAreaView', {
-  name: 'RCTSafeAreaView',
-  displayName: 'RCTSafeAreaView',
-  propTypes: {
-    ...ViewPropTypes,
-  },
-});
-
 module.exports = SafeAreaView;
diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
@@ -45,6 +45,28 @@ import type {PointProp} from 'PointPropType';
 
 import type {ColorValue} from 'StyleSheetTypes';
 
+let AndroidScrollView;
+let AndroidHorizontalScrollContentView;
+let AndroidHorizontalScrollView;
+let RCTScrollView;
+let RCTScrollContentView;
+
+if (Platform.OS === 'android') {
+  AndroidScrollView = requireNativeComponent('RCTScrollView');
+  AndroidHorizontalScrollView = requireNativeComponent(
+    'AndroidHorizontalScrollView',
+  );
+  AndroidHorizontalScrollContentView = requireNativeComponent(
+    'AndroidHorizontalScrollContentView',
+  );
+} else if (Platform.OS === 'ios') {
+  RCTScrollView = requireNativeComponent('RCTScrollView');
+  RCTScrollContentView = requireNativeComponent('RCTScrollContentView');
+} else {
+  RCTScrollView = requireNativeComponent('RCTScrollView');
+  RCTScrollContentView = requireNativeComponent('RCTScrollContentView');
+}
+
 type TouchableProps = $ReadOnly<{|
   onTouchStart?: (event: PressEvent) => void,
   onTouchMove?: (event: PressEvent) => void,
@@ -1074,56 +1096,4 @@ const styles = StyleSheet.create({
   },
 });
 
-let nativeOnlyProps,
-  AndroidScrollView,
-  AndroidHorizontalScrollContentView,
-  AndroidHorizontalScrollView,
-  RCTScrollView,
-  RCTScrollContentView;
-if (Platform.OS === 'android') {
-  nativeOnlyProps = {
-    nativeOnly: {
-      sendMomentumEvents: true,
-    },
-  };
-  AndroidScrollView = requireNativeComponent(
-    'RCTScrollView',
-    (ScrollView: React.ComponentType<any>),
-    nativeOnlyProps,
-  );
-  AndroidHorizontalScrollView = requireNativeComponent(
-    'AndroidHorizontalScrollView',
-    (ScrollView: React.ComponentType<any>),
-    nativeOnlyProps,
-  );
-  AndroidHorizontalScrollContentView = requireNativeComponent(
-    'AndroidHorizontalScrollContentView',
-  );
-} else if (Platform.OS === 'ios') {
-  nativeOnlyProps = {
-    nativeOnly: {
-      onMomentumScrollBegin: true,
-      onMomentumScrollEnd: true,
-      onScrollBeginDrag: true,
-      onScrollEndDrag: true,
-    },
-  };
-  RCTScrollView = requireNativeComponent(
-    'RCTScrollView',
-    (ScrollView: React.ComponentType<any>),
-    nativeOnlyProps,
-  );
-  RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
-} else {
-  nativeOnlyProps = {
-    nativeOnly: {},
-  };
-  RCTScrollView = requireNativeComponent(
-    'RCTScrollView',
-    null,
-    nativeOnlyProps,
-  );
-  RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
-}
-
 module.exports = TypedScrollView;
diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js
@@ -22,6 +22,8 @@ const requireNativeComponent = require('requireNativeComponent');
 
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTSegmentedControl = requireNativeComponent('RCTSegmentedControl');
+
 type DefaultProps = {
   values: $ReadOnlyArray<string>,
   enabled: boolean,
@@ -139,11 +141,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const RCTSegmentedControl = requireNativeComponent(
-  'RCTSegmentedControl',
-  SegmentedControlIOS,
-);
-
 module.exports = ((SegmentedControlIOS: any): Class<
   ReactNative.NativeComponent<Props>,
 >);
diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js
@@ -29,6 +29,8 @@ import type {ViewStyleProp} from 'StyleSheet';
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTSlider = requireNativeComponent('RCTSlider');
+
 type Event = Object;
 
 type IOSProps = $ReadOnly<{|
@@ -306,14 +308,4 @@ if (Platform.OS === 'ios') {
   });
 }
 
-let options = {};
-if (Platform.OS === 'android') {
-  options = {
-    nativeOnly: {
-      enabled: true,
-    },
-  };
-}
-const RCTSlider = requireNativeComponent('RCTSlider', Slider, options);
-
 module.exports = ((Slider: any): Class<ReactNative.NativeComponent<Props>>);
diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
@@ -25,6 +25,11 @@ const requireNativeComponent = require('requireNativeComponent');
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTSwitch =
+  Platform.OS === 'android'
+    ? requireNativeComponent('AndroidSwitch')
+    : requireNativeComponent('RCTSwitch');
+
 type DefaultProps = $ReadOnly<{|
   value: boolean,
   disabled: boolean,
@@ -40,6 +45,7 @@ type Props = $ReadOnly<{|
   onTintColor?: ?ColorValue,
   thumbTintColor?: ?ColorValue,
 |}>;
+
 /**
  * Renders a boolean input.
  *
@@ -158,21 +164,4 @@ const styles = StyleSheet.create({
   },
 });
 
-if (Platform.OS === 'android') {
-  var RCTSwitch = requireNativeComponent('AndroidSwitch', Switch, {
-    nativeOnly: {
-      onChange: true,
-      on: true,
-      enabled: true,
-      trackTintColor: true,
-    },
-  });
-} else {
-  var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
-    nativeOnly: {
-      onChange: true,
-    },
-  });
-}
-
 module.exports = ((Switch: any): Class<ReactNative.NativeComponent<Props>>);
diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js
@@ -22,6 +22,8 @@ const requireNativeComponent = require('requireNativeComponent');
 import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
 import type {ViewProps} from 'ViewPropTypes';
 
+const RCTTabBar = requireNativeComponent('RCTTabBar');
+
 type Props = $ReadOnly<{|
   ...ViewProps,
   style?: DangerouslyImpreciseStyleProp,
@@ -102,6 +104,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const RCTTabBar = requireNativeComponent('RCTTabBar', TabBarIOS);
-
 module.exports = TabBarIOS;
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -40,24 +40,22 @@ let AndroidTextInput;
 let RCTMultilineTextInputView;
 let RCTSinglelineTextInputView;
 
-const onlyMultiline = {
-  onTextInput: true,
-  children: true,
-};
-
 if (Platform.OS === 'android') {
-  AndroidTextInput = requireNativeComponent('AndroidTextInput', null);
+  AndroidTextInput = requireNativeComponent('AndroidTextInput');
 } else if (Platform.OS === 'ios') {
   RCTMultilineTextInputView = requireNativeComponent(
     'RCTMultilineTextInputView',
-    null,
   );
   RCTSinglelineTextInputView = requireNativeComponent(
     'RCTSinglelineTextInputView',
-    null,
   );
 }
 
+const onlyMultiline = {
+  onTextInput: true,
+  children: true,
+};
+
 type Event = Object;
 type Selection = {
   start: number,

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
@@ -10,11 +10,8 @@
 
 'use strict';
 
-const Platform = require('Platform');
 const React = require('React');
-const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const TextAncestor = require('TextAncestor');
-const ViewPropTypes = require('ViewPropTypes');
 
 const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
@@ -31,31 +28,7 @@ export type Props = ViewProps;
  *
  * @see http://facebook.github.io/react-native/docs/view.html
  */
-const RCTView = requireNativeComponent(
-  'RCTView',
-  {
-    propTypes: ViewPropTypes,
-  },
-  {
-    nativeOnly: {
-      nativeBackgroundAndroid: true,
-      nativeForegroundAndroid: true,
-    },
-  },
-);
-
-if (__DEV__) {
-  const UIManager = require('UIManager');
-  const viewConfig =
-    (UIManager.viewConfigs && UIManager.viewConfigs.RCTView) || {};
-  for (const prop in viewConfig.nativeProps) {
-    if (!ViewPropTypes[prop] && !ReactNativeStyleAttributes[prop]) {
-      throw new Error(
-        'View is missing propType for native prop `' + prop + '`',
-      );
-    }
-  }
-}
+const RCTView = requireNativeComponent('RCTView');
 
 let ViewToExport = RCTView;
 if (__DEV__) {