import React from 'react' ; import { StatusBar , StyleSheet , } from 'react-native' ; import { SafeAreaView , SafeAreaViewProps , SafeAreaViewForceInsetValue , } from 'react-navigation' ; import { palette } from 'constants/style' ; const styles = StyleSheet . create ( { container : { flex : 1 , paddingTop : StatusBar . currentHeight , backgroundColor : palette . gray [ 100 ] , } , } ) ; const SAFE_AREA_INSET = { top : 'always' , bottom : 'always' , } ; function withSafeArea < P > ( Component , safeAreaProps = { } ) { return ( props ) => ( < SafeAreaView forceInset = { SAFE_AREA_INSET } style = { styles . container } { ... safeAreaProps } > < Component { ... props } / > < /SafeAreaView>); } export default withSafeArea ;