Navigation Wrapper for screens

NavBar.js

import React, { Component, PureComponent } from 'react';
import { View, Text, FlatList, TouchableOpacity, RefreshControl, Image, Alert, Dimensions, StyleSheet, Platform, Keyboard } from 'react-native';
import { SafeAreaView } from 'react-navigation' 
import { connect } from 'react-redux'
import Colors from '../../../constants/Colors';

import BackIcon from 'react-native-vector-icons/Ionicons';


const ios = Platform.OS == 'ios'
let se = false
if (ios) se = Expo.Constants.platform.ios.model == 'iPhone SE'
const { height, width } = Dimensions.get('window')

@connect(state => ({
    user: state.user,
}), {  } )
export default class NavBar extends PureComponent {
    constructor(props){
        super(props)
        this.state = {  }
    }
    render(){
        const { JustBack, TitleAndBack } = this.props
        if (JustBack) return <this.JustBack/>
        if (TitleAndBack)  return <this.TitleAndBack/>
        else return <this.Wrapper/>
    }
    handleNavigation = () => {
        Keyboard.dismiss()
        this.props.navigationAction()
    }
    JustBack = () => {
        return (
            <SafeAreaView forceInset={{ top: 'always' }} style={[styles.tabContainer, { alignContent: 'flex-start' }]}>
                <TouchableOpacity style={{ marginLeft: 15, alignItems: 'center',}} hitSlop={{ top: 5, bottom: 5, left: 5, right: 10 }} feedback="opacity" onPress={this.handleNavigation}>
                    <BackIcon name="ios-arrow-back" color="white" style={{  }} size={30}/>
                </TouchableOpacity>
            </SafeAreaView>
        )
    }
    TitleAndBack = () => {
        const { title } = this.props
        return (
            <SafeAreaView forceInset={{ top: 'always' }} style={[styles.tabContainer, { justifyContent: 'flex-start' }]}>
                <TouchableOpacity style={{ marginLeft: 15, alignItems: 'center',}} hitSlop={{ top: 5, bottom: 5, left: 5, right: 10 }} feedback="opacity" onPress={this.handleNavigation}>
                    <BackIcon name="ios-arrow-back" color="white" style={{  }} size={30}/>
                </TouchableOpacity>
                <Text style={{ color: 'white', fontSize: 24, position: 'absolute', left: width * .42, fontFamily: 'lato-bold', bottom: 6 }} >
                    {title}
                </Text>
            </SafeAreaView>
        )
    }
    Wrapper = () => {
        <SafeAreaView forceInset={{ top: 'always' }} style={[styles.tabContainer, { justifyContent: 'flex-start' }]}>
            {...this.props.children}
        </SafeAreaView>
    }

}

const styles = StyleSheet.create({
    tabContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flexBasis: 'auto',
        backgroundColor: Colors.headerColor,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: Colors.grayColor,
        paddingTop: ios ? '7%' : 0
    },
})