From 60db876f666e256eba8527251ce7035cfbca6014 Mon Sep 17 00:00:00 2001 From: Nick Lockwood Date: Fri, 27 Nov 2015 05:39:00 -0800 Subject: [PATCH] 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 | 3 ++- .../DrawerAndroid/DrawerLayoutAndroid.android.js | 13 +++++++------ Libraries/Components/TextInput/TextInput.js | 8 ++++---- Libraries/Components/TextInput/TextInputState.js | 14 +++++++------- .../ToolbarAndroid/ToolbarAndroid.android.js | 4 ++-- .../Touchable/TouchableNativeFeedback.android.js | 10 +++++----- Libraries/Components/View/View.js | 4 ++-- .../ViewPager/ViewPagerAndroid.android.js | 12 +++++------- Libraries/Components/WebView/WebView.android.js | 14 +++++++------- Libraries/CustomComponents/ListView/ListView.js | 1 - Libraries/LayoutAnimation/LayoutAnimation.js | 4 ++-- Libraries/Portal/Portal.js | 6 +++--- Libraries/RKBackendNode/queryLayoutByID.js | 4 ++-- Libraries/ReactIOS/IOSNativeBridgeEventPlugin.js | 8 +++----- Libraries/ReactIOS/NativeMethodsMixin.js | 9 ++++----- Libraries/ReactIOS/requireNativeComponent.js | 8 ++++---- .../ReactNative/ReactNativeBaseComponent.js | 8 ++++---- .../ReactNative/ReactNativeDOMIDOperations.js | 6 +++--- .../ReactNativeGlobalResponderHandler.js | 6 +++--- Libraries/ReactNative/ReactNativeMount.js | 9 ++++----- .../ReactNative/ReactNativeTextComponent.js | 6 +++--- Libraries/ReactNative/UIManagerStatTracker.js | 14 +++++++------- Libraries/Utilities/Dimensions.js | 4 ++-- Libraries/Utilities/UIManager.js | 16 ++++++++++++++++ Libraries/react-native/react-native.js | 1 + 25 files changed, 102 insertions(+), 90 deletions(-) create mode 100644 Libraries/Utilities/UIManager.js diff --git a/Examples/UIExplorer/ImageEditingExample.js b/Examples/UIExplorer/ImageEditingExample.js index affd36796..56ab1c4ba 100644 --- a/Examples/UIExplorer/ImageEditingExample.js +++ b/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; diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 407f237e5..4b209bd41 100644 --- a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/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 ); }, diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index c9728d96a..e7416e833 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/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); diff --git a/Libraries/Components/TextInput/TextInputState.js b/Libraries/Components/TextInput/TextInputState.js index f3e35b78c..276bba0d7 100644 --- a/Libraries/Components/TextInput/TextInputState.js +++ b/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 ); } diff --git a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js index 774e602be..eb904d867 100644 --- a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js +++ b/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); } diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index dd479bdfe..bc875eda5 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/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] ); }, diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 84ab49187..beaffb75c 100644 --- a/Libraries/Components/View/View.js +++ b/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]) { diff --git a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js index 7151917ff..ec08841ec 100644 --- a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js +++ b/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], ); }, diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index f3ce5956d..d5569dcad 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/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 ); }, diff --git a/Libraries/CustomComponents/ListView/ListView.js b/Libraries/CustomComponents/ListView/ListView.js index fb99f1687..5706ff0f9 100644 --- a/Libraries/CustomComponents/ListView/ListView.js +++ b/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'); diff --git a/Libraries/LayoutAnimation/LayoutAnimation.js b/Libraries/LayoutAnimation/LayoutAnimation.js index 881b499f2..140c35ff8 100644 --- a/Libraries/LayoutAnimation/LayoutAnimation.js +++ b/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 */ } ); } diff --git a/Libraries/Portal/Portal.js b/Libraries/Portal/Portal.js index ac80e0410..f6ed4c8f7 100644 --- a/Libraries/Portal/Portal.js +++ b/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); } diff --git a/Libraries/RKBackendNode/queryLayoutByID.js b/Libraries/RKBackendNode/queryLayoutByID.js index d6492e6da..5d038c232 100644 --- a/Libraries/RKBackendNode/queryLayoutByID.js +++ b/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 ); diff --git a/Libraries/ReactIOS/IOSNativeBridgeEventPlugin.js b/Libraries/ReactIOS/IOSNativeBridgeEventPlugin.js index 55b22a959..6c1d887e5 100644 --- a/Libraries/ReactIOS/IOSNativeBridgeEventPlugin.js +++ b/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 = {}; diff --git a/Libraries/ReactIOS/NativeMethodsMixin.js b/Libraries/ReactIOS/NativeMethodsMixin.js index b2b5ba419..33b99994a 100644 --- a/Libraries/ReactIOS/NativeMethodsMixin.js +++ b/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 diff --git a/Libraries/ReactIOS/requireNativeComponent.js b/Libraries/ReactIOS/requireNativeComponent.js index 11defc0ad..a046fcbd1 100644 --- a/Libraries/ReactIOS/requireNativeComponent.js +++ b/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; diff --git a/Libraries/ReactNative/ReactNativeBaseComponent.js b/Libraries/ReactNative/ReactNativeBaseComponent.js index cfd3df3e8..765c04290 100644 --- a/Libraries/ReactNative/ReactNativeBaseComponent.js +++ b/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, diff --git a/Libraries/ReactNative/ReactNativeDOMIDOperations.js b/Libraries/ReactNative/ReactNativeDOMIDOperations.js index af17f9e07..fbf90db50 100644 --- a/Libraries/ReactNative/ReactNativeDOMIDOperations.js +++ b/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); } ), diff --git a/Libraries/ReactNative/ReactNativeGlobalResponderHandler.js b/Libraries/ReactNative/ReactNativeGlobalResponderHandler.js index 1f548c3eb..1094e6045 100644 --- a/Libraries/ReactNative/ReactNativeGlobalResponderHandler.js +++ b/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(); } } }; diff --git a/Libraries/ReactNative/ReactNativeMount.js b/Libraries/ReactNative/ReactNativeMount.js index 02dbcb40f..1f6dab51b 100644 --- a/Libraries/ReactNative/ReactNativeMount.js +++ b/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 { diff --git a/Libraries/ReactNative/ReactNativeTextComponent.js b/Libraries/ReactNative/ReactNativeTextComponent.js index a7694c139..e9f67ce59 100644 --- a/Libraries/ReactNative/ReactNativeTextComponent.js +++ b/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 ), diff --git a/Libraries/ReactNative/UIManagerStatTracker.js b/Libraries/ReactNative/UIManagerStatTracker.js index ef9c64b2b..a3b877923 100644 --- a/Libraries/ReactNative/UIManagerStatTracker.js +++ b/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; - RCTUIManager.createView = function(tag, className, rootTag, props) { + var createViewOrig = UIManager.createView; + 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; - RCTUIManager.updateView = function(tag, className, props) { + var updateViewOrig = UIManager.updateView; + UIManager.updateView = function(tag, className, props) { incStat('updateView', 1); incStat('setProp', Object.keys(props || []).length); updateViewOrig(tag, className, props); }; - var manageChildrenOrig = RCTUIManager.manageChildren; - RCTUIManager.manageChildren = function(tag, moveFrom, moveTo, addTags, addIndices, remove) { + var manageChildrenOrig = UIManager.manageChildren; + UIManager.manageChildren = function(tag, moveFrom, moveTo, addTags, addIndices, remove) { incStat('manageChildren', 1); incStat('move', Object.keys(moveFrom || []).length); incStat('remove', Object.keys(remove || []).length); diff --git a/Libraries/Utilities/Dimensions.js b/Libraries/Utilities/Dimensions.js index 31fa0d4dc..319aa8462 100644 --- a/Libraries/Utilities/Dimensions.js +++ b/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 diff --git a/Libraries/Utilities/UIManager.js b/Libraries/Utilities/UIManager.js new file mode 100644 index 000000000..3cdfb2e91 --- /dev/null +++ b/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; diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index 29ff95205..2264fa5c6 100644 --- a/Libraries/react-native/react-native.js +++ b/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