Inner routes are not working if required as component

[amrnt]

// Main.js

import App from './containers/App.js';
...
const Routes = () => (
  <Router hideNavBar={true} name="root">
    <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight} />
    <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom} />
    <Schema name="tab" type="switch" icon={TabIcon} />

    <Route name="app" component={App} type="replace" />
  </Router>
);

// App.js

  render(){
    return (
      <Router footer={TabBar} showNavigationBar={true}>
        <Route name="tab1" type="switch" icon={TabIcon} title="Tab #1">
          <Router onPop={ ()=>{console.log("onPop is called!"); return true} }>
            <Route name="tab1_1" component={Dashboard} title="Tab #1_1" />
            <Route name="tab1_2" component={Dashboard} title="Tab #1_2" />
          </Router>
        </Route>
        <Route name="tab2" type="switch" icon={TabIcon} title="Tab #2" hideNavBar={true}>
          <Router onPop={ ()=>{console.log("onPop is called!"); return true} }>
            <Route name="tab2_1" component={Dashboard} title="Tab #2_1" />
            <Route name="tab2_2" component={Dashboard} title="Tab #2_2" />
          </Router>
        </Route>
        <Route name="tab3" component={Dashboard} type="switch" icon={TabIcon} title="Tab #3" />
        <Route name="tab4" component={Dashboard} type="switch" icon={TabIcon} title="Tab #4" />
        <Route name="tab5" component={Dashboard} type="switch" icon={TabIcon} title="Tab #5" />
      </Router>
    )
  }

When I go to any route inside App I'll get something like that:

[pagrawl3]

I have a similar issue, I've defined another router inside a component with other views, It gives me current router = undefined. Can we pass a reference of the parent router to the child router (possibly inside another component) ?

[amrnt]

@pagrawl3 I saw some other closed issues mentioning the same issue here... but it's not really obvious if its fixed in some way... Let's see what @aksonov will add :)

[aksonov]

@amrnt Please provide working repo or change current Example appropriately to reproduce the issue.

[amrnt]

@aksonov here's a gist: https://gist.github.com/amrnt/a70453f8309fd1fd1363

[aksonov]

@amrnt I can't "run" this (it is only js). Why you can't just change Example appropriately?

[amrnt]

@aksonov Here you go https://github.com/amrnt/test-react-native-router-flux-180

[aksonov]

Sure, it will not work because your inner Router doesn't know anything about his parent route. Check #92 for the same type of error. You have to add route={this.props.route} as param to inner Router. Maybe we should add this to docs...

[amrnt]

I'll try this when I'm home. I will close it if this solution is working 😄 thanks!

[amrnt]

route={this.props.route} in the inner params solves the issue.

[amrnt]

@aksonov This not working as the new version 3.x. Here's my new code:

// Main.js

import App from './containers/App.js';
...
<Router createReducer={reducerCreate}>
  <Scene key="modal" component={Modal}>
    <Scene key="root" hideNavBar={true}>
      <Scene key="start" component={Start} initial={true} />
      <Scene key="app" component={App} title="App" type="replace" />
    </Scene>
  </Scene>
</Router>

// App.js

  render(){
    return (
      <Router route={this.props.route}> // ????
        <Scene key="main" tabs={true}>
          <Scene key="tab1"  title="Tab #1" icon={TabIcon}>
            <Scene key="tab1_1" component={Dashboard} title="Tab #1_1" />
            <Scene key="tab1_2" component={Dashboard} title="Tab #1_2" />
          </Scene>
          <Scene key="tab2" title="Tab #2" icon={TabIcon}>
            <Scene key="tab2_1" component={Dashboard} title="Tab #2_1" />
            <Scene key="tab2_2" component={Dashboard} title="Tab #2_2" />
          </Scene>
          <Scene key="tab3" component={Dashboard} title="Tab #3" icon={TabIcon} />
          <Scene key="tab4" component={Dashboard} title="Tab #4" icon={TabIcon} />
          <Scene key="tab5" component={Dashboard} title="Tab #5" icon={TabIcon} />
        </Scene>
      </Router>
    )
  }

[aksonov]

Sorry, it is not supported in v3. Scenes are similar to iOS storyboards. They could be splitted but to sub-storyboards, not classes or something