CODEWITHSUNDEEP
react-native
leo-boy
leo-boy

Reputation: 77

Confusion with react-navigation with react-navigator 3

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?

Upvotes: 0

Views: 47

Answers (1)

Hardik Virani
Hardik Virani

Reputation: 1755

Change your AppNavigator to below.

 const AppNavigator = createStackNavigator({
          Home: Home,
          Book: BooksScreen,
          Electronics: ElectronicsScreen
        },
    {
          initialRouteName: 'Home',
      });

you have to define your initialRouteName.

Upvotes: 1

Related Questions