Custom Drawer

import React, { Component } from 'react'
import {NavigationActions} from 'react-navigation';
import { StyleSheet, View, Text } from 'react-native';

export class DrawerContentComponents extends Component {
    navigateToScreen = ( route ) =>(
        () => {
        const navigateAction = NavigationActions.navigate({
            routeName: route
        });
        this.props.navigation.dispatch(navigateAction);
    })
    render() {
        return (

                <View style={styles.container}>
            {/* <View style={styles.headerContainer}>
                <ImageBackground source={require('../../assets/drawer-cover.png')} style={{flex: 1, width: 280, justifyContent: 'center'}} >
                    <Text style={styles.headerText}>Header Portion</Text>
                    <Text style={styles.headerText}>You can display here logo or profile image</Text>
                </ImageBackground>
            </View> */}
            <View style={styles.screenContainer}>
                <View style={[styles.screenStyle, (this.props.activeItemKey=='home') ? styles.activeBackgroundColor : null]}>
                    <Text style={[styles.screenTextStyle, (this.props.activeItemKey=='home') ? styles.selectedTextStyle : null]} onPress={this.navigateToScreen('home')}>Home</Text>
                </View>
                <View style={[styles.screenStyle, (this.props.activeItemKey=='dashboard') ? styles.activeBackgroundColor : null]}>
                    <Text style={[styles.screenTextStyle, (this.props.activeItemKey=='dashboard') ? styles.selectedTextStyle : null]} onPress={this.navigateToScreen('dashboard')}>Dashboard</Text>
                </View>
                
            </View>
        </View>
           
        )
    }
}

export default DrawerContentComponents


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
    },
    headerContainer: {
        height: 150,
    },
    headerText: {
        color: '#fff8f8',
    },
    screenContainer: { 
        paddingTop: 20,
        width: '100%',
    },
    screenStyle: {
        height: 30,
        marginTop: 2,
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%'
    },
    screenTextStyle:{
        fontSize: 20,
        marginLeft: 20, 
        textAlign: 'center'
    },
    selectedTextStyle: {
        fontWeight: 'bold',
        color: '#00adff'
    },
    activeBackgroundColor: {
        backgroundColor: 'grey'
    }
});

const AppStack = createDrawerNavigator({
  home: {
    screen: HomeScreen,
  },
  dashboard: {
    screen: UploadAnimalImage,
  }, 
},{
  contentComponent: DrawerContentComponents,
})

import React, { Component } from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import { Asset } from 'expo-asset';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Provider as PaperProvider } from 'react-native-paper';

import HomeScreen from "./app/components/HomeScreen";
import UploadAnimalImage from './app/components/UploadAnimalImage';
import  DrawerContentComponents from './app/components/settings/DrawerContentComponents';




class App extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }
  async componentWillMount() {
    await Font.loadAsync({
      // Roboto: require("native-base/Fonts/Roboto.ttf"),
      // Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
    this.setState({ loading: false });
  }
  render() {
    if (this.state.loading) {
      return (
        <PaperProvider>
          <AppLoading />
          </PaperProvider>
      );
    }
    return (
      <PaperProvider>
        <MyApp />
        </PaperProvider>
      
    );
  }
}
 
export default App;


const AppStack = createDrawerNavigator({
  home: {
    screen: HomeScreen,
  },
  dashboard: {
    screen: UploadAnimalImage,
  }, 
},{
  contentComponent: DrawerContentComponents,
})
 
const MyApp = createAppContainer(AppStack);