How to add a button inside a react navigation drawer

Question

I need to add a logout button in a drawer with the React Navigation drawer tried doing this:

<Drawer.Navigator>
    <Drawer.Screen name="Sales" children={CreateHomeStack} />
    <Drawer.Screen name="Items" component={ItemsScreen} />
    <Drawer.Screen name="Categories" component={CategoriesScreen} />
    <Button>
      <Text>LOGOUT</Text>
    </Button>
</Drawer.Navigator>

But I get an error saying

A navigator can only contain screen components...

so how can I add buttons to a Drawer Navigator?

Answer 1

With respect to 5.x documentation you need to define custom component and override/pass it with drawerContent props where you can push your screen routes plus your custom route items.

Here is code how to add custom ReactElement/Component:

<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
      </DrawerContentScrollView>
    )
  }}>
    <Drawer.Screen name="Home" component={Home}/>
    <Drawer.Screen name="New Project" component={NewProject} />
  </Drawer.Navigator>

Here you are overriding default drawer container with you component code

This(<DrawerItemList {...props} />) line of code render you screen's And rest is your area where custom code for drawer container will added.