Currently as I am using Redux, so react-native-router-flux is a natural choice of Navigation. (I don't mind using another library if it would be easier)
Problem: Imagine an iPad app, when it is vertical, there will be 3 tabs for 3 screens. When it is horizontal, there will only be 2 tabs, and the landing screen will be "split" in the middle to show the first 2 screens.
What I think: I guess I have to duplicate the Routers -- one for portrait and one for landscape. Duplicate the (responsive) screens (1,2,3) and give them different keys to avoid collision between 2 routers...
Question: Is there a way to minimize duplication? I think there should be one which I create an extra screen, say index-landscape
and the number of tabs and the component to be rendered can be controlled programmatically instead of a full duplication of <Router>
.