CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Devon wijesinghe
Devon wijesinghe

Reputation: 115

React Native - Tab Navigator issue

I am using react navigation with react native and ...clicking on the selected tab in a tab navigator resets the stack inside that particular tab. Please help me get rid of this behaviour. I only want to go back if the user confirms to go back.

Upvotes: 0

Views: 108

Answers (1)

batatop
batatop

Reputation: 1099

You should nest the Tab Navigatior inside a Stack Navigation.

Example:

const StackNavigator = createStackNavigator(
    {
        TabNavigator: {
            screen: TabNavigator
    }
)

There is another solution that will definetely fix this but it will overcomplicate your app so I don't suggest it if you don't have to use it. You can send your navigation props for each navigation(stack and tab in your case).

Example:

const StackNavigator = createStackNavigator(   {
    Screen1: { screen: ({ navigation }) =>
      <StackComponent
        screenProps={{
          stackNavigator: navigation
        }}
      />
    }
})

const TabNavigator = createTabNavigator(   {
    Screen2: { screen: ({ navigation, screenProps }) =>
      <TabComponent
        screenProps={{
          tabNavigator: navigation,
          stackNavigator: screenProps.stackNavigator
        }}
      />
    }
})

When you do that, you can specifically choose which navigation you want to use. For example: this.props.screenProps.stackNavigation.navigation.goBack().

Upvotes: 1

Related Questions