How to place topTabs in Expo Router?

[AyrDS]

Hello, sorry for the stupid question, but I would like to know how to place topTabs with expo router, since I can only place bottomTabs.

Thanks

[Braden1996]

I got this working on my project, although it's a little fiddly.

If we look at Expo Router's implementation of bottom-tabs, we can see it does two things:

1. Plugs react-navigation's bottom-tab navigator into withLayoutContext.
2. Overrides the tabBarButton option for each screen so that they use the new linking API.

For React Navigation's MaterialTopTabs, we can quite easily do the 1st part but the 2nd is a bit harder. This is because the things we need to override aren't exposed as props, so you'll need to copy some files across just to change a few props.

However, the second part is only really needed if you need to support anchor tags under react-native-web. Just doing the first part was enough for my use-case.