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,7 +16,6 @@ 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');
@@ -24,6 +23,7 @@ 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,6 +14,7 @@ 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');
@@ -21,7 +22,6 @@ 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 = UIManager.customBubblingEventTypes;
-
+var customDirectEventTypes = UIManager.customDirectEventTypes;
-var customBubblingEventTypes = RCTUIManager.customBubblingEventTypes;
-var customDirectEventTypes = RCTUIManager.customDirectEventTypes;
 
 var allTypesByEventName = {};
 

Libraries/ReactIOS/NativeMethodsMixin.js

@@ -11,10 +11,9 @@
  */
 'use strict';
 
-var NativeModules = require('NativeModules');
-var RCTUIManager = NativeModules.UIManager;
 var ReactNativeAttributePayload = require('ReactNativeAttributePayload');
 var TextInputState = require('TextInputState');
+var UIManager = require('UIManager');
 
 var findNodeHandle = require('findNodeHandle');
 var invariant = require('invariant');
@@ -78,7 +77,7 @@ var NativeMethodsMixin = {
    * prop](/react-native/docs/view.html#onlayout) instead.
    */
   measure: function(callback: MeasureOnSuccessCallback) {
-    RCTUIManager.measure(
+    UIManager.measure(
       findNodeHandle(this),
       mountSafeCallback(this, callback)
     );
@@ -97,7 +96,7 @@ var NativeMethodsMixin = {
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail: () => void /* currently unused */
   ) {
-    RCTUIManager.measureLayout(
+    UIManager.measureLayout(
       findNodeHandle(this),
       relativeToNativeNode,
       mountSafeCallback(this, onFail),
@@ -121,7 +120,7 @@ var NativeMethodsMixin = {
       this.viewConfig.validAttributes
     );
 
-    RCTUIManager.updateView(
+    UIManager.updateView(
       findNodeHandle(this),
       this.viewConfig.uiViewClassName,
       updatePayload

Libraries/ReactIOS/requireNativeComponent.js

@@ -11,8 +11,8 @@
  */
 'use strict';
 
-var RCTUIManager = require('NativeModules').UIManager;
 var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+var UIManager = require('UIManager');
 var UnimplementedView = require('UnimplementedView');
 
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
@@ -27,7 +27,7 @@ var warning = require('warning');
 /**
  * Used to create React components that directly wrap native component
  * implementations.  Config information is extracted from data exported from the
- * RCTUIManager module.  You should also wrap the native component in a
+ * UIManager module.  You should also wrap the native component in a
  * hand-written component with full propTypes definitions and other
  * documentation - pass the hand-written component in as `componentInterface` to
  * verify all the native props are documented via `propTypes`.
@@ -46,13 +46,13 @@ function requireNativeComponent(
   componentInterface?: ?ComponentInterface,
   extraConfig?: ?{nativeOnly?: Object},
 ): Function {
-  var viewConfig = RCTUIManager[viewName];
+  var viewConfig = UIManager[viewName];
   if (!viewConfig || !viewConfig.NativeProps) {
     warning(false, 'Native component for "%s" does not exist', viewName);
     return UnimplementedView;
   }
   var nativeProps = {
-    ...RCTUIManager.RCTView.NativeProps,
+    ...UIManager.RCTView.NativeProps,
     ...viewConfig.NativeProps,
   };
   viewConfig.uiViewClassName = viewName;

Libraries/ReactNative/ReactNativeBaseComponent.js

@@ -17,7 +17,7 @@ var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
 var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
 var ReactMultiChild = require('ReactMultiChild');
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 var deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');
 var warning = require('warning');
@@ -123,7 +123,7 @@ ReactNativeBaseComponent.Mixin = {
         );
         createdTags[i] = mountImage.tag;
       }
-      RCTUIManager
+      UIManager
         .manageChildren(containerTag, null, null, createdTags, indexes, null);
     }
   },
@@ -151,7 +151,7 @@ ReactNativeBaseComponent.Mixin = {
     );
 
     if (updatePayload) {
-      RCTUIManager.updateView(
+      UIManager.updateView(
         ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(this._rootNodeID),
         this.viewConfig.uiViewClassName,
         updatePayload
@@ -216,7 +216,7 @@ ReactNativeBaseComponent.Mixin = {
     );
 
     var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootID);
-    RCTUIManager.createView(
+    UIManager.createView(
       tag,
       this.viewConfig.uiViewClassName,
       nativeTopRootID ? ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID] : null,

Libraries/ReactNative/ReactNativeDOMIDOperations.js

@@ -13,8 +13,8 @@
 
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
 var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes');
-var RCTUIManager = require('NativeModules').UIManager;
 var ReactPerf = require('ReactPerf');
+var UIManager = require('UIManager');
 
 /**
  * Updates a component's children by processing a series of updates.
@@ -59,7 +59,7 @@ var dangerouslyProcessChildrenUpdates = function(childrenUpdates, markupList) {
   for (var updateParentTagString in byContainerTag) {
     var updateParentTagNumber = +updateParentTagString;
     var childUpdatesToSend = byContainerTag[updateParentTagNumber];
-    RCTUIManager.manageChildren(
+    UIManager.manageChildren(
       updateParentTagNumber,
       childUpdatesToSend.moveFromIndices,
       childUpdatesToSend.moveToIndices,
@@ -93,7 +93,7 @@ var ReactNativeDOMIDOperations = {
     'dangerouslyReplaceNodeWithMarkupByID',
     function(id, mountImage) {
       var oldTag = ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(id);
-      RCTUIManager.replaceExistingNonRootView(oldTag, mountImage.tag);
+      UIManager.replaceExistingNonRootView(oldTag, mountImage.tag);
       ReactNativeTagHandles.associateRootNodeIDWithMountedNodeHandle(id, mountImage.tag);
     }
   ),

Libraries/ReactNative/ReactNativeGlobalResponderHandler.js

@@ -11,18 +11,18 @@
  */
 'use strict';
 
-var RCTUIManager = require('NativeModules').UIManager;
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
+var UIManager = require('UIManager');
 
 var ReactNativeGlobalResponderHandler = {
   onChange: function(from: string, to: string, blockNativeResponder: boolean) {
     if (to !== null) {
-      RCTUIManager.setJSResponder(
+      UIManager.setJSResponder(
         ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(to),
         blockNativeResponder
       );
     } else {
-      RCTUIManager.clearJSResponder();
+      UIManager.clearJSResponder();
     }
   }
 };

Libraries/ReactNative/ReactNativeMount.js

@@ -11,14 +11,13 @@
  */
 'use strict';
 
-var RCTUIManager = require('NativeModules').UIManager;
-
 var ReactElement = require('ReactElement');
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
 var ReactPerf = require('ReactPerf');
 var ReactReconciler = require('ReactReconciler');
 var ReactUpdateQueue = require('ReactUpdateQueue');
 var ReactUpdates = require('ReactUpdates');
+var UIManager = require('UIManager');
 
 var emptyObject = require('emptyObject');
 var instantiateReactComponent = require('instantiateReactComponent');
@@ -191,7 +190,7 @@ var ReactNativeMount = {
       );
       var addChildTags = [mountImage.tag];
       var addAtIndices = [0];
-      RCTUIManager.manageChildren(
+      UIManager.manageChildren(
         ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(containerID),
         null,         // moveFromIndices
         null,         // moveToIndices
@@ -215,7 +214,7 @@ var ReactNativeMount = {
   ) {
     ReactNativeMount.unmountComponentAtNode(containerTag);
     // call back into native to remove all of the subviews from this container
-    RCTUIManager.removeRootView(containerTag);
+    UIManager.removeRootView(containerTag);
   },
 
   /**
@@ -256,7 +255,7 @@ var ReactNativeMount = {
     ReactReconciler.unmountComponent(instance);
     var containerTag =
       ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(containerID);
-    RCTUIManager.removeSubviewsFromContainerWithID(containerTag);
+    UIManager.removeSubviewsFromContainerWithID(containerTag);
   },
 
   getNode: function(rootNodeID: string): number {

Libraries/ReactNative/ReactNativeTextComponent.js

@@ -12,7 +12,7 @@
 'use strict';
 
 var ReactNativeTagHandles = require('ReactNativeTagHandles');
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 var assign = require('Object.assign');
 var invariant = require('invariant');
@@ -39,7 +39,7 @@ assign(ReactNativeTextComponent.prototype, {
     this._rootNodeID = rootID;
     var tag = ReactNativeTagHandles.allocateTag();
     var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootID);
-    RCTUIManager.createView(
+    UIManager.createView(
       tag,
       'RCTRawText',
       nativeTopRootID ? ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID] : null,
@@ -57,7 +57,7 @@ assign(ReactNativeTextComponent.prototype, {
       var nextStringText = '' + nextText;
       if (nextStringText !== this._stringText) {
         this._stringText = nextStringText;
-        RCTUIManager.updateView(
+        UIManager.updateView(
           ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(
             this._rootNodeID
           ),

Libraries/ReactNative/UIManagerStatTracker.js

@@ -11,7 +11,7 @@
  */
 'use strict';
 
-var RCTUIManager = require('NativeModules').UIManager;
+var UIManager = require('UIManager');
 
 var installed = false;
 var UIManagerStatTracker = {
@@ -32,20 +32,20 @@ var UIManagerStatTracker = {
         statLogHandle = setImmediate(printStats);
       }
     }
-    var createViewOrig = RCTUIManager.createView;
+    var createViewOrig = UIManager.createView;
-    RCTUIManager.createView = function(tag, className, rootTag, props) {
+    UIManager.createView = function(tag, className, rootTag, props) {
       incStat('createView', 1);
       incStat('setProp', Object.keys(props || []).length);
       createViewOrig(tag, className, rootTag, props);
     };
-    var updateViewOrig = RCTUIManager.updateView;
+    var updateViewOrig = UIManager.updateView;
-    RCTUIManager.updateView = function(tag, className, props) {
+    UIManager.updateView = function(tag, className, props) {
       incStat('updateView', 1);
       incStat('setProp', Object.keys(props || []).length);
       updateViewOrig(tag, className, props);
     };
-    var manageChildrenOrig = RCTUIManager.manageChildren;
+    var manageChildrenOrig = UIManager.manageChildren;
-    RCTUIManager.manageChildren = function(tag, moveFrom, moveTo, addTags, addIndices, remove) {
+    UIManager.manageChildren = function(tag, moveFrom, moveTo, addTags, addIndices, remove) {
       incStat('manageChildren', 1);
       incStat('move', Object.keys(moveFrom || []).length);
       incStat('remove', Object.keys(remove || []).length);

Libraries/Utilities/Dimensions.js

@@ -11,11 +11,11 @@
  */
 'use strict';
 
-var NativeModules = require('NativeModules');
+var UIManager = require('UIManager');
 
 var invariant = require('invariant');
 
-var dimensions = NativeModules.UIManager.Dimensions;
+var dimensions = UIManager.Dimensions;
 
 // We calculate the window dimensions in JS so that we don't encounter loss of
 // precision in transferring the dimensions (which could be non-integers) over

Libraries/Utilities/UIManager.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule UIManager
+ * @flow
+ */
+'use strict';
+
+var UIManager = require('NativeModules').UIManager;
+
+module.exports = UIManager;

Libraries/react-native/react-native.js

@@ -78,6 +78,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
   Settings: require('Settings'),
   StatusBarIOS: require('StatusBarIOS'),
   StyleSheet: require('StyleSheet'),
+  UIManager: require('UIManager'),
   VibrationIOS: require('VibrationIOS'),
 
   // Plugins