Header.js

import Text from '@Text'
import React from 'react'
import Icon from '@Icons'
import { getColor } from '@Colors'
import SearchBar from './SearchBar'
import styled from 'styled-components'
import { TouchableWithoutFeedback, StatusBar } from 'react-native'

const Header = ({ ...props }) => (
  <HeaderContainer>

    <StatusBar barStyle='light-content' backgroundColor={getColor('darkBlue')} />

    {_renderTitle(props.title)}

    {_renderLeftSideAction(props.leftSideAction, props.goBack, props.openMenu, props.overrideLeftIcon)}

    {_renderSearch(props.hasSearch)}

    {_renderClearStack(props.hasCloseButton, props.clearStackAction)}

  </HeaderContainer>
)

// Render functions
const _renderTitle = title =>
  title && <Text label color='white'>{title}</Text>

const _renderLeftSideAction = (leftSideAction, goBack, openMenu, overrideLeftIcon) =>
  leftSideAction && (
    <TouchableWithoutFeedback
      onPress={leftSideAction === 'menu' ? openMenu : goBack}
    >
      <LeftIconContainer>
        <Icon
          color={getColor('white')}
          size={leftSideAction === 'menu' ? 18 : 20}
          name={leftSideAction === 'menu' ? overrideLeftIcon || 'menu' : overrideLeftIcon || 'chevron-left'}
        />
      </LeftIconContainer>
    </TouchableWithoutFeedback>
  )

const _renderClearStack = (hasCloseButton, clearStackAction) =>
  hasCloseButton && (
    <TouchableWithoutFeedback onPress={clearStackAction}>
      <RightIconContainer>
        <Icon color={getColor('white')} size={20} name='times' />
      </RightIconContainer>
    </TouchableWithoutFeedback>
  )

const _renderSearch = hasSearch =>
  hasSearch && <SearchBar />

// Layout
const HeaderContainer = styled.View`
  width: 100%;
  height: 57px;
  align-items: center;
  justify-content: center;
  background-color: ${getColor('darkBlue')};
`

const LeftIconContainer = styled.View`
    top: 0;
    left: 0;
    bottom: 0;
    width: 57px;
    height: 57px;
    position: absolute;
    padding-left: 15px;
    justify-content: center;
`

const RightIconContainer = styled.View`
    top: 0;
    right: 0;
    bottom: 0;
    width: 57px;
    height: 57px;
    position: absolute;
    align-items: center;
    justify-content: center;
`

export default Header