how to handle the Navigation in Seprate file in React Native - react-native

Question

I am new to React native
I want to manage navigation in a component separate from App.js Component.
I could not understand how to handle in a separate component file
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer style={{ backgroundColor: '#FFFFFF' }}>
<Stack.Navigator>
<Stack.Screen name=" " component={FirstPage}
options={{
headerLeft: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
<Stack.Screen name="Login" component={LoginView}
options={{
headerStyle: {
backgroundColor: '#88aa31',
},
headerTintColor: '#fff',
headerLeft: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
<Stack.Screen name="Signup" component={SignUpView}
options={{
headerStyle: {
backgroundColor: '#88aa31',
},
headerTintColor: '#fff',
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
This my App.js file. How can i manage navigation in a separated component in React Native?

Answer 1

Create navigation file import all other components you want as show below in code.
import { createAppContainer, createStackNavigator } from "react-navigation";
import LoginView from './App/component/Views/Login'
import SignUpView from './App/component/Views/Signup';
const SwitchNavigator = createStackNavigator(
{
LoginView: { screen: LoginView },
SignUpView: { screen: SignUpView }
},
{
initialRouteName: 'LoginView',
}
);
const App = createAppContainer(SwitchNavigator)
export default App;