Back button doesn't work if not on tab 1 when implementing tabs in a subcomponent

[chetstone]

When tabs are implemented in a subcomponent of the main router, the Back button in the TabView screen only works if you're on Tab 1. Once you switch to a different tab, clicking Back triggers the error: Cannot pop navigator with less than 1 screens. Example code is here

[aksonov]

The problem that View as parent container doesn't pass 'navigator' property to his children, so navigator's hierarchy is lost. I'm not sure how to fix it, maybe we need to declare it as not bug, but 'feature' - i.e. require to avoiding inner Routers inside React Views...

However I will try to fix it using react 'context' by passing router instance as 'current' router, maybe it will work.

[aksonov]

From other point of view, context is not good idea to use (like 'global' vars), so maybe it will be more correct to do deep parsing of routers/routes, i will think.

[aksonov]

Okey, it doesn't have any sense to built some 'smart' here, just by-pass props to children to make it work

          <Router footer={TabBar} showNavigationBar={false} navigator={this.props.navigator} schemas={this.props.schemas}>

[chetstone]

This works. Thanks. Any reason why <Router> couldn't automatically pass its props?

Also, perhaps I need to file another issue but when the tabs are in a subcomponent and tabs are switched, they don't really switch, they are pushed. A back button appears in the Title bar and by clicking it you can backtrack through the tabs you pushed. This doesn't happen when the tabs are part of the main component, as in your example: Each tab replaces the previous one, and I believe that is the expected behaviour for tabs.

[aksonov]

@chetstone What do you mean - Router couldn't automatically pass its props? It already does - but View will not pass everything to its children and Router is not able to check all children (including children of children) without instantiation of all 'component' during launch recursively. It will slow down performance significantly - all UI screens have to be created during startup.

[aksonov]

I hope later we will be able to replace it within your customized UI screen:

          <Router footer={TabBar} showNavigationBar={false} parent={this.props.route}>

[chetstone]

What do you mean - Router couldn't automatically pass its props?

Ah, I see where I was confused. I have

<Route name="tabbar" component={TabContainer} />

and in another file <TabContainer/> has:

return (  <Router footer={TabBar}> ... )

The problem we need to work around is that TabContainer doesn't pass its props to Router. Gotcha.

I'm not sure if I understand this comment though:

I hope later we will be able to replace it within your customized UI screen:

Are you talking about a contemplated change to react-native-router-flux or are you suggesting another way for users to work around this issue?

[aksonov]

Never mind. I was the thinking about some refactoring

Pavel.

15 дек. 2015 г., в 19:50, Chester Wood notifications@github.com написал(а):

What do you mean - Router couldn't automatically pass its props?

Ah, I see where I was confused. I have

and in another file has:

return ( ... )
The problem we need to work around is that TabContainer doesn't pass its props to Router. Gotcha.

I'm not sure if I understand this comment though:

I hope later we will be able to replace it within your customized UI screen:

Are you talking about a contemplated change to react-native-router-flux or are you suggesting another way for users to work around this issue?

—
Reply to this email directly or view it on GitHub.