OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app

  • Thread starter Thread starter Anders Saxrud
  • Start date Start date
A

Anders Saxrud

Guest
When running an application on android i get this error. It builds correctly but crashes with exception. I have installed React-native-screens, @React-native/navigation and the dependencies listed on https://reactnavigation.org/docs/getting-started/

com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

Code:
This error is located at:
    in RNSScreenStackHeaderConfig
    in Unknown
    in RNSScreen
    in N
    in ForwardRef
    in y
    in E
    in RNSScreenStack
    in w
    in RNCSafeAreaProvider
    in Unknown
    in v
    in Unknown
    in Unknown
    in Unknown
    in ForwardRef
    in Unknown
    in ForwardRef
    in p
    in c
    in P
    in RCTView
    in View
    in RCTView
    in View
    in h, stack:

It builds and runs on iOS fine but when running on android it crashes completely. Is there something I am overlooking here?

This is my Package json.

Code:
{
  "name": "<myprojectname>",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify",
    "android:bundle:debug": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "adbkit": "^2.11.1",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.63.0",
    "react-native-calendar-strip": "^1.4.1",
    "react-native-calendars": "^1.264.0",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.1",
    "react-native-screens": "3.1.1",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "babel-jest": "24.9.0",
    "eslint": "^6.5.1",
    "jest": "24.9.0",
    "jetifier": "^1.6.5",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I dont really know how to solve this, have tried removing caches, restarting metro, deleting node modules and all "related" errors. This error even happens when I create a fresh project and try installing and using the navigation library.

This is my entrypoint, example copied from React-navigation snack.

Code:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';

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

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

const Stack = createNativeStackNavigator();

function AppTest() {
  return (
    <NavigationContainer>
      <Stack.Navigator 
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
      initialRouteName="Home">
        <Stack.Screen  options={{ title: 'My home' }} name="Home" component={HomeScreen} />
        <Stack.Screen  options={{ title: 'My home' }} name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppTest;

Any suggestions?

<p>When running an application on android i get this error. It builds correctly but crashes with exception. I have installed React-native-screens, @React-native/navigation and the dependencies listed on <a href="https://reactnavigation.org/docs/getting-started/" rel="noreferrer">https://reactnavigation.org/docs/getting-started/</a></p>
<p>com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.</p>
<pre><code>This error is located at:
in RNSScreenStackHeaderConfig
in Unknown
in RNSScreen
in N
in ForwardRef
in y
in E
in RNSScreenStack
in w
in RNCSafeAreaProvider
in Unknown
in v
in Unknown
in Unknown
in Unknown
in ForwardRef
in Unknown
in ForwardRef
in p
in c
in P
in RCTView
in View
in RCTView
in View
in h, stack:
</code></pre>
<p>It builds and runs on iOS fine but when running on android it crashes completely. Is there something I am overlooking here?</p>
<p>This is my Package json.</p>
<pre><code>{
"name": "<myprojectname>",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"postinstall": "npx jetify",
"android:bundle:debug": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
},
"dependencies": {
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0",
"@react-navigation/stack": "^6.0.7",
"adbkit": "^2.11.1",
"moment": "^2.24.0",
"react": "16.9.0",
"react-native": "0.63.0",
"react-native-calendar-strip": "^1.4.1",
"react-native-calendars": "^1.264.0",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.0",
"react-native-safe-area-context": "^3.3.1",
"react-native-screens": "3.1.1",
"react-native-snap-carousel": "^3.8.4",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"babel-jest": "24.9.0",
"eslint": "^6.5.1",
"jest": "24.9.0",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
</code></pre>
<p>I dont really know how to solve this, have tried removing caches, restarting metro, deleting node modules and all "related" errors. This error even happens when I create a fresh project and try installing and using the navigation library.</p>
<p>This is my entrypoint, example copied from React-navigation snack.</p>
<pre><code>import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';

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

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

const Stack = createNativeStackNavigator();

function AppTest() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
initialRouteName="Home">
<Stack.Screen options={{ title: 'My home' }} name="Home" component={HomeScreen} />
<Stack.Screen options={{ title: 'My home' }} name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

export default AppTest;
</code></pre>
<p>Any suggestions?</p>
 

Latest posts

P
Replies
0
Views
1
Paras Chouhan
P
Top