[Android] Supporting UIManager in the New Architecture

[arushikesarwani94]

Important

TL;DR - UIManagerModule is deprecated in favor of UIManager in the New Architecture. If you’ve been using UIManagerModule on Android in your apps/libraries, this post describes how to migrate to a New Architecture equivalent.

Context

In React Native 0.74, we enabled Bridgeless by default when new architecture is enabled for the apps, emphasizing backwards compatibility to facilitate smooth migration to the new architecture.

Note

This discussion topic is intended for users of UIManagerModule, and the APIs mentioned are specific to Android only. This is not a new change and it has been the case since 0.68. We're providing this explanation to help users better understand and simplify their migration process. We have done our best to make the APIs meaningfully backwards compatible and have already migrated the big ticket items. Now, we're only dealing with the long-tail of things. Please use this space to share any gaps in the APIs that need improvement since we are curious to understand your needs better and work together to resolve any issues.

As some of you may have noticed in the new architecture, UIManagerModule is no longer implemented as a native module. This means the following returns null:

reactContext.getNativeModule(UIManagerModule.class);

This is problematic as many libraries and apps rely on this to access the UIManagerModule. Since the new architecture’s UIManager is not a native module, we will be providing a different class, UIManagerHelper, to retrieve the UIManager abstraction.

Similar to the New Renderer Interop Layer introduced for Fabric, we insist on transitioning to the UIManager interface over the UIManagerModule class. We introduced an interface, UIManager, implemented by FabricUIManager to establish a more customizable pipeline for the critical rendering path. However, please note UIManager is not designed to be a 1-1 replacement for UIManagerModule.

You may have noticed in JavaScript land, UIManager.js defines an API for JavaScript interaction with the native UIManagers for both architectures. In the new architecture, there are some APIs in the UIManagerModule class that are not supported in the UIManager interface, but are supported in UIManager.js. These are annotated with @ReactMethod in UIManagerModule.

This redesign offers significant benefits since by utilizing an interface and polymorphism, there is a clearer separation making testing, mocking and extending easier, which ultimately enhances maintainability.

To summarize, UIManager replaces UIManagerModule. UIManager is retrieved through the static methods in UIManagerHelper. Most legacy operations remain intact for backwards compatibility. The following steps describe how you use UIManagerHelper to retrieve UIManager

1. Import UIManagerHelper with

import com.facebook.react.uimanager.UIManagerHelper 

2. Access UIManager through the public APIs provided by UIManagerHelper

• public static UIManager getUIManagerForReactTag(ReactContext context, int reactTag)

• public static UIManager getUIManager(ReactContext context, @UIManagerType int uiManagerType)

How to Migrate

Review your code for all instances where UIManagerModule is called and replace them with references to UIManager

UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);

For backwards compatibility can be changed to:

if(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {	
    UIManager uiManager = UIManagerHelper.getUIManager(this.reactContext, UIManagerType.FABRIC);
} else {
    UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
}

Feel free to review the index below for the APIs beforehand. If you're currently utilizing a non-supported API, please comment on this post so we can discuss the next steps together.

Migration Examples:

expo/expo#29500
react-native-maps/react-native-maps#5061
gre/react-native-view-shot#516

API Index

Non-deprecated APIs

Specifically focusing on Android APIs, the following are the public non-deprecated APIs on UIManagerModule, out of which some of them have their replacements for backwards compatibility. In most cases the method name will be the same.

Annotation: In the new architecture, the bolded APIs are only available in JavaScript through UIManager.js. If your method is not available (marked with "-"), please comment below and let us know which method and your use-case and we can help.

Old API on UIManagerModule	New API on FabricUIManager
initialize	initialize
onHostResume	onHostResume
onHostPause	onHostPause
onHostDestroy	onHostDestroy
invalidate	invalidate
createConstants	-
getConstantsForViewManager(String viewManagerName)	-
getConstantsForViewManager(ViewManager viewManager, Map<String, Object> customDirectEvents)	-
getDefaultEventTypes	-
profileNextBatch	-
getPerformanceCounters	getPerformanceCounters
addRootView(final T rootView)	addRootView(final T rootView, WritableMap initialProps)
addRootView(final T rootView, WritableMap initialProps)	addRootView(final T rootView, WritableMap initialProps)
synchronouslyUpdateViewOnUIThread	synchronouslyUpdateViewOnUIThread
startSurface(final T rootView, final String moduleName, final WritableMap initialProps, int widthMeasureSpec, int heightMeasureSpec)	startSurface(final T rootView, final String moduleName, final WritableMap initialProps, int widthMeasureSpec, int heightMeasureSpec)
stopSurface(final int surfaceId)	stopSurface(final int surfaceId)
removeRootView	-
updateNodeSize	-
setViewLocalData	-
createView	-
updateView	-
manageChildren	-
setChildren	-
measure(int reactTag, Callback callback)	-
measureInWindow(int reactTag, Callback callback)	-
measureLayout(int tag, int ancestorTag, Callback errorCallback, Callback successCallback)	-
findSubviewIn	-
setJSResponder	setJSResponder
clearJSResponder	clearJSResponder
dispatchViewManagerCommand(int reactTag, Dynamic commandId, @Nullable ReadableArray commandArgs)	-
dispatchCommand(int reactTag, String commandId, @Nullable ReadableArray commandArgs)	-
setLayoutAnimationEnabledExperimental	-
configureNextLayoutAnimation	-
onBatchComplete	-
setViewHierarchyUpdateDebugListener	-
getEventDispatcher	getEventDispatcher
sendAccessibilityEvent	sendAccessibilityEvent
addUIBlock	addUIBlock
prependUIBlock	prependUIBlock
addUIManagerEventListener(UIManagerListener listener)	addUIManagerEventListener(UIManagerListener listener)
removeUIManagerEventListener(UIManagerListener listener)	removeUIManagerEventListener(UIManagerListener listener)
invalidateNodeLayout	-
updateRootLayoutSpecs	updateRootLayoutSpecs
resolveView	resolveView
receiveEvent(int reactTag, String eventName, @Nullable WritableMap event)	receiveEvent(int reactTag, String eventName, @Nullable WritableMap event)
receiveEvent(int surfaceId, int reactTag, String eventName, @Nullable WritableMap event)	receiveEvent(int surfaceId, int reactTag, String eventName, @Nullable WritableMap event)

Deprecated APIs

If you are using deprecated APIs, migrate those off to the ones supported in UIManager, for example:

• - addUIManagerListener(UIManagerModuleListener listener)
  + addUIManagerEventListener(UIManagerListener listener)

• - removeUIManagerListener(UIManagerModuleListener listener)
  + removeUIManagerEventListener(UIManagerListener listener)
  
  

Please comment below if you are using a deprecated API that does not have an alternative in the new architecture.

Thanks! If you have questions or encounter challenges, don’t hesitate to reach out.

[robin-pham]

I'm using https://github.com/th3rdwave/react-native-safe-area-context and they use the UIManagerModule here.

It uses 2 APIs which seem to be deprecated, specifically: uiManager.setViewLocalData(id, localData) and uiManager.uiImplementation.dispatchViewUpdates.

Any idea how to replace these or suggestions on alternative solutions ?

[arushikesarwani94]

Apologies for the delay in response @robin-pham.

The new mechanism for this in Fabric is to manually write a shadow node with a custom state. Some components already using this are: TextInput, Image

You can migrate react-native-safe-area-context to using Custom Shadow nodes and then you won't need to call this API (uiManager.uiImplementation.dispatchViewUpdates) anymore.

[maxymczech]

Trying to patch a package for react-native@0.76 compativility, after doing the migration as you outlined Gradle says it cannot find symbol uiManager.addUIBlock:

 error: cannot find symbol
        uiManager.addUIBlock(new UIBlock() {
                 ^
  symbol:   method addUIBlock(<anonymous UIBlock>)
  location: variable uiManager of type UIManager

P. S. I was able to make it work using a pattern from react-native-maps migration example:

interface UIBlockInterface extends UIBlock, com.facebook.react.fabric.interop.UIBlock  {}

...

        UIManager uiManager = UIManagerHelper.getUIManager(context, FABRIC);
        ((FabricUIManager) uiManager).addUIBlock(new UIBlockInterface() {
            @Override
            public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
                executeImpl(nativeViewHierarchyManager, null);
            }

            @Override
            public void execute(UIBlockViewResolver uiBlockViewResolver) {
                executeImpl(null, uiBlockViewResolver);
            }

            private void executeImpl(NativeViewHierarchyManager nativeViewHierarchyManager, UIBlockViewResolver uiBlockViewResolver) {
                final RNCameraView cameraView;
                cameraView = uiBlockViewResolver != null ? (RNCameraView) uiBlockViewResolver.resolveView(viewTag) : (RNCameraView) nativeViewHierarchyManager.resolveView(viewTag);
            }
        });

[boboxiaodd]

you can remove addUIBlock

UIManager uiManager =  UIManager.getUIManagerForReactTag(context, viewTag);
final RNCameraView cameraView;
cameraView = uiManager.resolveView(viewTag) ;

[gosha212]

hi @arushikesarwani94, I'm the contributor of React Native Navigation.
We are using updateNodeSize here to update the size of the Modals.
Do we have any alternatives in fabric?

[arushikesarwani94]

For updating the size of the modals, you can use what ReactModalHostView does:

Use updateState(width: Int, height: Int) and callback with size using onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) after the native modal has layout.

On iOS/MacOS, we use something similar RCTModalHostViewComponentView and callback with size after the native modal has layout RCTFabricModalHostViewController

The API that replaced updateNodeSize is C++ state updates. ModalHostView already uses it with a few other components. It is more generic API than just updateNodeSize. It allows any data to be stored on a shadow node. The data then can be used to influence layout.

[RobMengelers]

Hi!
I'm trying to write a patch for the react-native-shared-element package. When trying to invoke ((FabricUIManager)uiManager).prependUIBlock(mNodeManager::setNativeViewHierarchyManager); I'm getting the following error: incompatible types: UIBlockViewResolver cannot be converted to NativeViewHierarchyManager

Any suggestions, thanks in advance! :)

[DorianMazur]

@arushikesarwani94 This works for Android, but how can I get and use UIManager on iOS?

[DorianMazur]

facebook/react-native#50800 (comment)