Support rendering tab bar and tab screens separately

[brentvatne]

If the tab bar was completely customizable and the screens behaved more like a stack navigator (in other words, if you navigate to a route in it with a certain key and it's not there, then it would add a screen for it and switch to it, roughly) this may solve the common request for dynamic tabs. Similar behavior could be given to drawer.

[compojoom]

we are talking about this here, right? https://react-navigation.canny.io/feature-requests/p/dynamic-routes-for-navigators

What are the current limitations? Why do we need to define all the screens in advance? I'm looking react-router v4 and they seems to have dynamic routing.

[satya164]

I think there's no need to be able to render tab bar separately from tab screens. The tab bar is kinda like the stack navigator header, it just represents what's in the navigation state and will update if navigation state updates (e.g. you add/remove screens). The underlying libs used for tab navigation already support dynamic tabs, it's just React Navigation which doesn't have an API for it.

Adding a new tab when navigating to it is an interesting idea. However, the problem I see is that this API is imperative. At least in my case, the way I used dynamic tabs is that I get some data from the server and render a list of screens based on that.

With an imperative API, it's probably not very straight-forward, e.g. you navigate to a new screen to add it to the list, but what if you want to remove a screen, how do you correct order, because the data can change, so even if there's an API to remove screens, you'll need to imperatively add/remove screens for ordering which is tedious and will lose state. Sorry if I'm misunderstanding the API :)

[satya164]

Closing since dynamic tabs use case is solved by React Navigation 5.