Confusion with react-navigation with react-navigator 3 - react-native

Question

I am using react-navigation v3 for navigation in my react-native app. When I start app, It navigates to final navigation page i.e. Electonics
AppNavigator.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from '../container/Home';
import BooksScreen from '../container/BooksScreen'
import ElectronicsScreen from '../container/ElectronicsScreen';
const AppNavigator = createStackNavigator({
Home:Home,
Book: BooksScreen,
Electronics: ElectronicsScreen
});
export default AppContainer = createAppContainer(AppNavigator);
Home.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity as Button } from 'react-native';
export default class Home extends Component {
render() {
return (
<View>
<Text> Home Page </Text>
<Button
title="Books"
onPress={this.props.navigation.navigate('Book')}
>
</Button>
<Button
title="Books"
onPress={this.props.navigation.navigate('Electronics')}
>
</Button>
</View>
);
}
}
App.js
import AppContainer from './src/Navigation/AppNavigator';
export default class App extends Component {
render() {
console.log(this.props)
return (
<AppContainer />
);
}
}
When I run the code, it runs directly to the ElectronisScreen.js. How can I make it stay at the Home?

Answer 1

Change your AppNavigator to below.
const AppNavigator = createStackNavigator({
Home: Home,
Book: BooksScreen,
Electronics: ElectronicsScreen
},
{
initialRouteName: 'Home',
});
you have to define your initialRouteName.