Header for DrawerNavigation with react-navigation

Question

I'm on ReactNative and i'm using native-base and react-navigation npm.

I got this and my question is how I can have a header, up to the button "Home", I looked into the documentation of react-navigation but it's not really cleared.

https://github.com/react-community/react-navigation/blob/master/docs/api/navigators/DrawerNavigator.md

Like this (the image is fix, it's just to put a logo here)

Answer 1

You can implement custom content component for drawer. There you can also simply render navigation items using DrawerItems. For example:

import React from 'react'
import { Text, View } from 'react-native'
import { DrawerItems, DrawerNavigation } from 'react-navigation'

const DrawerContent = (props) => (
  <View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 140,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 30 }}>
        Header
      </Text>
    </View>
    <DrawerItems {...props} />
  </View>
)

const Navigation = DrawerNavigator({
  // ... your screens
}, {
  // define customComponent here
  contentComponent: DrawerContent,
})

Answer 2

For Drawer Navigation, you Can add Your own Header & Footer and Make Your Own Styles with contentComponent Config:
First import { DrawerItems, DrawerNavigation } from 'react-navigation' Then

Header Before DrawerItems:

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView> .

Footer After DrawerItems:

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView> .