Search code examples
react-nativenavigation-drawer

how to add elements at Drawer Header - react-native

I am new to react native, I am trying to insert elements into the drawer header, my idea is to remove the title from the screen and create a new title with onPress and add two more elements, but I can't find the properties for this. thanks for reading me.

my code

<Drawer.Navigator
            drawerContent={props => <CustomDrawer {...props} />}
            screenOptions={{
                headerStyle: { backgroundColor: '#6A994E' },
                headerTitleStyle: { color: '#fff' },
                headerTintColor: '#fff',
                drawerLabelStyle: { marginLeft: -25, fontSize: 15 },
                drawerActiveBackgroundColor: '#6A994E',
                drawerActiveTintColor: '#fff',
                headerRight: (props) => { <HeaderComponent {...props} /> }
            }}
        >
            <Drawer.Screen name='Sales' component={SalesScreen} options={{ drawerIcon: SalesIcon}} />
            <Drawer.Screen name='Inventory' component={InventoryScreen} options={{ drawerIcon: InventoryIcon }} />
        </Drawer.Navigator>

mockup

enter image description here

Solution

  • Just replace the current title using headerTitle and other elements using headerRight. Something like this:

    screenOptions={{
...
  headerTitle: (props) => (
    <Pressable onPress={...}>
      <Text>New title</Text>
    </Pressable>
  ),
  headerRight: (props) => {
    return <HeaderComponent {...props} />;
  },
}}