1

I'm writing a React Native app, while using react-navigation package for navigating through the app screens.

On my app's home screen, there is a bottom tab bar with about 4-5 buttons, each leading to a different screen. Besides that, all of my app's screens contain a navigation drawer that leads to the rest of the screens. All the screens listed on the bottom tab bar are included in the navigation drawer as well.

App.js:

const App = () => {
    return (
        <NavigationContainer>
            <DrawerNavigator />
        </NavigationContainer>
    )
}

DrawerNavigator.js:

const DrawerNavigation = createDrawerNavigator();

const DrawerNavigator = () => {
    return (
        <DrawerNavigation.Navigator>
            <DrawerNavigation.Screen
                name="ScreenA"
                component={BottomTabNavigator} />
            <DrawerNavigation.Screen
                name="ScreenB"
                component={ScreenB} />
            <DrawerNavigation.Screen
                name="ScreenC"
                component={ScreenC} />
        </DrawerNavigation.Navigator>
    )
}

BottomTabNavigator.js:

const BottomTabNavigation = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <BottomTabNavigation.Navigator>
            <BottomTabNavigation.Screen
                name="ScreenA"
                component={ScreenA} />
            <BottomTabNavigation.Screen
                name="ScreenB"
                component={ScreenB} />
        </BottomTabNavigation.Navigator>
    )
}

My question is how can I sync between them?
Let's say on the navigation drawer I have ScreenA, ScreenB, and ScreenC, while on the bottom tab bar I have only Screen A and Screen B. I want to click on ScreenB in the drawer, and have ScreenB selected as well on the tab bar, and vice versa, clicking on ScreenB on the tab bar and have it selected too on the drawer.

Is such thing possible? How would you implement it?

Ido Naveh
  • 2,442
  • 3
  • 26
  • 57
  • see here https://stackoverflow.com/a/69894146/9161478 – Yoel Nov 20 '22 at 10:30
  • Does this answer your question? [How to combine bottom tab navigator with drawer navigator](https://stackoverflow.com/questions/69889406/how-to-combine-bottom-tab-navigator-with-drawer-navigator) – Yoel Nov 20 '22 at 10:31
  • @Yoel Thanks, but unfortunately the link attached does not answer my question. I already have both DrawerNavigation and BottomBarNavigation, but I'm looking to combine them and have all screens on both – Ido Naveh Nov 21 '22 at 21:35

0 Answers0