header.js

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'

const Header = ({ 
  navigation, 
  colorLeft,
  leftButton, 
  leftIcon, 
  title, 
  colorRight,
  rightButton, 
  rightIcon, 
  screen,
  item 
}) => {
  return (
    <View style={styles.container}>
      {leftButton === true &&
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Ionicons name={leftIcon} style={styles.leftButton} color={colorLeft} />
        </TouchableOpacity>
      }
      <Text style={styles.title}>{title}</Text>
      {rightButton === true &&
        <TouchableOpacity onPress={() => navigation.navigate(screen, (item)) }>
          <Ionicons name={rightIcon} style={styles.rightButton} color={colorRight} />
        </TouchableOpacity>
      }
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 70,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    backgroundColor: '#fff',
    flexDirection: 'row',
    position: 'relative'
  },
  title: {
    flex: 1,
    color: '#D70086',
    paddingTop: 23,
    fontFamily: 'AppleSDGothicNeo-Light',
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: '600',
    textAlign: 'center',
    fontSize: 18
  },
  leftAvatar: {
    height: 40,
    width: 40,
    marginTop: 20,
    marginLeft: 5 
  },
  leftButton: {
    paddingTop: 25,
    paddingLeft: 10,
    fontSize: 30
  },
  rightButton: {
    paddingTop: 24,
    paddingRight: 13,
    fontSize: 30
  }
})

export { Header }