Invariant Violation: "main" has not been registered While running react-native app - react-native

Question

This is my folder structure. I have started this app with expo. Somehow i am not able to run it because of the following error.
Rootstack.js
import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginComponent from "../component/login/login";
import HomeComponent from "../component/home/home"
const AuthNav = createStackNavigator({
Login:{
screen : LoginComponent,
navigationOptions:{
headerShown: false
}
},
});
const AppNav = createStackNavigator({
Home:{
screen : HomeComponent,
tabBarLabel: 'Home',
navigationOptions:{
headerShown: false
}
},
});
const switchNav = createSwitchNavigator({
AuthNav,
AppNav
},{
initialRouteName:"AuthNav"
});
export default switchNav;
App.js inside stack folder
import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default createAppContainer(App);
main app.js
import App from './src/App.js';
export default App;
Error
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
Error 2
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
Which part i am doing wrong here .

Answer 1

The meaningful exception that you are seeing here is:
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
The "main" has not been registered is a red herring, it only happened because the other error.
The RNCSafeAreaProvider exception is happening because you have multiple copies of react-native-safe-area-context in your app. You may be using a library that includes it as a dependency in addition to having it installed in your app. If you use yarn, you can run yarn why react-native-safe-area-context to see where it's coming from. Try running expo install react-native-safe-area-context and if that doesn't help you can use yarn resolutions to override the version used by the package that depends on it.

Answer 2

The issue is most likely linked to registering your App Multiple times.
Keep all your navigation logic in RootStack.js and avoid using createAppContainer() in your app.js
AppRegistry.registerComponent('main',() => App) should be the final statement after configuring your navigation.
Importing App.js into main app.js means you are registering the main component twice(you should only have one output file). React uses index.js as the default output.
Use this instead App.js inside stack folder:
import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'
//Remove these 2 lines below
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default createAppContainer(App);
In your main app.js
import App from './src/App.js';
// Use it here
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default App;