Tabs not showing in stack by default

[arslanakram]

Hi @kanzitelli,

Sorry got another puzzling issue, but couldn't find a work-around in your docs.

How do you show the tabs in a stack by default?

Here's my use-case:

My App.tsx:

    <NavioApp initialRouteName={authData ? 'HomeStack' : 'SignInStack'} />

I can't change initialRouteName=HomeStack to initialRouteName=HomeTab which shows the tabs.

My navio.tsx:

   ...
   const navio = Navio.build({
      root: 'HomeStack', 
   });

Similarly, I can't change root:HomeStack to root:HomeTab which shows the tabs.

Neither, could I find an option in NavioScreen options where I could assign the tabs.

Many thanks in advance.

Highly appreciate what you're doing!

[kanzitelli]

Hey @arslanakram! Thank you :)

So in this case you need to define HomeTabs in tabs while building layout.

const navio = Navio.build({
  screens: {Main, Settings, SingIn},
  stacks: {
    MainStack: ['Main'],
    SettingsStack: ['Settings'],
    
    AuthStack: ['SignIn'],
  },
  tabs: {
    HomeTabs: {
      content: {
        Main: { stack: 'MainStack' },
        Settings: { stack: 'SettingsStack' },
      }
    },
  },
  root: 'HomeTabs',
});

Also you must be able to set root through initialRouteName.

<NavioApp initialRouteName={authData ? 'HomeTabs' : 'AuthStack'} />

Most of the use cases with Navio are handled in expo-starter, you can take as a big example of using Navio.

[arslanakram]

I can't believe i missed that. Great! Thank you again @kanzitelli

[arslanakram]

Sorry one more thing @kanzitelli , the order of the tabs defines the default route, any way we can change the default route without changing the order?

I would like the default tab to go to HomeTab instead of MenuTab without changing the order. Please see below:

tabs: {
        HomeTabs: {
            content: {
                MenuTab: {
                    stack: 'MenuStack',
                    options: () => ({
                        title: services.t.do('Tabs.menu'),
                        tabBarIcon: getTabBarIcon('MenuTab'),
                    }),
                },
                HomeTab: {
                    stack: 'HomeStack',
                    options: () => ({
                        title: services.t.do('Tabs.home'),
                        tabBarIcon: getTabBarIcon('HomeTab'),
                    }),
                },
                ProfileTab: {
                    stack: 'ProfileStack',
                    options: () => ({
                        title: services.t.do('Tabs.profile'),
                        tabBarIcon: getTabBarIcon('ProfileTab'),
                    }),
                },
            },
        },
    },
    

[kanzitelli]

@arslanakram you can set navigatorProps.initialRouteName to the desired value.

tabs: {
  HomeTabs: {
    content: {...},
    navigatorProps: {
       initialRouteName: 'ProfileTab', // the same if you would do with <Tab.Navigator initialRouteName="..." />
    },  
  }
}

Hope this helps!

[arslanakram]

Much appreciated!

Thanks for all the help!