Twitter like navigation layout

[SumitR9910]

Can anyone help me implement this type of navigation layout where a non-primary tab bar is nested inside of a primary tab bar item, as show above in the Twitter app (the for you and following tabs nested inside the main home tab).

I was not able to replicate this, as nesting a non primary tab bar inside of a primary tab bar item, simply does not render it.

[grahammendick]

Hi @SumitR9910 nice to hear from you. I've actually written a twitter sample with a non-primary TabBar on the Notifications scene inside a primary TabBar.

Maybe the problem you're having is that TabBarItems can only have a single (native) child. If that child is a View you should set the collapsable prop to false so that you don't accidentally end up with more than one child on the native side.

[SumitR9910]

Thanks for the fast reply.

I solved this problem by rendering the non-primary tab bar inside of a stack of its own i.e a stack nested inside of the tabBar item which contains the non-primary tab bar. It is working as intended.

Although styling the tabBar has some issues, like the unselectedTintColor prop does not work (I am testing on android).
I tried changing the theme in the styles.xml to Material 3 which caused build issues in expo.
Do you have any idea why this is happening?

I am trying to migrate from Expo Router, so sorry if I seem clueless.

[grahammendick]

I'm glad you got it working.
I set the unselectedTintColor="red" on both primary and non-primary in the twitter sample and you can that both work in screenshot below. Maybe you can try that in the twitter sample to check that it works for you, too?

[grahammendick]

@SumitR9910 are you getting on ok or are you stuck with anything?