Home > front end >  Tab-navigation ios / android Differenet logic?
Tab-navigation ios / android Differenet logic?

Time:08-15

I got into a discussion with a coworker, he had registered a bug where one of the sub-menus was stuck in the current state when navigating to a different tab and back again.

To summarize his explanation of the bug;

  1. Navigate to the foo menu, and on the foo page, press a link. -> This navigate to a sub-menu within this tab.
  2. Navigate to another tab and then back to the foo tab. -> Previous navigation to this link is still present ( the tab hasn't reset to the default state ).

This is precisely the wanted behavior, which I'm used to from ios apps( I am an IOS user ).

He is an android user and suggest the opposite, he want it to reset.

I use react-navigation to display the tabs, and this is the default behavior...

Do we need to invest time into creating an android version? or do the android users know about this "feature"?

CodePudding user response:

You could add a reset (resetOnBlur) whenever the Tab changes I have something like this in my app - where I create my BottomTabNavigator:

  {
    backBehavior: "history",
    resetOnBlur: true,
  }

its pretty straight forward and easy to implement.

But also maybe this could help you: Resetting the navigation stack for the home screen (React Navigation and React Native)

Edit (my setup):

const Tabs = createBottomTabNavigator(
  {
    Eintragen: EntryStack, 
    Übersicht: CheckStack,
    Monatsbericht: {
      screen: MonatsberichtComponent,
      navigationOptions: {
        headerTitle: "Monatsbericht abschließen",
      },
    },
    Logout: Logout,
  },
  {
    backBehavior: "history",
    resetOnBlur: true, 
    tabBarOptions: {
      labelStyle: {
        fontSize: 12,
        color: "black",
      },
      activeTintColor: "red",
      activeBackgroundColor: "#ccc",
    },
  }
);
  • Related