expo start dev-client Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

Expo Application Services (EAS)
1

Hi developers, hope you are doing well. I have an error with eas build. The problem lies with the react navigation library.

I am using SDK version 45 of expo.

the contents of my app.json file

{
  "expo": {
    "name": "essai",
    "slug": "essai",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.drabom123.essai"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

the contents of my package.json file

{
  "name": "essai",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "expo": "~45.0.0",
    "expo-dev-client": "~1.0.1",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

the contents of my app.js file

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {View, Button, StyleSheet, Dimensions} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const height = Dimensions.get('window').height;
const Stack = createNativeStackNavigator();
function MainScreen({navigation}) {
    return (
      <View style = {{backgroundColor: 'white', flex: 1}}>
      <View style = {styles.button}>
      <Button title = "Go To Favourites"
       onPress={() => navigation.navigate('Favourite')}>
      </Button>
      </View>
      </View>
  );
}
function FavouriteScreen({navigation}) {
    return (
      <View style = {{
       margin: height/2.1,
       width: 185,
       alignSelf: 'center'}}>
      <Button title = 'Back To Main Page'
       onPress={() => navigation.navigate('Main')}>
      </Button>
      </View>
  );
}
function App() {
    return (
      <NavigationContainer>
      <Stack.Navigator screenOptions = {{headerShown: false}}>
      <Stack.Screen name = "Main"
       component = {MainScreen}
       options = {{title: 'Main'}}/>
      <Stack.Screen name = "Favourite"
       component = {FavouriteScreen}
       options = {{title: 'Favourite'}}/>
      </Stack.Navigator>
      </NavigationContainer>
  );
};
export default App;
const styles = StyleSheet.create({
      button: {
      borderRadius: 25,
      width: 185,
      backgroundColor: 'orange',
      alignSelf: 'center',
      margin: height/2.1,
  }
})

after run expo doctor

npm WARN config global --global, --local are deprecated. Use --location=global instead.
WARNING: We recommend using PowerShell or Bash via WSL 2 for development with expo-cli on Windows. You may encounter issues using cmd.exe.

:tada: Didn’t find any issues with the project!

2

you need to do another development build after you install react-native-screens. new development builds are required anytime you add or update a native dependency