React Native Open Drawer with Button

668 views Asked by At

I have a Drawer Navigator with some Screens. One of the Screens is a TabNavigator. Now I want to implement a HamburgerMenu-Button to open the drawer in all of the Tab-Navigator Screens.

Where do I implement that Button? In the TabNavigator or its child Screens or in the Drawer Screens?

Here are a few Code Snippets:

DrawerNavigator:

export default class DrawerMenu extends React.Component {
 render() {
  return (
   <Drawer.Navigator initialRouteName='Home'>
    <Drawer.Screen name='Home' component={TabNavigator} />
    <Drawer.Screen name='About Us' component={AboutUsScreen} />
    <Drawer.Screen name='About the App' component={AboutTheAppScreen} />
    <Drawer.Screen name='Impressum' component={ImpressumScreen} />
   </Drawer.Navigator>
  );
 }
}

TabNavigator:

const Tab = createBottomTabNavigator();
const TabNavigator = () => {
 return (
  <Tab.Navigator tabBar={(props) => <TabBar {...props}></TabBar>}>
   <Tab.Screen
    name='Tab1'
    component={Tab1}
    initialParams={{ icon: 'info' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab2'
    component={Tab2}
    initialParams={{ icon: 'circle-o-notch' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab3'
    component={Tab3}
    initialParams={{ icon: 'home' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab4'
    component={Tab4}
    initialParams={{ icon: 'glass' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab5'
    component={Tab5}
    initialParams={{ icon: 'road' }}
   ></Tab.Screen>
  </Tab.Navigator>
 );
};

single Screen in TabNavigator:

const Tab1 = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Tab1</Text>
        </View>
    );
};

Any help is appreciated.

1

There are 1 answers

0
ableryder On BEST ANSWER

In the end it was an easy answer. We just had to give through the props. (I think)

single Screen in TabNavigator:

const Tab1 = ({navigation}) => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Tab1</Text>
        </View>
    );
};

That way we could easily use the navigation.openDrawer function in an onPress event.