No docs on onRequestChangeTab and onReset

[mihir0x69]

Is there any documentation other than this on onRequestChangeTab and onReset.

What I want to do is just call this.props.history.push('/my/path') from a tab. But it throws an error saying- Invariant violation: there should always be only one screen active, not 0.

How do I navigate to a different route from a Tab?

[LaszloDev]

You can see the usage in the App.js of the example/huge on line #62

From my understanding its used when a gets activated and want to set a sub route for the tabs child component. Here /profile/likes and /profile/bookmarks, so when the is active onRequestChangeTab will be called and you can set the sub route so a active tab can be determined.

Can you past a bit more of the code so maybe you need something else?

[mihir0x69]

@LaszloDev Hi, thanks for pointing me to the example app. I think the example works because the base path remains the same- /profile/. What if I want to navigate away to a completely different route, say /settings/account?

[LaszloDev]

In general changing the route with react-router work by calling history.push("/new/route") or rendering <Redirect to="/new/route"/>. When you want, for example, to have a button with a callback you can call history.push("/new/route") to change the route.
I do have some issues with changing the route together with <Tabs />, but didn't had time to look more into it. Can you explain a bit more what you are trying to archive?

[mihir0x69]

@LaszloDev My bad! I was trying to navigate to a route /profile, but inside the Profile component there was a Navigation component, with 2 routes. I only had to specify a fully qualified path. I never bothered to open Profile. Thanks for entertaining me. Closing.

[mihir0x69]

But the docs are still missing. If you want I can write something up and send a pr.

[LaszloDev]

Would be great!

[LeoLeBras]

@LaszloDev Thanks for your replies !
@KarandikarMihir Would be great !

---

To explain the behaviour of onRequestChangeTab let's take the following example:

<Tabs>
  <Tab path="/" component={Index} />
  <Tab path="/(profile|bookmarks)" component={ProfileBookmarks} />
</Tabs>

From the tabbar, if you click on the 2nd tab, react-router-navigation is not able to determine the route of the history to push because /(profile|bookmarks) is a regex. You are then required to set the action history.replace(pathname: string) with the prop onRequestChangeTab() to set whether you want to go to /profile or /bookmarks.

So you have to do the following:

  <Tabs>
    <Tab path="/" component={Index} />
    <Tab
      path="/(profile|bookmarks)"
      component={ProfileBookmarks}
      onRequestChangeTab={() => history.replace('/profile')}
    />
  </Tabs>

---

onReset prop is a callback which resets the current tab. If you're using a <FlatList /> inside a <Tab /> component, onReset prop can be used to scroll to the top of the list if you tap twice to tab. Take a look at this example ! Another use case with a tab system inside a <Tab />.

[mihir0x69]

@LeoLeBras Cool. I'll try to finish this by tomorrow!

[LeoLeBras]

Great !

[LeoLeBras]

@KarandikarMihir Any update on this work?