Skip to content
Permalink
Browse files

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
  • Loading branch information...
yungsters authored and facebook-github-bot committed Jun 1, 2018
1 parent 6c91054 commit 8dc3ba0444c94d9bbb66295b5af885bff9b9cd34
@@ -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',
@@ -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;
@@ -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;
@@ -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>,
>);
@@ -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;
@@ -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;
@@ -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>,
>);
@@ -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>>);
@@ -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>>);
@@ -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;
@@ -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,
@@ -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__) {
Oops, something went wrong.

0 comments on commit 8dc3ba0

Please sign in to comment.
You can’t perform that action at this time.