react-router-navigation
react-router-navigation copied to clipboard
winoteam
No docs on onRequestChangeTab and onReset
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?
You can see the usage in the App.js of the example/huge on line #62
From my understanding its used when a <Tab /> gets activated and want to set a sub route for the tabs child component. Here /profile/likes and /profile/bookmarks, so when the <Tab component={Profile} /> 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?
@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?
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?
@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.
But the docs are still missing. If you want I can write something up and send a pr.
@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 />.
