Question: Tab bar implementation

[tristangodfrey]

I'm not quite sure how I should implement a tab bar to allow navigation between a small group of routes.

Should I achieve this by nesting a Router inside of the main router? So I'll have a single tab-router route, which loads my tab-bar + router component. Or is there a better way of doing this?

[skizzo]

@tristangodfrey I tried this approach by creating a Router component inside a View, but I don't know how to access my 2 routers's toRoute() or toBack() functions.. Were you able to work it out?

[tristangodfrey]

@skizzo This is roughly how I solved it, just a bunch of snippets but it should give you the general idea

//This is how I give my nested routes access to the main router `toRoute` function

const createTabs = (toRoute) => {
  return [{
      route: {
        component: Dashboard,
        name: "Home",
        passProps: {
          onQuizListPress: () => toRoute(quizList),
          onTaskListPress: () => toRoute(taskList),
        },
      },
      iconName: "home",
    }];
}

//This is the container component that holds our tabBar + nested router

class Container extends Component {

  //This is for changing the route of our nested router
  _onTabPress(tab) {
    //This worked for me, don't think I was able to access the default
    //router methods so I used the navigator
    this.refs.router.refs.navigator.replace(tab.route)
  }

  const tabs = createTabs(toRoute);

  render (
     return (
      <View>
        <Router ref="router" />
        <TabBar tabs={tabs} onTabPress={(tab) => this._onTabPress(tab)} />
      </View>
    );
  )

}

[charpeni]

I will need this feature soon, I'll look it in a few days and I'll be back with a feedback.

Using method of Navigator with refs will works, maybe our functions should be accessible too.

Thanks for the snippets @tristangodfrey.

[cpjolicoeur]

As a quick "fix" in our fork we just ended up exposing the methods directly: mojotech@7d268d7

And in a stripped down for demo our router w/ tabbar follows similarly to your example

<View>
  <Router .../>
  <TabBar ... />
</View>

[tristangodfrey]

Thanks @cpjolicoeur , should we document this approach/add an example or just leave this issue up for reference? Would be happy to contribute if needed.

[cpjolicoeur]

we'd want @charpeni and other's opinions on it. Exposing the methods (or a minimal subset of methods) works fine for us. I never formally submitted a Pull Request back to the mainline project with those changes as I didn't know if it was something they were interested in.

But maybe a discussion is in order on it.

[charpeni]

I think it's a great idea to expose these methods.

Would be happy to contribute if needed.

@tristangodfrey It would be appreciate 😃

@SEthX Any thoughts?

[cpjolicoeur]

I'll submit a PR with our exposing changset for review/discussion.

[charpeni]

That was fast!

[charpeni]

@tristangodfrey Does the documentation is still in planning?

[akoshman]

<View>
  <Router .../>
  <TabBar ... />
</View>

If I wrap Router by View then nothing appears on the screen.
Can anyone write some instructions how to do this?
And where do you get TabBar component?
Thanks.