Skip to content

Commit 58a550f

Browse files
sahrenssahrens
committed
[ReactNative] use requireNativeComponent to clean up a bunch of boilerplate
1 parent 901c24e commit 58a550f

File tree

11 files changed

+77
-134
lines changed

11 files changed

+77
-134
lines changed

‎Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,12 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
1515
var NativeModules = require('NativeModules');
1616
var PropTypes = require('ReactPropTypes');
1717
var React = require('React');
18-
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
1918
var StyleSheet = require('StyleSheet');
2019
var View = require('View');
2120

22-
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
2321
var keyMirror = require('keyMirror');
24-
var merge = require('merge');
22+
var requireNativeComponent = require('requireNativeComponent');
23+
var verifyPropTypes = require('verifyPropTypes');
2524

2625
var SpinnerSize = keyMirror({
2726
large: null,
@@ -100,14 +99,17 @@ var styles = StyleSheet.create({
10099
}
101100
});
102101

103-
var UIActivityIndicatorView = createReactIOSNativeComponentClass({
104-
validAttributes: merge(
105-
ReactIOSViewAttributes.UIView, {
106-
activityIndicatorViewStyle: true, // UIActivityIndicatorViewStyle=UIActivityIndicatorViewStyleWhite
107-
animating: true,
108-
color: true,
109-
}),
110-
uiViewClassName: 'UIActivityIndicatorView',
111-
});
102+
var UIActivityIndicatorView = requireNativeComponent(
103+
'UIActivityIndicatorView',
104+
null
105+
);
106+
if (__DEV__) {
107+
var nativeOnlyProps = {activityIndicatorViewStyle: true};
108+
verifyPropTypes(
109+
ActivityIndicatorIOS,
110+
UIActivityIndicatorView.viewConfig,
111+
nativeOnlyProps
112+
);
113+
}
112114

113115
module.exports = ActivityIndicatorIOS;

‎Libraries/Components/DatePicker/DatePickerIOS.ios.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,11 @@
1616
var NativeMethodsMixin = require('NativeMethodsMixin');
1717
var PropTypes = require('ReactPropTypes');
1818
var React = require('React');
19-
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
2019
var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants;
2120
var StyleSheet = require('StyleSheet');
2221
var View = require('View');
2322

24-
var createReactIOSNativeComponentClass =
25-
require('createReactIOSNativeComponentClass');
26-
var merge = require('merge');
23+
var requireNativeComponent = require('requireNativeComponent');
2724

2825
var DATEPICKER = 'datepicker';
2926

@@ -148,18 +145,6 @@ var styles = StyleSheet.create({
148145
},
149146
});
150147

151-
var rkDatePickerIOSAttributes = merge(ReactIOSViewAttributes.UIView, {
152-
date: true,
153-
maximumDate: true,
154-
minimumDate: true,
155-
mode: true,
156-
minuteInterval: true,
157-
timeZoneOffsetInMinutes: true,
158-
});
159-
160-
var RCTDatePickerIOS = createReactIOSNativeComponentClass({
161-
validAttributes: rkDatePickerIOSAttributes,
162-
uiViewClassName: 'RCTDatePicker',
163-
});
148+
var RCTDatePickerIOS = requireNativeComponent('RCTDatePicker', DatePickerIOS);
164149

165150
module.exports = DatePickerIOS;

‎Libraries/Components/MapView/MapView.js‎

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
var EdgeInsetsPropType = require('EdgeInsetsPropType');
1515
var NativeMethodsMixin = require('NativeMethodsMixin');
16+
var Platform = require('Platform');
1617
var React = require('React');
1718
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
1819
var View = require('View');
@@ -21,6 +22,7 @@ var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentC
2122
var deepDiffer = require('deepDiffer');
2223
var insetsDiffer = require('insetsDiffer');
2324
var merge = require('merge');
25+
var requireNativeComponent = require('requireNativeComponent');
2426

2527
type Event = Object;
2628
type MapRegion = {
@@ -156,46 +158,30 @@ var MapView = React.createClass({
156158
},
157159

158160
render: function() {
159-
return (
160-
<RCTMap
161-
style={this.props.style}
162-
showsUserLocation={this.props.showsUserLocation}
163-
zoomEnabled={this.props.zoomEnabled}
164-
rotateEnabled={this.props.rotateEnabled}
165-
pitchEnabled={this.props.pitchEnabled}
166-
scrollEnabled={this.props.scrollEnabled}
167-
region={this.props.region}
168-
annotations={this.props.annotations}
169-
maxDelta={this.props.maxDelta}
170-
minDelta={this.props.minDelta}
171-
legalLabelInsets={this.props.legalLabelInsets}
172-
onChange={this._onChange}
173-
onTouchStart={this.props.onTouchStart}
174-
onTouchMove={this.props.onTouchMove}
175-
onTouchEnd={this.props.onTouchEnd}
176-
onTouchCancel={this.props.onTouchCancel}
177-
/>
178-
);
161+
return <RCTMap {...this.props} onChange={this._onChange} />;
179162
},
180-
181163
});
182164

183-
var RCTMap = createReactIOSNativeComponentClass({
184-
validAttributes: merge(
185-
ReactIOSViewAttributes.UIView, {
186-
showsUserLocation: true,
187-
zoomEnabled: true,
188-
rotateEnabled: true,
189-
pitchEnabled: true,
190-
scrollEnabled: true,
191-
region: {diff: deepDiffer},
192-
annotations: {diff: deepDiffer},
193-
maxDelta: true,
194-
minDelta: true,
195-
legalLabelInsets: {diff: insetsDiffer},
196-
}
197-
),
198-
uiViewClassName: 'RCTMap',
199-
});
165+
if (Platform.OS === 'android') {
166+
var RCTMap = createReactIOSNativeComponentClass({
167+
validAttributes: merge(
168+
ReactIOSViewAttributes.UIView, {
169+
showsUserLocation: true,
170+
zoomEnabled: true,
171+
rotateEnabled: true,
172+
pitchEnabled: true,
173+
scrollEnabled: true,
174+
region: {diff: deepDiffer},
175+
annotations: {diff: deepDiffer},
176+
maxDelta: true,
177+
minDelta: true,
178+
legalLabelInsets: {diff: insetsDiffer},
179+
}
180+
),
181+
uiViewClassName: 'RCTMap',
182+
});
183+
} else {
184+
var RCTMap = requireNativeComponent('RCTMap', MapView);
185+
}
200186

201187
module.exports = MapView;

‎Libraries/Components/SwitchIOS/SwitchIOS.ios.js‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,9 @@
1616
var NativeMethodsMixin = require('NativeMethodsMixin');
1717
var PropTypes = require('ReactPropTypes');
1818
var React = require('React');
19-
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
2019
var StyleSheet = require('StyleSheet');
2120

22-
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
23-
var merge = require('merge');
21+
var requireNativeComponent = require('requireNativeComponent');
2422

2523
var SWITCH = 'switch';
2624

@@ -88,20 +86,16 @@ var SwitchIOS = React.createClass({
8886

8987
// The underlying switch might have changed, but we're controlled,
9088
// and so want to ensure it represents our value.
91-
this.refs[SWITCH].setNativeProps({on: this.props.value});
89+
this.refs[SWITCH].setNativeProps({value: this.props.value});
9290
},
9391

9492
render: function() {
9593
return (
9694
<RCTSwitch
95+
{...this.props}
9796
ref={SWITCH}
98-
style={[styles.rkSwitch, this.props.style]}
99-
enabled={!this.props.disabled}
100-
on={this.props.value}
10197
onChange={this._onChange}
102-
onTintColor={this.props.onTintColor}
103-
thumbTintColor={this.props.thumbTintColor}
104-
tintColor={this.props.tintColor}
98+
style={[styles.rkSwitch, this.props.style]}
10599
/>
106100
);
107101
}
@@ -114,17 +108,6 @@ var styles = StyleSheet.create({
114108
},
115109
});
116110

117-
var rkSwitchAttributes = merge(ReactIOSViewAttributes.UIView, {
118-
onTintColor: true,
119-
tintColor: true,
120-
thumbTintColor: true,
121-
on: true,
122-
enabled: true,
123-
});
124-
125-
var RCTSwitch = createReactIOSNativeComponentClass({
126-
validAttributes: rkSwitchAttributes,
127-
uiViewClassName: 'RCTSwitch',
128-
});
111+
var RCTSwitch = requireNativeComponent('RCTSwitch', SwitchIOS);
129112

130113
module.exports = SwitchIOS;

‎Libraries/Components/TabBarIOS/TabBarIOS.ios.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@
1212
'use strict';
1313

1414
var React = require('React');
15-
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
1615
var StyleSheet = require('StyleSheet');
1716
var TabBarItemIOS = require('TabBarItemIOS');
1817
var View = require('View');
1918

20-
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
19+
var requireNativeComponent = require('requireNativeComponent');
2120

2221
var TabBarIOS = React.createClass({
2322
statics: {
@@ -43,10 +42,6 @@ var styles = StyleSheet.create({
4342
}
4443
});
4544

46-
var config = {
47-
validAttributes: ReactIOSViewAttributes.UIView,
48-
uiViewClassName: 'RCTTabBar',
49-
};
50-
var RCTTabBar = createReactIOSNativeComponentClass(config);
45+
var RCTTabBar = requireNativeComponent('RCTTabBar', TabBarIOS);
5146

5247
module.exports = TabBarIOS;

‎Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,11 @@
1313

1414
var Image = require('Image');
1515
var React = require('React');
16-
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
1716
var StaticContainer = require('StaticContainer.react');
1817
var StyleSheet = require('StyleSheet');
1918
var View = require('View');
2019

21-
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
22-
var merge = require('merge');
20+
var requireNativeComponent = require('requireNativeComponent');
2321

2422
var TabBarItemIOS = React.createClass({
2523
propTypes: {
@@ -121,7 +119,7 @@ var TabBarItemIOS = React.createClass({
121119
selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
122120
onPress={this.props.onPress}
123121
selected={this.props.selected}
124-
badgeValue={badge}
122+
badge={badge}
125123
title={this.props.title}
126124
style={[styles.tab, this.props.style]}>
127125
{tabContents}
@@ -140,15 +138,6 @@ var styles = StyleSheet.create({
140138
}
141139
});
142140

143-
var RCTTabBarItem = createReactIOSNativeComponentClass({
144-
validAttributes: merge(ReactIOSViewAttributes.UIView, {
145-
title: true,
146-
icon: true,
147-
selectedIcon: true,
148-
selected: true,
149-
badgeValue: true,
150-
}),
151-
uiViewClassName: 'RCTTabBarItem',
152-
});
141+
var RCTTabBarItem = requireNativeComponent('RCTTabBarItem', TabBarItemIOS);
153142

154143
module.exports = TabBarItemIOS;

‎Libraries/Components/View/View.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313

1414
var NativeMethodsMixin = require('NativeMethodsMixin');
1515
var PropTypes = require('ReactPropTypes');
16+
var RCTUIManager = require('NativeModules').UIManager;
1617
var React = require('React');
18+
var ReactIOSStyleAttributes = require('ReactIOSStyleAttributes');
1719
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
1820
var StyleSheetPropType = require('StyleSheetPropType');
1921
var ViewStylePropTypes = require('ViewStylePropTypes');
2022

21-
2223
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
2324

2425
var stylePropType = StyleSheetPropType(ViewStylePropTypes);
@@ -157,17 +158,26 @@ var View = React.createClass({
157158
},
158159
});
159160

160-
161161
var RCTView = createReactIOSNativeComponentClass({
162162
validAttributes: ReactIOSViewAttributes.RCTView,
163163
uiViewClassName: 'RCTView',
164164
});
165165
RCTView.propTypes = View.propTypes;
166+
if (__DEV__) {
167+
var viewConfig = RCTUIManager.viewConfigs && RCTUIManager.viewConfigs.RCTView || {};
168+
for (var prop in viewConfig.nativeProps) {
169+
var viewAny: any = View; // Appease flow
170+
if (!viewAny.propTypes[prop] && !ReactIOSStyleAttributes[prop]) {
171+
throw new Error(
172+
'View is missing propType for native prop `' + prop + '`'
173+
);
174+
}
175+
}
176+
}
166177

167178
var ViewToExport = RCTView;
168179
if (__DEV__) {
169180
ViewToExport = View;
170181
}
171182

172-
173183
module.exports = ViewToExport;

‎Libraries/Components/WebView/WebView.ios.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,13 @@ var StyleSheet = require('StyleSheet');
1919
var Text = require('Text');
2020
var View = require('View');
2121

22-
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
22+
var invariant = require('invariant');
2323
var keyMirror = require('keyMirror');
24-
var insetsDiffer = require('insetsDiffer');
25-
var merge = require('merge');
24+
var requireNativeComponent = require('requireNativeComponent');
2625

2726
var PropTypes = React.PropTypes;
2827
var RCTWebViewManager = require('NativeModules').WebViewManager;
2928

30-
var invariant = require('invariant');
31-
3229
var BGWASH = 'rgba(255,255,255,0.8)';
3330
var RCT_WEBVIEW_REF = 'webview';
3431

@@ -213,18 +210,7 @@ var WebView = React.createClass({
213210
},
214211
});
215212

216-
var RCTWebView = createReactIOSNativeComponentClass({
217-
validAttributes: merge(ReactIOSViewAttributes.UIView, {
218-
url: true,
219-
html: true,
220-
bounces: true,
221-
scrollEnabled: true,
222-
contentInset: {diff: insetsDiffer},
223-
automaticallyAdjustContentInsets: true,
224-
shouldInjectAJAXHandler: true
225-
}),
226-
uiViewClassName: 'RCTWebView',
227-
});
213+
var RCTWebView = requireNativeComponent('RCTWebView', WebView);
228214

229215
var styles = StyleSheet.create({
230216
container: {

‎Libraries/ReactIOS/verifyPropTypes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function verifyPropTypes(
2323
return; // This happens for UnimplementedView.
2424
}
2525
var nativeProps = viewConfig.nativeProps;
26-
for (var prop in viewConfig.nativeProps) {
26+
for (var prop in nativeProps) {
2727
if (!component.propTypes[prop] &&
2828
!View.propTypes[prop] &&
2929
!ReactIOSStyleAttributes[prop] &&

‎React/Views/RCTSwitchManager.m‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,14 @@ - (void)onChange:(RCTSwitch *)sender
4242
RCT_EXPORT_VIEW_PROPERTY(onTintColor, UIColor);
4343
RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor);
4444
RCT_EXPORT_VIEW_PROPERTY(thumbTintColor, UIColor);
45-
RCT_EXPORT_VIEW_PROPERTY(on, BOOL);
46-
RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL);
45+
RCT_REMAP_VIEW_PROPERTY(value, on, BOOL);
46+
RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RCTSwitch)
47+
{
48+
if (json) {
49+
view.enabled = !([RCTConvert BOOL:json]);
50+
} else {
51+
view.enabled = defaultView.enabled;
52+
}
53+
}
4754

4855
@end

0 commit comments

Comments
 (0)