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[bot]]

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.

[Amurmurmur]

Getting into the same issue crash with:

[RCTView setSheetLargestUndimmedDetent:]

Happens only when using RN 0.77 and the new architecture enabled. When I disable a new architecture the problem seems to be gone.

[kkafar]

Are you guys using frameworks on iOS (use_frameworks! call in your podfiles)?

[sriprasad19]

@kkafar yes use_frameworks! :linkage => :static

[ahmedgit2]

Getting into the same issue crash with:

[RCTView setSheetLargestUndimmedDetent:]

Happens only when using RN 0.77 and the new architecture enabled. When I disable a new architecture the problem seems to be gone.

i have same issue using frameworks on iOS (use_frameworks! call in podfiles) with react native 67.5 and 77.0 also when I disable the new architecture the problem gone.

[huxinhai]

Getting into the same issue crash with:

[RCTView setSheetLargestUndimmedDetent:]

Happens only when using RN 0.77 and the new architecture enabled. When I disable a new architecture the problem seems to be gone.

i have same issue using frameworks on iOS (use_frameworks! call in podfiles) with react native 67.5 and 77.0 also when I disable the new architecture the problem gone.

I RN0.77 set enableScreens (false) in [RCTView setColor:] is not set to false appears [RCTView setSheetLargestUndimmedDetent:] do you have a solution?

[kkafar]

@huxinhai are you able to provide a reproduction for the issue?

[huxinhai]

@huxinhai您能提供该问题的重现版本吗？

Hold on a second because this is a corporate project and I'll give you a simplified version of it later

[kkafar]

I see, ping me when you post it. Thanks!

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github repository url @kkafar

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github repository url(https://github.com/huxinhai/super-couscous) @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

[princekumarpaswan]

我明白了，发布后请通知我。谢谢！

你好，我制作了一个简单的圆顶，我把它放在了 github 存储库网址上 @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github url @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

I did not solve I can only post author solved I will not ios development /(ㄒoㄒ)/~~

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github url @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

I did not solve I can only post author solved I will not ios development /(ㄒoㄒ)/~~

I don't have any problems on Android but on ios it's annoying and I'm dying /(ㄒoㄒ)/~~

[DheerajM-1]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github url @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

I did not solve I can only post author solved I will not ios development /(ㄒoㄒ)/~~

I don't have any problems on Android but on ios it's annoying and I'm dying /(ㄒoㄒ)/~~

just add this https://www.npmjs.com/package/@react-native/gradle-plugin your error will be resolved

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github url @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

I did not solve I can only post author solved I will not ios development /(ㄒoㄒ)/~~

I don't have any problems on Android but on ios it's annoying and I'm dying /(ㄒoㄒ)/~~

just add this https://www.npmjs.com/package/@react-native/gradle-plugin your error will be resolved

Just install this into package.json?

[huxinhai]

I see, ping me when you post it. Thanks!

Hello I have made a simple dome I put on github url @kkafar

[RCTView setSheetLargestUndimmedDetent:] and [RCTView setColor:] The effect is noted in App.tsx

i am getting the exact same issue have you got any solution for this

I did not solve I can only post author solved I will not ios development /(ㄒoㄒ)/~~

I don't have any problems on Android but on ios it's annoying and I'm dying /(ㄒoㄒ)/~~

just add this https://www.npmjs.com/package/@react-native/gradle-plugin your error will be resolved

Just install this into package.json?

It looks like this is a library built by Android but it's a problem with Android and it's just a problem with ios

[DheerajM-1]

actually i was facing the same issue , but when i installed this library and then installed pods my issue got resolved

[huxinhai]

actually i was facing the same issue , but when i installed this library and then installed pods my issue got resolved

I can't install this in pod insrall in ios. It's the same error