CODEWITHSUNDEEP
react-nativenativereact-navigationreact-navigation-stack
theCoder
theCoder

Reputation: 751

How to set a default screen Route in react Tab Navigation in React Native

I want to load dashboard to be active tab in react Native bottom tab. Navigation whenever dashboard is loaded but whenever I move to dashboard it moves to inbox screen which is the first element in my react Bottom Tab Navigation. Is there any way to create a default screen whenever screen bottom tabs is used?

The code I am using for bottom navigation is

 dashboard: {
        screen: createBottomTabNavigator({
            inbox: {
                screen: Chat,
                navigationOptions: ({ navigation }) => ({
                    title: 'Inbox',
                }),
            },
            favourite: {
                screen: Favourite,
                navigationOptions: ({ navigation }) => ({
                    title: 'Favourite',
                }),
            },
            dashboard: {
                screen: Dashboard,
                navigationOptions: ({ navigation }) => ({
                    title: 'Home',
                    initialRouteName: 'dashboard'
                }),
            },
            setting: {
                screen: SettingScreen,
                navigationOptions: ({ navigation }) => ({
                    title: 'Setting',
                }),
            },
            survey: {
                screen: NutritionistSurvey,
                navigationOptions: ({ navigation }) => ({
                    title: 'Survey',
                }),
            },
        }),
        navigationOptions: ({ navigation }) => ({
            title: 'Dashboard',

        }),


    },

Even though the navigation works completely fine I just need a way to load dashboard screen whenever the user navigates to Dashboard.

Upvotes: 13

Views: 25728

Answers (3)

Aniruddha
Aniruddha

Reputation: 338

For those facing this issue in 2022, v6.x of React Navigation, the correct way is to specify the initalRouteName prop in the Navigator component. Link to docs

Upvotes: 8

Vishal Dhanotiya
Vishal Dhanotiya

Reputation: 2638

You can add initialRouteName in createBottomTabNavigator I will solve your problem

 const MyApp = createBottomTabNavigator(
      {
        Inbox: {
          screen: Chat,
          navigationOptions: ({ navigation }) => ({
            title: "Inbox"
          })
        },
        Favourite: {
          screen: Favourite,
          navigationOptions: ({ navigation }) => ({
            title: "Favourite"
          })
        },
        Dashboard: {
          screen: Dashboard,
          navigationOptions: ({ navigation }) => ({
            title: "Home"
          })
        }
      },
      {
        initialRouteName: "Dashboard"
      }
    );

Upvotes: 19

sanjar
sanjar

Reputation: 1101

You have 2 screens named dashboard, the bottomTabNavigator and the Dashboard screen, so when you try to navigate to dashboard react-navigation will navigate to the first tab of your bottomTabNavigator.

Rename the bottomTabNavigator, and it should work :

 dashboardTabs: {
        screen: createBottomTabNavigator({
            inbox: {
                screen: Chat,
                navigationOptions: ({ navigation }) => ({
                    title: 'Inbox',
                }),
            },
            favourite: {
                screen: Favourite,
                navigationOptions: ({ navigation }) => ({
                    title: 'Favourite',
                }),
            },
            dashboard: {
                screen: Dashboard,
                navigationOptions: ({ navigation }) => ({
                    title: 'Home',
                    initialRouteName: 'dashboard'
                }),
            },
            setting: {
                screen: SettingScreen,
                navigationOptions: ({ navigation }) => ({
                    title: 'Setting',
                }),
            },
            survey: {
                screen: NutritionistSurvey,
                navigationOptions: ({ navigation }) => ({
                    title: 'Survey',
                }),
            },
        }),
        navigationOptions: ({ navigation }) => ({
            title: 'Dashboard',
        }),
    },

Upvotes: 0

Related Questions