Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 375
theCoder Avatar asked Apr 08 '19 10:04

theCoder


People also ask

How do I customize tab navigation in React Native?

Add icons to the tab bar To add icons to each tab, first import the Icon component from react-native-vector-icons library inside the navigation/TabNavigator/index. js file. For this example, let's use AntDesign based icons. // after other import statements import Icon from 'react-native-vector-icons/AntDesign';

What is initialRouteName in React Native?

initialRouteName - Sets the default screen of the stack.


1 Answers

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

like image 170
FrankenCode Avatar answered Sep 21 '22 04:09

FrankenCode