Wrapped UIManager native module for better abstraction

Summary: public

RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.

Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.

This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.

Reviewed By: tadeuzagallo

Differential Revision: D2700348

fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f

Examples/UIExplorer/ImageEditingExample.js

@@ -25,10 +25,11 @@ var {
   StyleSheet,
   Text,
   TouchableHighlight,
+  UIManager,
   View,
 } = React;
 var ImageEditingManager = NativeModules.ImageEditingManager;
-var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;
+var RCTScrollViewConsts = UIManager.RCTScrollView.Constants;
 
 var PAGE_SIZE = 20;
 

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -10,15 +10,16 @@
  */
 'use strict';
 
-var DrawerConsts = require('NativeModules').UIManager.AndroidDrawerLayout.Constants;
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactPropTypes = require('ReactPropTypes');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
-var RCTUIManager = require('NativeModules').UIManager;
 var StyleSheet = require('StyleSheet');
+var UIManager = require('UIManager');
 var View = require('View');
 
+var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
+
 var dismissKeyboard = require('dismissKeyboard');
 var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
@@ -182,17 +183,17 @@ var DrawerLayoutAndroid = React.createClass({
   },
 
   openDrawer: function() {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       this._getDrawerLayoutHandle(),
-      RCTUIManager.AndroidDrawerLayout.Commands.openDrawer,
+      UIManager.AndroidDrawerLayout.Commands.openDrawer,
       null
     );
   },
 
   closeDrawer: function() {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       this._getDrawerLayoutHandle(),
-      RCTUIManager.AndroidDrawerLayout.Commands.closeDrawer,
+      UIManager.AndroidDrawerLayout.Commands.closeDrawer,
       null
     );
   },

Libraries/Components/TextInput/TextInput.js

@@ -16,14 +16,14 @@ var EventEmitter = require('EventEmitter');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 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');
 var Text = require('Text');
 var TextInputState = require('TextInputState');
 var TimerMixin = require('react-timer-mixin');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var UIManager = require('UIManager');
 var View = require('View');
 
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
@@ -496,11 +496,11 @@ var TextInput = React.createClass({
   },
 
   _renderAndroid: function() {
-    var autoCapitalize = RCTUIManager.UIText.AutocapitalizationType[this.props.autoCapitalize];
+    var autoCapitalize = UIManager.UIText.AutocapitalizationType[this.props.autoCapitalize];
     var textAlign =
-      RCTUIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign];
+      UIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign];
     var textAlignVertical =
-      RCTUIManager.AndroidTextInput.Constants.TextAlignVertical[this.props.textAlignVertical];
+      UIManager.AndroidTextInput.Constants.TextAlignVertical[this.props.textAlignVertical];
     var children = this.props.children;
     var childCount = 0;
     ReactChildren.forEach(children, () => ++childCount);

Libraries/Components/TextInput/TextInputState.js

@@ -16,7 +16,7 @@
 'use strict';
 
 var Platform = require('Platform');
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 var TextInputState = {
    /**
@@ -41,11 +41,11 @@ var TextInputState = {
     if (this._currentlyFocusedID !== textFieldID && textFieldID !== null) {
       this._currentlyFocusedID = textFieldID;
       if (Platform.OS === 'ios') {
-        RCTUIManager.focus(textFieldID);
+        UIManager.focus(textFieldID);
       } else if (Platform.OS === 'android') {
-        RCTUIManager.dispatchViewManagerCommand(
+        UIManager.dispatchViewManagerCommand(
           textFieldID,
-          RCTUIManager.AndroidTextInput.Commands.focusTextInput,
+          UIManager.AndroidTextInput.Commands.focusTextInput,
           null
         );
       }
@@ -61,11 +61,11 @@ var TextInputState = {
     if (this._currentlyFocusedID === textFieldID && textFieldID !== null) {
       this._currentlyFocusedID = null;
       if (Platform.OS === 'ios') {
-        RCTUIManager.blur(textFieldID);
+        UIManager.blur(textFieldID);
       } else if (Platform.OS === 'android') {
-        RCTUIManager.dispatchViewManagerCommand(
+        UIManager.dispatchViewManagerCommand(
           textFieldID,
-          RCTUIManager.AndroidTextInput.Commands.blurTextInput,
+          UIManager.AndroidTextInput.Commands.blurTextInput,
           null
         );
       }

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -13,10 +13,10 @@
 
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ReactPropTypes = require('ReactPropTypes');
+var UIManager = require('UIManager');
 var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
@@ -154,7 +154,7 @@ var ToolbarAndroid = React.createClass({
           action.icon = resolveAssetSource(action.icon);
         }
         if (action.show) {
-          action.show = RCTUIManager.ToolbarAndroid.Constants.ShowAsAction[action.show];
+          action.show = UIManager.ToolbarAndroid.Constants.ShowAsAction[action.show];
         }
         nativeActions.push(action);
       }

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -11,11 +11,11 @@
 'use strict';
 
 var PropTypes = require('ReactPropTypes');
-var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var UIManager = require('UIManager');
 
 var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
@@ -181,17 +181,17 @@ var TouchableNativeFeedback = React.createClass({
   },
 
   _dispatchHotspotUpdate: function(destX, destY) {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       React.findNodeHandle(this),
-      RCTUIManager.RCTView.Commands.hotspotUpdate,
+      UIManager.RCTView.Commands.hotspotUpdate,
       [destX || 0, destY || 0]
     );
   },
 
   _dispatchPressedStateChange: function(pressed) {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       React.findNodeHandle(this),
-      RCTUIManager.RCTView.Commands.setPressed,
+      UIManager.RCTView.Commands.setPressed,
       [pressed]
     );
   },

Libraries/Components/View/View.js

@@ -13,11 +13,11 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
-var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
 var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheetPropType = require('StyleSheetPropType');
+var UIManager = require('UIManager');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
@@ -327,7 +327,7 @@ var RCTView = requireNativeComponent('RCTView', View, {
 });
 
 if (__DEV__) {
-  var viewConfig = RCTUIManager.viewConfigs && RCTUIManager.viewConfigs.RCTView || {};
+  var viewConfig = UIManager.viewConfigs && UIManager.viewConfigs.RCTView || {};
   for (var prop in viewConfig.nativeProps) {
     var viewAny: any = View; // Appease flow
     if (!viewAny.propTypes[prop] && !ReactNativeStyleAttributes[prop]) {

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -7,15 +7,13 @@
 'use strict';
 
 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 UIManager = require('UIManager');
 var View = require('View');
 
-var RCTUIManager = NativeModules.UIManager;
-
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -157,9 +155,9 @@ var ViewPagerAndroid = React.createClass({
    * The transition between pages will be animated.
    */
   setPage: function(selectedPage: number) {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       React.findNodeHandle(this),
-      RCTUIManager.AndroidViewPager.Commands.setPage,
+      UIManager.AndroidViewPager.Commands.setPage,
       [selectedPage],
     );
   },
@@ -169,9 +167,9 @@ var ViewPagerAndroid = React.createClass({
    * The transition between pages will be *not* be animated.
    */
   setPageWithoutAnimation: function(selectedPage: number) {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       React.findNodeHandle(this),
-      RCTUIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
+      UIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
       [selectedPage],
     );
   },

Libraries/Components/WebView/WebView.android.js

@@ -14,14 +14,14 @@ var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheet = require('StyleSheet');
+var UIManager = require('UIManager');
 var View = require('View');
 
 var keyMirror = require('keyMirror');
 var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 
 var PropTypes = React.PropTypes;
-var RCTUIManager = require('NativeModules').UIManager;
 
 var RCT_WEBVIEW_REF = 'webview';
 
@@ -129,25 +129,25 @@ var WebView = React.createClass({
   },
 
   goForward: function() {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       this.getWebWiewHandle(),
-      RCTUIManager.RCTWebView.Commands.goForward,
+      UIManager.RCTWebView.Commands.goForward,
       null
     );
   },
 
   goBack: function() {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       this.getWebWiewHandle(),
-      RCTUIManager.RCTWebView.Commands.goBack,
+      UIManager.RCTWebView.Commands.goBack,
       null
     );
   },
 
   reload: function() {
-    RCTUIManager.dispatchViewManagerCommand(
+    UIManager.dispatchViewManagerCommand(
       this.getWebWiewHandle(),
-      RCTUIManager.RCTWebView.Commands.reload,
+      UIManager.RCTWebView.Commands.reload,
       null
     );
   },

Libraries/CustomComponents/ListView/ListView.js

@@ -28,7 +28,6 @@
 
 var ListViewDataSource = require('ListViewDataSource');
 var React = require('React');
-var RCTUIManager = require('NativeModules').UIManager;
 var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
 var ScrollView = require('ScrollView');
 var ScrollResponder = require('ScrollResponder');

Libraries/LayoutAnimation/LayoutAnimation.js

@@ -12,7 +12,7 @@
 'use strict';
 
 var PropTypes = require('ReactPropTypes');
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
 var keyMirror = require('keyMirror');
@@ -71,7 +71,7 @@ type Config = {
 
 function configureNext(config: Config, onAnimationDidEnd?: Function) {
   configChecker({config}, 'config', 'LayoutAnimation.configureNext');
-  RCTUIManager.configureNextLayoutAnimation(
+  UIManager.configureNextLayoutAnimation(
     config, onAnimationDidEnd || function() {}, function() { /* unused */ }
   );
 }

Libraries/Portal/Portal.js

@@ -8,8 +8,8 @@
 
 var Platform = require('Platform');
 var React = require('React');
-var RCTUIManager = require('NativeModules').UIManager;
 var StyleSheet = require('StyleSheet');
+var UIManager = require('UIManager');
 var View = require('View');
 
 var _portalRef: any;
@@ -135,9 +135,9 @@ var Portal = React.createClass({
       // TextViews have no text set at the moment of populating event.
       setTimeout(() => {
         if (this._getOpenModals().length > 0) {
-          RCTUIManager.sendAccessibilityEvent(
+          UIManager.sendAccessibilityEvent(
             React.findNodeHandle(this),
-            RCTUIManager.AccessibilityEventTypes.typeWindowStateChanged);
+            UIManager.AccessibilityEventTypes.typeWindowStateChanged);
         }
       }, 0);
     }

Libraries/RKBackendNode/queryLayoutByID.js

@@ -12,7 +12,7 @@
 'use strict';
 
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 type OnSuccessCallback = (
   left: number,
@@ -51,7 +51,7 @@ var queryLayoutByID = function(
   onSuccess: OnSuccessCallback
 ): void {
   // Native bridge doesn't *yet* surface errors.
-  RCTUIManager.measure(
+  UIManager.measure(
     ReactNativeTagHandles.rootNodeIDToTag[rootNodeID],
     onSuccess
   );

Libraries/ReactIOS/IOSNativeBridgeEventPlugin.js

@@ -12,16 +12,14 @@
 'use strict';
 
 var EventPropagators = require('EventPropagators');
-var NativeModules = require('NativeModules');
 var SyntheticEvent = require('SyntheticEvent');
+var UIManager = require('UIManager');
 
 var merge = require('merge');
 var warning = require('warning');
 
-var RCTUIManager = NativeModules.UIManager;
-
-var customBubblingEventTypes = RCTUIManager.customBubblingEventTypes;
-var customDirectEventTypes = RCTUIManager.customDirectEventTypes;
+var customBubblingEventTypes = UIManager.customBubblingEventTypes;
+var customDirectEventTypes = UIManager.customDirectEventTypes;
 
 var allTypesByEventName = {};