Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you route the same screen from multiple tabs with TabNavigation #444

Closed
mypark opened this issue Feb 22, 2017 · 18 comments
Labels

Comments

@mypark
Copy link

@mypark mypark commented Feb 22, 2017

Say I have a standard tab navigation and all the tab screens can navigate into a ProfileScreen. How should I declare this ProfileScreen in the route? Should I declare a duplicate route under each tab referencing the same screen, or should I nest it in a parent stack navigation?

If I nest the TabNavigation in a StackNavigation, all the tabs can navigate to the ProfileScreen, but the tab navigation goes away from the screen - and I'd like to keep that tab navigation on screen.

If I nest a ProfileScreen inside a StackNavigation in each Tab, then I get strange behavior if I name the routenames the same in each tab, otherwise I'll have to name the routes with similar names like HomeProfileScreen, PhotosProfileScreen, etc... It's a bit fragile as any universal component that appears under multiple tabs will have a messy time figuring out which copy of the route to navigate to.

@grabbou

This comment has been minimized.

Copy link
Collaborator

@grabbou grabbou commented Feb 23, 2017

I don't think we have an easy way to push an arbitrary scene without it being declared in a router. That indeed makes it a bit cumbersome to declare e.g. ProfileScreen so many times.

@jemmyphan

This comment has been minimized.

Copy link

@jemmyphan jemmyphan commented Apr 16, 2017

have you found the better approach for this case? @mypark

@WillyRamirez

This comment has been minimized.

Copy link

@WillyRamirez WillyRamirez commented Jun 13, 2017

Any update on this? I'm having the same issue

@joncursi

This comment has been minimized.

Copy link

@joncursi joncursi commented Sep 20, 2017

Same issue here, as per the issue linked above

@joncursi

This comment has been minimized.

Copy link

@joncursi joncursi commented Sep 20, 2017

It's also not just an issue of declaring the same screen with multiple names. If your UI components can render in more than one tab, then your UI components also have to take on more logic to figure out what tab you're in so they can pick the right screen variant to push to. Very very brittle code.

@kelset

This comment has been minimized.

Copy link
Contributor

@kelset kelset commented Oct 8, 2017

To be honest I find it hard to find a case where you may have multiple screens/tabs navigating to a same new screen - and still want to keep the tabbar on the bottom. It sort of creates a "dissonance" in the UX if multiple places lead to the same end... but still sort of different since the tabbar on bottom says you are in the same place :/

That said, if any of you can formulate better as a feature request this feature it would be awesome.


Edit: this issue seems to have a working solution for the issue: #586 so @mypark let me know if I can close this issue.

@joncursi

This comment has been minimized.

Copy link

@joncursi joncursi commented Oct 8, 2017

@kelset do you use the Instagram app or Facebook app? I disagree. I think you allow the user to arrive at the destination using whichever route they please, rather than forcing them to use predefined pathways.

@kelset

This comment has been minimized.

Copy link
Contributor

@kelset kelset commented Oct 8, 2017

I do use them both, can you provide me on an example of a navigation that from two different tabs brings you to the exact same "next screen" while keeping the tabbar?

Because as far as I can tell, they implement the solution OP didn't want to go for which is having a nested navigator per each Tab.

That said this is a UX talk, not a feature request. So out of the scope for a GitHub issue.

@joncursi

This comment has been minimized.

Copy link

@joncursi joncursi commented Oct 8, 2017

Facebook, Instagram, Spotify... most of the popular apps that I use utilize this paradigm of being unopinionated on how the user gets to the end destination. Example with screenshots: #2614

@joncursi

This comment has been minimized.

Copy link

@joncursi joncursi commented Oct 8, 2017

If you can show me a code sample on how to achieve this with react navigation, I will be thrillled. But this is UX I want, but haven’t been able to get past the limitations of react navigation in order to implement it

@kelset

This comment has been minimized.

Copy link
Contributor

@kelset kelset commented Oct 14, 2017

As I already said, it looks quite clear to me that they achieve the "paradigm of being unopinionated on how the user gets to the end destination" by using nested navigators per each tab (which is easily provable in Instagram by navigating to a profile, then changing tab, going to another profile, then going back to the original tab).

@HristoEftimov

This comment has been minimized.

Copy link

@HristoEftimov HristoEftimov commented Dec 7, 2017

My routing looks something like this:

 main: {
    screen: TabNavigator({
        all: {
            screen: StackNavigator({
                allEvents: { screen: AllEventsScreen },
                details: { screen: EventDetailsScreen },
            }
        },
        upcoming: {
            screen: StackNavigator({
                allUpcoming: { screen: AllUpcomingEventsScreen },
                details: { screen: EventDetailsScreen },
            }
        }
    }),
 }

On each tab I am sharing the same screen component with the same key. It works ok for now 😄

@kelset

This comment has been minimized.

Copy link
Contributor

@kelset kelset commented Dec 7, 2017

@HristoEftimov that's an interesting "mixed" approach; you sort of duplicate the EventDetailsScreen screen and keep them in sync, basically, right? 🤔

@HristoEftimov

This comment has been minimized.

Copy link

@HristoEftimov HristoEftimov commented Dec 8, 2017

@kelset yes, that's right 👍

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Feb 7, 2018

please create a feature request for this if you think it is important: https://react-navigation.canny.io/feature-requests

@WillyRamirez

This comment has been minimized.

Copy link

@WillyRamirez WillyRamirez commented Feb 9, 2018

@nthgol

This comment has been minimized.

Copy link

@nthgol nthgol commented Mar 14, 2018

@HristoEftimov did you have any issues with having the same key (i.e. navigation confused between tabs?)

@HristoEftimov

This comment has been minimized.

Copy link

@HristoEftimov HristoEftimov commented Mar 14, 2018

@nthgol No, I don't have any problems. To avoid issues with the same key ( tab key ), you can use the following action:

const upcomingNavigationAction = NavigationActions.navigate({
    routeName: 'upcoming',
    action: NavigationActions.navigate({
        routeName: 'details',
        params: {
            id: eventId,
        },
    }),
});

this.props.navigation.dispatch(upcomingNavigationAction);
@react-navigation react-navigation locked and limited conversation to collaborators May 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
9 participants
You can’t perform that action at this time.