Use requireNativeComponent with propTypes for Android components.

Reviewed By: davidaurelio

Differential Revision: D2663502

fb-gh-sync-id: 550e7b7c783ec0463a6beb052c09a768a8086056

Libraries/Components/ScrollView/RecyclerViewBackedScrollView.android.js

@@ -122,6 +122,9 @@ var styles = StyleSheet.create({
   },
 });
 
-var NativeAndroidRecyclerView = requireNativeComponent('AndroidRecyclerViewBackedScrollView', null);
+var NativeAndroidRecyclerView = requireNativeComponent(
+  'AndroidRecyclerViewBackedScrollView',
+  RecyclerViewBackedScrollView
+);
 
 module.exports = RecyclerViewBackedScrollView;

Libraries/Components/Switch/Switch.js

@@ -6,10 +6,11 @@
  */
 'use strict';
 
-var Platform = require('Platform');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var Platform = require('Platform');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
+var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -23,6 +24,7 @@ type DefaultProps = {
  */
 var Switch = React.createClass({
   propTypes: {
+    ...View.propTypes,
     /**
      * The value of the switch.  If true the switch will be turned on.
      * Default value is false.
@@ -115,7 +117,7 @@ var styles = StyleSheet.create({
 });
 
 if (Platform.OS === 'android') {
-  var RCTSwitch = requireNativeComponent('AndroidSwitch', null, {
+  var RCTSwitch = requireNativeComponent('AndroidSwitch', Switch, {
     nativeOnly: { onChange: true, on: true, enabled: true }
   });
 } else {

Libraries/Components/SwitchAndroid/SwitchAndroid.android.js

@@ -13,6 +13,7 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
+var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -25,6 +26,7 @@ var SwitchAndroid = React.createClass({
   mixins: [NativeMethodsMixin],
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Boolean value of the switch.
      */
@@ -79,6 +81,11 @@ var SwitchAndroid = React.createClass({
   }
 });
 
-var RKSwitch = requireNativeComponent('AndroidSwitch', null);
+var RKSwitch = requireNativeComponent('AndroidSwitch', SwitchAndroid, {
+  nativeOnly: {
+    on: true,
+    enabled: true,
+  }
+});
 
 module.exports = SwitchAndroid;

Libraries/Components/TextInput/TextInput.js

@@ -14,9 +14,9 @@
 var DocumentSelectionState = require('DocumentSelectionState');
 var EventEmitter = require('EventEmitter');
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var RCTUIManager = require('NativeModules').UIManager;
 var Platform = require('Platform');
 var PropTypes = require('ReactPropTypes');
+var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
 var ReactChildren = require('ReactChildren');
 var StyleSheet = require('StyleSheet');
@@ -24,6 +24,7 @@ var Text = require('Text');
 var TextInputState = require('TextInputState');
 var TimerMixin = require('react-timer-mixin');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var View = require('View');
 
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var emptyFunction = require('emptyFunction');
@@ -91,6 +92,7 @@ var TextInput = React.createClass({
   },
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Can tell TextInput to automatically capitalize certain characters.
      *

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -17,6 +17,7 @@ var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ReactPropTypes = require('ReactPropTypes');
+var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
@@ -67,6 +68,7 @@ var ToolbarAndroid = React.createClass({
   mixins: [NativeMethodsMixin],
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
      * or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
@@ -143,7 +145,7 @@ var ToolbarAndroid = React.createClass({
       nativeProps.overflowIcon = resolveAssetSource(this.props.overflowIcon);
     }
     if (this.props.actions) {
-      nativeProps.actions = [];
+      var nativeActions = [];
       for (var i = 0; i < this.props.actions.length; i++) {
         var action = {
           ...this.props.actions[i],
@@ -154,8 +156,9 @@ var ToolbarAndroid = React.createClass({
         if (action.show) {
           action.show = RCTUIManager.ToolbarAndroid.Constants.ShowAsAction[action.show];
         }
-        nativeProps.actions.push(action);
+        nativeActions.push(action);
       }
+      nativeProps.nativeActions = nativeActions;
     }
 
     return <NativeToolbar onSelect={this._onSelect} {...nativeProps} />;
@@ -183,6 +186,10 @@ var toolbarAttributes = {
   titleColor: true,
 };
 
-var NativeToolbar = requireNativeComponent('ToolbarAndroid', null);
+var NativeToolbar = requireNativeComponent('ToolbarAndroid', ToolbarAndroid, {
+  nativeOnly: {
+    nativeActions: true,
+  }
+});
 
 module.exports = ToolbarAndroid;

ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java

@@ -94,7 +94,7 @@ public class ReactToolbarManager extends ViewGroupManager<ReactToolbar> {
     }
   }
 
-  @ReactProp(name = "actions")
+  @ReactProp(name = "nativeActions")
   public void setActions(ReactToolbar view, @Nullable ReadableArray actions) {
     view.setActions(actions);
   }