Header.js

import React from 'react'
import { TouchableOpacity, View, Text, StyleSheet, SafeAreaView } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { w, BLUE } from '../../../constants'

const Header = ({
  detail,
  leftIcon,
  leftColor,
  headerColor,
  navigation,
  title
}) => {
  const { container, viewStyle, textStyle, leftButtonStyle } = styles
  return (
    <SafeAreaView style={container}>
      <View style={[viewStyle, {backgroundColor: headerColor}]}>
        {leftIcon &&
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Ionicons name={leftIcon} style={leftButtonStyle} color={leftColor} />
          </TouchableOpacity>
        }
        <Text numberOfLines={1} ellipsizeMode="tail" style={[textStyle, { paddingLeft: detail ? 10 : null}]}>{title}</Text>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: BLUE,
    zIndex: 1
  },
  viewStyle: {
    flexDirection: 'row',
    height: 90,
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  textStyle: {
    color: '#fff',
    fontSize: 28,
    paddingTop: 50,
    width: w - 40,
    fontFamily: 'AvenirNext-DemiBold'
  },
  leftButtonStyle: {
    paddingTop: 5,
    paddingLeft: 5,
    fontSize: 35
  },
  rightButtonStyle: {
    paddingTop: 24,
    paddingRight: 13,
    fontSize: 33
  }
})

export { Header }