Use requireNativeComponent everywhere.

Reviewed By: sahrens

Differential Revision: D2663780

fb-gh-sync-id: 94a7e2265f6f869a2bdf1576dd8ea76b4c5f0b34

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -19,9 +19,9 @@ var RCTUIManager = require('NativeModules').UIManager;
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var dismissKeyboard = require('dismissKeyboard');
 var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var RK_DRAWER_REF = 'drawerlayout';
 var INNERVIEW_REF = 'innerView';
@@ -74,6 +74,7 @@ var DrawerLayoutAndroid = React.createClass({
   },
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Determines whether the keyboard gets dismissed in response to a drag.
      *   - 'none' (the default), drags do not dismiss the keyboard.
@@ -220,9 +221,6 @@ var styles = StyleSheet.create({
 });
 
 // The View that contains both the actual drawer and the main view
-var AndroidDrawerLayout = createReactNativeComponentClass({
+var AndroidDrawerLayout = requireNativeComponent('AndroidDrawerLayout', DrawerLayoutAndroid);
-  validAttributes: merge(ReactNativeViewAttributes.UIView, DrawerLayoutValidAttributes),
-  uiViewClassName: 'AndroidDrawerLayout',
-});
 
 module.exports = DrawerLayoutAndroid;

Libraries/Components/MapView/MapView.js

@@ -18,7 +18,6 @@ var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var View = require('View');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var deepDiffer = require('deepDiffer');
 var insetsDiffer = require('insetsDiffer');
 var merge = require('merge');
@@ -221,6 +220,11 @@ var MapView = React.createClass({
      * Callback that is called once, when the user taps an annotation.
      */
     onAnnotationPress: React.PropTypes.func,
+
+    /**
+     * @platform android
+     */
+    active: React.PropTypes.bool,
   },
 
   _onChange: function(event: Event) {
@@ -264,29 +268,8 @@ var MapView = React.createClass({
   },
 });
 
-if (Platform.OS === 'android') {
+var RCTMap = requireNativeComponent('RCTMap', MapView, {
-  var RCTMap = createReactNativeComponentClass({
+  nativeOnly: {onChange: true, onPress: true}
-    validAttributes: merge(
+});
-      ReactNativeViewAttributes.UIView, {
-        active: true,
-        showsUserLocation: true,
-        zoomEnabled: true,
-        rotateEnabled: true,
-        pitchEnabled: true,
-        scrollEnabled: true,
-        region: {diff: deepDiffer},
-        annotations: {diff: deepDiffer},
-        maxDelta: true,
-        minDelta: true,
-        legalLabelInsets: {diff: insetsDiffer},
-      }
-    ),
-    uiViewClassName: 'RCTMap',
-  });
-} else {
-  var RCTMap = requireNativeComponent('RCTMap', MapView, {
-    nativeOnly: {onChange: true, onPress: true}
-  });
-}
 
 module.exports = MapView;

Libraries/Components/ScrollView/ScrollView.js

@@ -24,7 +24,6 @@ var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var deepDiffer = require('deepDiffer');
 var dismissKeyboard = require('dismissKeyboard');
 var flattenStyle = require('flattenStyle');
@@ -55,6 +54,7 @@ var INNERVIEW = 'InnerScrollView';
  */
 var ScrollView = React.createClass({
   propTypes: {
+    ...View.propTypes,
     /**
      * Controls whether iOS should automatically adjust the content inset
      * for scroll views that are placed behind a navigation bar or
@@ -459,14 +459,11 @@ var validAttributes = {
 };
 
 if (Platform.OS === 'android') {
-  var AndroidScrollView = createReactNativeComponentClass({
+  var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView);
-    validAttributes: validAttributes,
+  var AndroidHorizontalScrollView = requireNativeComponent(
-    uiViewClassName: 'RCTScrollView',
+    'AndroidHorizontalScrollView',
-  });
+    ScrollView
-  var AndroidHorizontalScrollView = createReactNativeComponentClass({
+  );
-    validAttributes: validAttributes,
-    uiViewClassName: 'AndroidHorizontalScrollView',
-  });
 } else if (Platform.OS === 'ios') {
   var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);
 }

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -17,11 +17,11 @@ var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var onlyChild = require('onlyChild');
 var processColor = require('processColor');
+var requireNativeComponent = require('requireNativeComponent');
 
 var rippleBackgroundPropType = createStrictShapeTypeChecker({
   type: React.PropTypes.oneOf(['RippleAndroid']),
@@ -39,12 +39,10 @@ var backgroundPropType = PropTypes.oneOfType([
   themeAttributeBackgroundPropType,
 ]);
 
-var TouchableView = createReactNativeComponentClass({
+var TouchableView = requireNativeComponent('RCTView', null, {
-  validAttributes: {
+  nativeOnly: {
-    ...ReactNativeViewAttributes.UIView,
     nativeBackgroundAndroid: backgroundPropType,
-  },
+  }
-  uiViewClassName: 'RCTView',
 });
 
 var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -6,17 +6,18 @@
  */
 'use strict';
 
-var NativeModules = require('NativeModules');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var NativeModules = require('NativeModules');
 var React = require('React');
 var ReactElement = require('ReactElement');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ReactPropTypes = require('ReactPropTypes');
+var View = require('View');
 
 var RCTUIManager = NativeModules.UIManager;
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var dismissKeyboard = require('dismissKeyboard');
+var requireNativeComponent = require('requireNativeComponent');
 
 var VIEWPAGER_REF = 'viewPager';
 
@@ -61,6 +62,7 @@ var VIEWPAGER_REF = 'viewPager';
 var ViewPagerAndroid = React.createClass({
 
   propTypes: {
+    ...View.propTypes,
     /**
      * Index of initial page that should be selected. Use `setPage` method to
      * update the page, and `onPageSelected` to monitor page changes
@@ -187,9 +189,6 @@ var ViewPagerAndroid = React.createClass({
   },
 });
 
-var NativeAndroidViewPager = createReactNativeComponentClass({
+var NativeAndroidViewPager = requireNativeComponent('AndroidViewPager', ViewPagerAndroid);
-  validAttributes: ReactNativeViewAttributes.UIView,
-  uiViewClassName: 'AndroidViewPager',
-});
 
 module.exports = ViewPagerAndroid;

Libraries/Components/WebView/WebView.android.js

@@ -16,9 +16,9 @@ var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var keyMirror = require('keyMirror');
 var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var PropTypes = React.PropTypes;
 var RCTUIManager = require('NativeModules').UIManager;
@@ -38,6 +38,7 @@ var WebViewState = keyMirror({
 var WebView = React.createClass({
 
   propTypes: {
+    ...View.propTypes,
     renderError: PropTypes.func, // view to show if there's an error
     renderLoading: PropTypes.func, // loading indicator to show
     url: PropTypes.string,
@@ -187,16 +188,7 @@ var WebView = React.createClass({
   },
 });
 
-var RCTWebView = createReactNativeComponentClass({
+var RCTWebView = requireNativeComponent('RCTWebView', WebView);
-  validAttributes: merge(ReactNativeViewAttributes.UIView, {
-    html: true,
-    injectedJavaScript: true,
-    javaScriptEnabledAndroid: true,
-    url: true,
-    userAgent: true,
-  }),
-  uiViewClassName: 'RCTWebView',
-});
 
 var styles = StyleSheet.create({
   container: {

Libraries/Image/Image.android.js

@@ -22,10 +22,10 @@ var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
 
-var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var flattenStyle = require('flattenStyle');
 var invariant = require('invariant');
 var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
 /**
@@ -60,6 +60,7 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, {
 
 var Image = React.createClass({
   propTypes: {
+    ...View.propTypes,
     /**
      * `uri` is a string representing the resource identifier for the image, which
      * could be an http address, a local file path, or the name of a static image
@@ -179,13 +180,15 @@ var styles = StyleSheet.create({
   }
 });
 
-var RKImage = createReactNativeComponentClass({
+var cfg = {
-  validAttributes: ImageViewAttributes,
+  nativeOnly: {
-  uiViewClassName: 'RCTImageView',
+    src: true,
-});
+    defaultImageSrc: true,
-var RCTTextInlineImage = createReactNativeComponentClass({
+    imageTag: true,
-  validAttributes: ImageViewAttributes,
+    progressHandlerRegistered: true,
-  uiViewClassName: 'RCTTextInlineImage',
+  },
-});
+};
+var RKImage = requireNativeComponent('RCTImageView', Image, cfg);
+var RCTTextInlineImage = requireNativeComponent('RCTTextInlineImage', Image, cfg);
 
 module.exports = Image;