TransWikia.com

Make react native navigator go back to previous screen

Stack Overflow Asked by Marco Martin on January 18, 2021

I have a tab navigator (with 3 screens) then each of these have also 2 or 3 screen each.

TabNavigator => "A,B,C"
A stack => "1,2,3"

Sometimes I’llgo from 1 to 2, and sometimes from B to 2 (for example), I want that when pressing the back button navigates to the previous screens so 1 for first example and B on the seconds. But right now only goes to 1.
Here is my navigation stack:

const RaidsStack = createStackNavigator({
  Raids: { screen: RaidsScreen, }, 
  CreateRaid: { screen: CreateRaidScreen, }, 
  
})
const ChatsStack = createStackNavigator({
  Chats: { screen: ChatsScreen }, 
  ChatRoom: { screen: ChatRoomScreen, }, 
})
const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  EditProfile: { screen: editProfileScreen }, 
  Start: { screen: StartScreen }, 
  
})
const StartStack = createStackNavigator({
  Tabs: { screen: SettingsScreen },
  Register: { screen: editProfileScreen }, 
  Start: { screen: StartScreen }, 
  
})
const TabNavigator = createBottomTabNavigator(
  {
    Raids: { screen: RaidsStack },
    Chats: { screen: ChatsStack },
    Settings: { screen: SettingsStack }
  },
  
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {

      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigation.state.index === 0}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'RaidsStack' }))}>
              <Icon name="egg" />
              <Text>Raids</Text>
            </Button>
            <Button
              vertical
              active={props.navigation.state.index === 1}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Chats' }))}>
              <Icon name="mail" />
              <Text>Chats</Text>
            </Button>
            <Button
               vertical
              active={props.navigation.state.index === 2}
              onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Settings' }))}>
              <Icon name="settings" />
              <Text>Settings</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
)

const AppStack = createStackNavigator({
  Start: { screen: StartScreen },
  Register: { screen: RegisterScreen },
  Tabs: TabNavigator,
  Raids: { screen: RaidsScreen },
  Chats: { screen: ChatsScreen },
  Settings: { screen: SettingsScreen }
}, {
  headerMode: 'none',
})

How to do it? I’m new to react and react navigation.

One Answer

I suggest looking at the documentation https://reactnavigation.org/docs/stack-navigator/ Since you also using nested navigator I suggest looking at this page too https://reactnavigation.org/docs/nesting-navigators/ It’s exactly tells shows you the example of nested navigator with a tab

Hope this material will help you!

Answered by MayWheather on January 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP