CODEWITHSUNDEEP
react-nativereact-navigationreact-native-tabnavigator
LiteralMetaphore
LiteralMetaphore

Reputation: 661

How to persist stacked screens when switching between tabs in React Native Navigation

I am using a bottom tab navigator created with createBottomTabNavigator() and passing it several screens, each of which contain their own stack navigation:

const tabNavigator = createBottomTabNavigator({
    TradingStack,
    LendingStack,
    FinanceStack,
    AccountBalancesStack,
    OtherStack,
  },
  {
    tabBarComponent: props => (
      <NavigationFooter />
    )
  }
);

I am passing it my own custom bottom navigator component called <NavigationFooter />. When tabBarComponent is omitted, a built-in bottom tab navigator is used, however I need more functionality than this built-in solution offers. The issue is, when using my custom tab bar, I lose stack persistence in the individual screens. To clarify, let's say my TradingStack screen has several screens that stack on top of it, and I open one of those. When using the default tab bar, if I switch to the LendingStack screen and then back to TradingStack, I will still be on the stacked screen that was pushed on top of the root TradingStack screen.

However, when using my custom tab bar component, moving between these tabs/screens will always bring me to the root of each one instead of bringing me back to the stacked screen that the tab was on before switching away from it. Here's my custom Footer component:

function Footer({navigation}) {
  return(
    <View style={styles.tabBarStyle}>
      <TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')} />
      <TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Lending')} />
      <TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Finance')} />
      <TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('AccountBalances')} />
      <TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TabScreen')} />
    </View>
  );
}

const NavigationFooter = withNavigation(Footer);

As you can see, when one of the TouchableOpacity elements is pressed, I use navigation.navigate() to go to the desired screen, but, as mentioned, this brings me to the root of the screen. I understand that this is basically explicitly telling the app to navigate to a root screen of a tab, but I don't know how to make the tab "remember" the stacked screen it was on before I move away, as is the behavior of the default tab bar.

Upvotes: 4

Views: 2461

Answers (1)

zlatan
zlatan

Reputation: 3971

You can pass the name of the actual stack to navigation.navigate instead of the name of the starting screen on that specific tab, and the stacked screens should persist. So, instead of, for example

<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')}/> //name of the screen

you should pass it

<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TradingStack')}/> //name of the stack

assuming Trading is the starting screen within the TradingStack.

Upvotes: 2

Related Questions