Can't access View from reactTag on iOS (New Architecture)

[DorianMazur]

Description

I'm migrating to the New Architecture and I'm trying to access a native view instance by its reactTag on iOS. On Android, this is straightforward:

val uiManager = UIManagerHelper.getUIManager(getContext(), UIManagerType.FABRIC)
val view = uiManager?.resolveView(tag)

On iOS (Old Architecture), I used to do:

self.bridge?.uiManager.view(forReactTag: tag)

But now, with the New Architecture (Bridgeless/Fabric enabled), I can't figure out how to access the view from a reactTag. I can't find any documentation or relevant API for this on iOS.

Steps to reproduce

1. Create a Native Module for iOS in a React Native app with the New Architecture (Fabric/Bridgeless) enabled.
2. Attempt to access a native view instance by its reactTag inside your native code (Swift/Objective-C).
   Example (Old Way):
   self.bridge?.uiManager.view(forReactTag: tag)
3. Notice that the above method does not work with the New Architecture. View cannot be find.

React Native Version

0.78.2

Affected Platforms

Runtime - iOS

Areas

TurboModule - The New Native Module System

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.3.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 142.91 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.12.0
    path: ~/.nvm/versions/node/v22.12.0/bin/node
  Yarn:
    version: 3.6.1
    path: ~/.nvm/versions/node/v22.12.0/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.12.0/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-29 | ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-32 | Google Play ARM 64 v8a
      - android-33 | ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | ARM 64 v8a
      - android-Tiramisu | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.21829.142.2421.12409432
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.3
    path: /usr/bin/javac
  Ruby:
    version: 3.3.5
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.2
    wanted: 0.78.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

N/A

Reproducer

https://github.com/DorianMazur/ui-manager-ios-not-working

Screenshots and Videos

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.77.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[DorianMazur]

Okay, I think it might be a bug in react native. it's working for IOS only with setTimeout for some reason:

  const handleRef = (ref: any) => {
    if (ref) {
      // Only when ref is not null!
      const viewTag = findNodeHandle(ref);
      console.log(viewTag);
      if (viewTag) {
        setTimeout(() => {
          registerView(viewTag);
        }, 1);
      }
    }
  };

[cipolleschi]

@DorianMazur thanks for the issue. I believe that the root cause of the issue is that you are trying to access the View before it is actually rendered on screen, therefore there is not a match between reactTag and the view yet.

AFAIK, this is fixed in 0.79, meaning that useEffect and similar mechanisms should be executed only after the component is rendered. Before we actually had a bug where the view mounting and the event were happening on different threads, so it could be that the useEffect and nativeCommands were executed before the component waas actually rendered.

Can you please test your library/code on 0.79 and report back?

---

Aside from this, I think it is important to understand what you are trying to do. I'm not that what you are trying to do is compatible with the React mental model. Why are you trying to register a view through a NativeModule, instead of using the registration mechanisms we already provide in ReactNative? 😕

[DorianMazur]

@cipolleschi I checked 0.79 and the issue is still there.

What registration mechanism? Let’s say I want to access the underlying ScrollView (either UIScrollView or RTCScrollView) from SectionList/FlashList/FlatList using a ref, that’s the only way to do it.

[cipolleschi]

Thanks for testing out in 0.79. I'll raise the problem with my colleagues that knows that part better.

The question is: why you have to do it? Accessing an underlying view is like accessing a private API or an implementation detail. You should never do that.

If you need a ref for some reason, you can use useRef. If you need to call a function on the component, you can use Native Commands

---

Also, I see you are using this code:

[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
        UIView *view = viewRegistry[targetNumber];

        if (!view) {
            RCTLogError(@"No view found with reactTag: %@", targetNumber);
            return;
        }

        RCTLogInfo(@"Successfully registered view with reactTag: %@", targetNumber);
    }];

this is definitely not compatible with the New Architecture: the New Architecture does not use the Bridge.

This works now thanks to the interop layers, which are going to be around for a while, but this is some sort of hybrid code, as of today.

[DorianMazur]

Alright, that’s fair. This scenario might be using a private API in this case. But there still needs to be a reliable way to get a View using the reactTag. There are many situations and edge cases where this is really needed...

The New Architecture doesn’t use the old Bridge, but it does use a bridge proxy, right?

It works when I add a setTimeout, which suggests that the registry isn’t ready right away. It gets populated later. So something seems off with how or when the registry is set up. Alternative code:

[self.viewRegistry_DEPRECATED addUIBlock:^(RCTViewRegistry *viewRegistry) {
        UIView *view = viewRegistry[targetNumber];

        if (!view) {
            RCTLogError(@"No view found with reactTag: %@", targetNumber);
            return;
        }

        RCTLogInfo(@"Successfully registered view with reactTag: %@", targetNumber);
    }];

EDIT:
Also, If I can't use self.bridge.uiManager or self.viewRegistry_DEPRECATED then what is a reliable way of getting UIManager or viewRegistry?

[cipolleschi]

The New Architecture doesn’t use the old Bridge, but it does use a bridge proxy, right?

Yes, but it is part of the interop layer, and it will go away when we remve the interop layers.

Also, If I can't use self.bridge.uiManager or self.viewRegistry_DEPRECATED then what is a reliable way of getting UIManager or viewRegistry?

The answer is that you should not get them. You should probably use the nativeCommands which are invoked on the right view for you.

to provide a proper solution, we need to understand exactly what do you want to do. Why you need to grab a reference to the native view in a turbomodule?

[DorianMazur]

@cipolleschi Native commands are used to run native methods from JavaScript, but that’s not what I need here.
I want to access a view in native code using a react tag. For example, I want to get a reference to a ScrollView so I can listen to scroll events. This used to be possible...
Another example is how react-native-view-shot works: https://github.com/gre/react-native-view-shot