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

Implement more `backBehavior` options for TabRouter #678

Closed
satya164 opened this issue Mar 14, 2017 · 3 comments

Comments

@satya164
Copy link
Member

@satya164 satya164 commented Mar 14, 2017

Right now when you press back in a tabs navigator, it goes back to home tab. I'd expect it to go to the previous tab I had visited instead. It's a bit tricky for tabs, and different apps handle it differently.

Currently two back behaviour options are implemented, initialRoute and none.

Here's a summary of different patterns used in various apps. I think we need to implement the behaviour used by instagram app.

Existing patterns

NOTE: all code here are just for explaining the intent and have nothing to do with the actual router code.

Don't handle back button

I don't like this pattern very much, but it's useful if you have a huge number of tabs. Though a huge number of tabs is not a good UX either.

Used by: YouTube

Go to the home tab

This is the current behaviour.

handleBack() {
  if (currentIndex !== 0) {
    const previousTab = getTabWithindex(0);
    return getStateForTab(previousTab);
  }
}

Used by: Facebook, Twitter

Go to the tab which comes before the current

It's very simple, but probably not very intuitive.

handleBack() {
  if (currentIndex > 0) {
    const previousTab = getTabWithindex(currentIndex - 1);
    return getStateForTab(previousTab);
  }
}

Used by: NA

Keep a history of tabs

Sounds ok, but probably not the best UX. User can keep tapping tabs again and again, so you have to keep pressing back a lot of times before the parent navigator gets to handle the back button.

onNavigate(route) {
  history.push(route);
}

handleBack() {
  if (history.length) {
    const previousTab = history.pop();
    return getStateForTab(previousTab);
  }
}

Used by: NA

Keep a history of tabs, and de-duplicate

A modified version of the previous approach. We keep an array of previous tabs, but remove the duplicate tab from the stack if it existed previously. So you never visit the same tab twice when pressing back.

It's not very accurate because you don't go back to the exact tabs you came from. But nobody really remembers more than last 1-2 screens, so it should be fine.

onNavigate(route) {
  const currentIndex = history.findIndex(r => r.key === route.key);
  if (currentIndex > -1) {
    history.splice(currentIndex, 1);
  }
  history.push(route);
}

handleBack() {
  if (history.length) {
    const previousTab = history.pop();
    return getStateForTab(previousTab);
  }
}

Used by: Instagram

@xilonxiao

This comment has been minimized.

Copy link

@xilonxiao xilonxiao commented Mar 16, 2017

I' m really looking forward to getting this feature. While implementing my tabnavigator i was wondering why this didn' t come right out of the box.

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Jan 23, 2018

this is seems really reasonable @satya164 - do you want to pull this out into a rfc? going to close as i'm trying to keep feature requests outside of issues. moved to https://react-navigation.canny.io/feature-requests/p/implement-additional-backbehavior-options-for-tabrouter but yeah a rfc from this would be awesome

@brentvatne brentvatne closed this Jan 23, 2018
@satya164

This comment has been minimized.

Copy link
Member Author

@satya164 satya164 commented Jan 24, 2018

Ok. Started it here react-navigation/rfcs#2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.