CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab
Subham Agarwala
Subham Agarwala

Reputation: 87

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

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?

Upvotes: 1

Views: 672

Answers (2)

Nikhil bhatia
Nikhil bhatia

Reputation: 1397

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"
        }
    }
  })

Upvotes: 0

Anhdevit
Anhdevit

Reputation: 2104

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"
        }
    }
})

Upvotes: 2

Related Questions