React-Nav-Melon/components/atoms/Header.js

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React from 'react'
import fonts from '../../theme/fonts'
import colors from '../../theme/colors'
import FeatherIcon from 'react-native-vector-icons/dist/Feather'

const Header = ({ style, children, backButtonShown, onBackClick }) => {
  return (
    <View style={[styles.headerContainer, style]}>
      {backButtonShown === true && backButtonShown !== undefined ? <TouchableOpacity onPress={onBackClick}>
        <FeatherIcon name={'chevron-left'} size={24} color={colors.black} />
      </TouchableOpacity> : <></>}
      {children}
    </View>
  )
}

export default Header

const styles = StyleSheet.create({
  headerContainer: {
    paddingHorizontal: fonts.getSize(20),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 60,
    maxHeight: 60,
    backgroundColor: colors.white
  }
})