React Navigation Custom Drawer Example

CustomDrawer.js

/* eslint-disable camelcase */
import React, { Component } from 'react'
import { Image, TouchableOpacity, Text, View } from 'react-native'
import AuthActions from '../Redux/AuthRedux'
import { connect } from 'react-redux'
import FBSDK from 'react-native-fbsdk'

import Styles from './Styles/DrawerContentStyles'

import { DrawerItems } from 'react-navigation'

const { LoginManager } = FBSDK

class DrawerContent extends Component {
  onSignOut = () => {
    this.props.logOut()
    LoginManager.logOut()
  }

  render () {
    const { profile } = this.props.profile
    const { first_name, last_name, avatar } = profile

    const profileImage = avatar ? { uri: avatar.medium.url } : null

    return (
      <View style={Styles.container}>
        <View style={Styles.profile}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('EditProfile')
            }}
          >
            <Image source={profileImage} style={Styles.avatar} />
          </TouchableOpacity>
          <Text style={Styles.name}>{`${first_name} ${last_name}` || ''}</Text>
        </View>
        <DrawerItems {...this.props} />
        <TouchableOpacity
          style={Styles.item}
          onPress={() => this.onSignOut()}
        >
          <Text style={Styles.label}>Sign Out</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    logOut: () => dispatch(AuthActions.logOutUserRequest())
  }
}

const mapStateToProps = ({ profile, auth }) => {
  return { profile }
}

export default connect(mapStateToProps, mapDispatchToProps)(DrawerContent)

Could you please publish the content of ./Styles/DrawerContentStyles ?