App Crashes with message "-[RCTView setSheetLargestUndimmedDetent:]: unrecognized selector sent to instance"

[hoonjoo-park]

Description

Problem

First of all, I've integrated ReactNative with my iOS native App.
There is no problem with using the basic components of ReactNative. However, when I register RootStackNavigator as an entryPoint, the app crashes with the following error:

-[RCTView setSheetLargestUndimmedDetent:]: unrecognized selector sent to instance

As I said above, my app is based on iOS, and only a few screens are implemented with ReactNative.
so I had to implement my custom BridgeManager which returns rootViewFactory to render ReactNative View.

---

React Native Code Example:

index.js

const { AppRegistry } = require('react-native')
import 'react-native-gesture-handler'
import 'react-native-reanimated'
import NoticeRootStackNavigator from './src/navigation/notice/NoticeRootStackNavigator'

AppRegistry.registerComponent('NoticeList', () => NoticeRootStackNavigator)

NoticeRootStackNavigator

export type NoticeStackParamList = {
  NoticeList: undefined;
  NoticeDetail: undefined;
}

export type NoticeNavigationProp = StackNavigationProp<NoticeStackParamList>;

const NoticeStack = createStackNavigator<NoticeStackParamList>();

const NoticeRootStackNavigator = () => {
  const screenOptions = useNavigatorScreenOptions();

  return (
    <NavigationContainer>
      <NoticeStack.Navigator screenOptions={screenOptions} initialRouteName="NoticeList">
        <NoticeStack.Screen name="NoticeList" component={NoticeList} />
        <NoticeStack.Screen name="NoticeDetail" component={NoticeDetail} />
      </NoticeStack.Navigator>
    </NavigationContainer>
  );
}

export default memo(NoticeRootStackNavigator);

---

iOS Code Example

CustomRCTBridgeManager.mm

#import "CustomRCTBridgeManager.h"
#import "RCTAppSetupUtils.h"
#import <React/RCTComponentViewFactory.h>
#import <React/CoreModulesPlugins.h>

@interface CustomRCTBridgeManager () <RCTTurboModuleManagerDelegate>
@end


@implementation CustomRCTBridgeManager

+ (instancetype)shared {
    static CustomRCTBridgeManager *shared = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        shared = [[self alloc] init];
    });
    return shared;
}

- (instancetype)init {
    self = [super init];
    if (self) {
        [self configureBridge];
    }
    return self;
}

- (void)configureBridge {
    _rootViewFactory = [self createRCTRootViewFactory];
    _bridge = _rootViewFactory.bridge;
}

- (UIView *)createRootView: (NSString *)moduleName andInitialProperties:(NSDictionary * _Nullable)initialProperties {
    if (initialProperties == nil) {
        initialProperties = self.initialProps;
    }
    
    return [self.rootViewFactory viewWithModuleName:moduleName
                                  initialProperties:initialProperties
                                      launchOptions:nil];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
    return [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
#else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

#endif
}

#pragma mark - New Arch Enabled settings

- (BOOL)newArchEnabled
{
#if RCT_NEW_ARCH_ENABLED
    return YES;
#else
    return NO;
#endif
}

- (BOOL)turboModuleEnabled
{
    return [self newArchEnabled];
}

- (BOOL)fabricEnabled
{
    return [self newArchEnabled];
}

- (BOOL)bridgelessEnabled
{
    return [self newArchEnabled];
}

#pragma mark - RCTTurboModuleManagerDelegate

- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
{
    return RCTAppSetupDefaultModuleFromClass(moduleClass);
}

- (Class)getModuleClassFromName:(const char *)name {
#if RN_DISABLE_OSS_PLUGIN_HEADER
    return RCTTurboModulePluginClassProvider(name);
#else
    return RCTCoreModulesClassProvider(name);
#endif
}

- (RCTRootViewFactory *)createRCTRootViewFactory
{
    __weak __typeof(self) weakSelf = self;
    RCTBundleURLBlock bundleUrlBlock = ^{
        return [weakSelf sourceURLForBridge:weakSelf.bridge];
    };
    
    RCTRootViewFactoryConfiguration *configuration =
    [[RCTRootViewFactoryConfiguration alloc] initWithBundleURLBlock:bundleUrlBlock
                                                     newArchEnabled:self.fabricEnabled
                                                 turboModuleEnabled:self.turboModuleEnabled
                                                  bridgelessEnabled:self.bridgelessEnabled];
    
    return [[RCTRootViewFactory alloc] initWithConfiguration:configuration andTurboModuleManagerDelegate:self];
}

@end

NoticeViewController

final class NoticeListViewController: ReactNativeViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.navigationItem.title = "NoticeList"
        
        configureRCTView()
    }
    
    
    private func configureRCTView() {
        guard let bridgeManager = QandaRCTBridgeManager.shared() else { return }
        
        let reactView = bridgeManager.createRootView(ReactNativeScreen.notice, andInitialProperties: nil)
        
        self.view = reactView
    }
}

---

Steps to reproduce

1. enable new architecture by running RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
2. navigate to ViewController which it's view is RNScreen
3. it successfully loads bundle from metro server
4. after loading finished, app crashes.

Snack or a link to a repository

sorry it's my company's private repo

Screens version

3.31.1

React Native version

0.74.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description section.

[hoonjoo-park]

Setting detachInactiveScreens to false resolved the issue, However, this seems to be a workaround rather than addressing the root cause.

[rodrigo-nexudus]

Experiencing the same issue on iOS after updating React Native to 0.76. Running react-native-screens 3.35.0, and the latest 6.x.x versions of the required react navigation components. Using old architecture of RN. Crash happens immediately on opening the app.

As @hoonjoo-park mentioned, adding detachInactiveScreens={false} to each of the navigators does resolve the issue, but this is suboptimal.

[rodrigo-nexudus]

@kkafar any chance someone could look into this? Seems to be some kind of incompatibility between screens and react-navigation. In our case, we are using the latest 6.x.x versions of "bottom-tabs", "native" and "stack" libraries of react-navigation, but without detachInactiveScreens disabled, the app crashes immediately on initialisation.

Let me know if I can provide any further info to help debug this.

[spale44]

The same error on my end, after installation.
It happened after update on React Native 0.76. I use 6.x.x latest version of react-navigation and 4.4.0 of react-native-screens

[kkafar]

@spale44 screens 4.x are intended to work with react-navigation@v7. If that's feasible for you I recommend using the 7.x.x line, if not - you should downgrade screens version to 3.x line.

[kkafar]

@rodrigo-nexudus would you be able to provide me with a reproducible example where this happens? IMO this could only happen in case of version mismatch, since I can not reproduce this error in any other scenario.

[spale44]

@kkafar @rodrigo-nexudus Tried with react-native-screens 3.35.0. I got the same error.

Migrating React Native to 0.76.5

[rodrigo-nexudus]

@kkafar our project is actually using 3.35.0 for react-native-screens, along with the following versions for the react-navigation libraries:

"@react-navigation/bottom-tabs": "6.6.1", "@react-navigation/native": "6.1.18", "@react-navigation/stack": "6.4.1",

I did also, prior to your message, try to update to 4.4.0, but that did not resolve the issue. From playing around with it, it's affecting all the different navigators provided by react-navigation, as the 'detachInactiveScreens' prop needs to be applied to all navigators for the app not to crash. I can try and provide a minimal repo, but 3.35.0 was the initial setup where we experienced the issue.

[kkafar]

@rodrigo-nexudus it would be great if you had provided us with a repro - otherwise it's really hard to pin-point the issue

[sriprasad19]

@kkafar I am also getting same crash for ios. Is there any fix for this?

[kkafar]

@sriprasad19 I can reiterate on the need for reproduction. This looks like mismatch of versions as I've pointed above ☝ If anyone would be able to provide me with a proper reproduction / snack where I can reproduce the issue, then I might be able to fix the issue.