Crash on iOS with "Unimplemented component: <RNSScreenContentWrapper>" when using @react-navigation/native-stack under New Architecture (RN 0.79.0)

[chooseongwoo]

Current behavior

After upgrading to React Native 0.79.0 and enabling the New Architecture (newArchEnabled=true), using createNativeStackNavigator from @react-navigation/native-stack crashes the app on iOS with the following runtime error:

Unimplemented component: <RNSScreenContentWrapper>

This happens even though react-native-screens@5.21.0 is installed and enableScreens() is properly invoked.
This strongly suggests that the native module RNSScreenContentWrapper is not correctly registered for the Fabric renderer.

Expected behavior

The screen should render normally without a runtime crash, with native stack navigation functioning as expected under the New Architecture.

---

Reproduction
You can reproduce the issue by following these steps:

1. Create a new React Native project using version 0.79.0

2. Install the following packages:

   yarn add @react-navigation/native @react-navigation/native-stack react-native-screens@5.21.0
   

3. Enable New Architecture by setting newArchEnabled=true in both gradle.properties and Podfile.properties.json

4. Wrap the root component with <NavigationContainer> and render a stack navigator using createNativeStackNavigator()

5. Run npx pod-install

6. Launch the iOS app: npx react-native run-ios

7. Observe the crash:

   Unimplemented component: <RNSScreenContentWrapper>
   

Reproduction

https://github.com/chooseongwoo/SPOT

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

package	version
@react-navigation/native	7.1.6
@react-navigation/bottom-tabs	7.3.10
@react-navigation/stack	7.2.10
@react-navigation/native-stack	7.3.10
react-native-screens	4.10.0
react-native-safe-area-context	5.4.0
react-native-gesture-handler	2.25.0
react-native-reanimated	3.17.4
react-native	0.79.0
node	20.11.1
yarn	1.22.22

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[chooseongwoo]

Error Screenshot

[github-actions]

Hey @chooseongwoo! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.

[chooseongwoo]

I added my repository link.

[kalyanijamunkar]

@chooseongwoo i am facing same issue, any update on this?

[abnormalization]

Similar issue with iOS app. Using expo 53.0.9, react-navigation/native 7.1.9, react-navigation/drawer 7.3.12, and react-navigation/native-stack 7.1.13. Implementing dynamic syntax (NavigationContainer). The app runs fine in Expo Go. It only throws the RNSScreenContentWrapper error in the developer and production builds. Tried reinstalling modules, resetting the cache, and installing react-native-safe-area-context, but no success.

[rendomnet]

Crash on 0.79

[rlehman221]

Getting the same error

[tomcheung1208]

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text } from 'react-native';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Abc = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
};

export default Abc;

I got app crash on IOS too. When render <Stack.Screen name="Home" component={HomeScreen} />, iOS got crashed. I'm still using 6.x because of I have no time to fix some breaking changes of 7.x. May I know how to fix? thanks

"@react-navigation/bottom-tabs": "6.6.0",
"@react-navigation/elements": "1.3.30",
"@react-navigation/native": "6.1.17",
"@react-navigation/native-stack": "^6.10.1",
"@react-navigation/stack": "6.4.0",
"react-native-gesture-handler": "2.25.0",
"react-native-screens": "4.10.0",
"react-native": "0.79.2",

[namikinn]

I'm experiencing the same error with the following versions:

• Expo SDK: 53.0.0
• React Native: 0.79.3