Dynamically creating new screen in react-native

Question

I am trying to create web browser using react-native and react-native-web-view.

One of the crucial function in browser is tab feature, in which users create multiple tabs for different urls and switch between them.

The logic would be to push new screen to the navigation(without statically predefining) every time a user creates a new tab. However, navigation library like react-navigation don't allow that. You have to predefine the screens before loading the corresponding screen. 

I want something in the line of...

const pressNewTab=()=>{
   NavigationActions.navigate({ routeName: `${newRouteName}`, params: { id, ...otherParams } }),
}

Is there any way to achieve the feature?

Answer 1

React Navigation 5 allows you to dynamically add/remove screens: https://next.reactnavigation.org

But for your case, looks like a good way is to use a Stack navigator:

• add new screens using doing navigation.push with different params for each route: (e.g. navigation.push('Tab', { url: '...' })
• then render a custom header which shows the list of tabs

This should achieve the same behaviour as a tabbed mobile browser.