Manage multiple navigators (stack navigator and bottomtabsnavigator) in react navigation

Question

I have a react native application which has got a stack navigator and a bottom tabs navigator. Bottom tabs navigator and stack navigator has common screens between them. Here is the structure:

const ExploreNavigator = createStackNavigator({
    Explore: {
        screen: ExploreScreen
    },
    Read: {
        screen: ReadScreen
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})

Now, if I directly move to Reading screen from Bottom tab navigator and move to CreateImage screen of stack navigator, when I press the back button I come back to default screen that is explore screen?

So, what is the best approach to solve the issue? I know I can create another stack navigator and add the relevant screens. Also, if this approach is followed can I name the stack navigator screens same?

score 2 · Accepted Answer · answered Oct 03 '20 at 08:39

I think this doesn't need keed one screen in the bold stack and bottom tab. So I suggestion like this

const ExploreNavigator = createStackNavigator({
    Tabs: {
        screen: TabsNavigator
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    Explore: {
        screen: ExploreScreen,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})

Nikhil bhatia · Answer 2 · 2020-10-06T14:57:31.273

0

i would do it like this

    const ExploreNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadPrimary: {
        screen: ReadScreen
    },
    CreateImagePrimary: {
        screen: CreateImageScreen
    }
  })

  const ReadNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadSecond: {
        screen: ReadScreen
    },
    CreateImageSecond: {
        screen: CreateImageScreen
    }
  })




  const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadNavigator,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
  })

edited Oct 06 '20 at 14:57

answered Oct 03 '20 at 08:51

Nikhil bhatia

1,297
1
8
9

Hi, suppose if I want to move from ReadScreen to CreateImageScreen, I have two different routeNames depending on from where I navigated from. so, how can I resolve that issue? – Subham Agarwala Oct 03 '20 at 11:45
if you are on ReadTab: navigation.navigate('CreateImageSecond') if on explore: navigation.navigate('CreateImagePrimary') – Nikhil bhatia Oct 03 '20 at 12:45
my approach is good if you want to persist the bottom tabs on create image screen – Nikhil bhatia Oct 04 '20 at 08:09
Hi, so in my usecase there are 2 scenarios: 1. Move from explore screen to read screen to CreateImageScreen. 2. Directly move from read screen to createImageScreen. So, in your case how can I know from where do I land up in ReadScreen and then update the navigator accordingly? – Subham Agarwala Oct 06 '20 at 14:51

Manage multiple navigators (stack navigator and bottomtabsnavigator) in react navigation

2 Answers2