attempt child is not RNScreen type with React Navigation v6.0

[dnx-xy]

Description

Hi, I have install React Navigation v6 with all dependencies including RNScreen 3.18.0.
Enabling hermes and fabric also. But every time I create stack navigator using createNativeStackNavigator, it thrown an error said attempt child is not RNScreen type. How do I solved it? Thanks in advance

stack = createNativeStackNavigator()
const stackApp = () => {
return(
<StackApp.Navigator>
<StackApp.Screen name="Home" component={HomeScreen} />
</StackApp.Navigator>
)
}

Steps to reproduce

1. Install React Navigation v6.0 and all dependencies
2. Enable hermes and fabric / NEW_ARCH=1 on grade.properties
3. Create stack navigator

Snack or a link to a repository

https://gitlab.com/denix182/

import {createNativeStackNavigator} from '@react-navigation/stack';

import LoginScreen from '../../screens/Auth/login';
import RegisterScreen from '../../screens/Auth/register';
import ForgotScreen from '../../screens/Auth/forgot';

import MainScreen from '../../screens/Home/main';
import MainNavigation from '../TabNavigation/BottomNavigation';

const AuthStack = createNativeStackNavigator();
const MainStack = createNativeStackNavigator();
const RootStack = createNativeStackNavigator();

type AuthStackParams = {
Login: undefined;
Register: undefined;
ForgotPass: undefined;
};

type MainStackParams = {
Home: undefined;
};
function AuthStacking({route, navigation}: any) {
return (
<AuthStack.Navigator>
<AuthStack.Screen name="Login" component={LoginScreen} />
<AuthStack.Screen name="Register" component={RegisterScreen} />
<AuthStack.Screen name="ForgotPass" component={ForgotScreen} />
</AuthStack.Navigator>
);
}

function MainStacking({route, navigation}: any) {
return (
<MainStack.Navigator>
<MainStack.Screen name="Home" component={MainScreen} />
</MainStack.Navigator>
);
}

const RootStacking = () => {
return (
<RootStack.Navigator>
<RootStack.Screen
name="Authentication"
component={AuthStacking}
options={{headerShown: false}}
/>
<RootStack.Screen
name="MainApp"
component={MainNavigation}
options={{headerShown: false}}
/>
</RootStack.Navigator>
);
};

export {AuthStacking, MainStacking, RootStacking};

Screens version

3.18.0

React Native version

0.70.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Android 12

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?

[if-fi]

I get the same error after upgrading from 3.17.0 to 3.18.0

[cetfu]

hi, i am getting this error in version 3.18.0 of react-native-screens. Is there any solution?
New Architecture is open
React native version: 0.70.2

[skurgansky-sugarcrm]

same problem

[kartikmittal1996]

Hey, I am also getting same issue with latest react native version with new architecture enabled. Please share the solution asap. I have also tried to add react navigation v6.0 in new project of react native but issue still persists. What should I do?

[skurgansky-sugarcrm]

I get the same error after upgrading from 3.17.0 to 3.18.0

3.17.0 same issue for me...

[krystofwoldrich]

I have the same issue on our new architecture sample app.

Here is a code for repro.

https://github.com/getsentry/sentry-react-native/tree/4c1a32ee4ff92fa53854883765ce9243d3e4dadf/sample-new-architecture

[kkafar]

Ok, looks like I know what is going on.

Autolinking was added with #1585 and it added react-native.config.js file with codegen configuration, but I did not add this file to npm include list causing its absence in final released package...

Didn't catch it while testing cause I was using library version directly from main in test applications.

I'll release new version with the fix soon.

If you need the fix immediately just copy & paste this file into your node_modules/react-native-screens/ directory (preferably use some kind of tool like patch-package)

[krystofwoldrich]

Awesome! Thank you for the quick solution. @kkafar

[kkafar]

3.18.1 is available for download & should resolve the issue. Let me know (tag me) if something is still wrong).

[cetfu]

@kkafar Thank you so much for your update! My app ran successfully

[shivam7366]

I am still facing the same issue. while using react-native-screens-3.20.0

App.js

import { StyleSheet, Text, View } from "react-native";
import { StatusBar } from "expo-status-bar";

import MealsOverview from "./screens/MealsOverview";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator>
     
          <Stack.Screen name="MealsOverview" component={MealsOverview} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

MealsOverview.js

import { View, Text, StyleSheet } from "react-native";
import React from "react";
import { MEALS } from "../data/dummy-data";

export default function MealsOverview() {
  return (
    <View>
      <Text>MealsOverview</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

package.json

"dependencies": {
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "~48.0.6",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0"
  }

and I am facing the error - attempt attach child that is not of type RNscreens

@kkafar please help me in solving this issue

[ruslan-moiseyenko]

The same problem. But with most screens it works fine... would be great to understand the core of the problem...

[kkafar]

Hey if the issue still exists I would require a valid reproduction. Unless it is provided I can't do much (as I can not reproduce the issue).