53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
NativeModules,
|
|
SafeAreaView,
|
|
} from 'react-native';
|
|
import { Dimensions } from 'react-native'
|
|
import Theme from '../components/theme.style.js';
|
|
|
|
const { StatusBarManager } = NativeModules;
|
|
const statusBarHeight = StatusBarManager.HEIGHT;
|
|
const OS = Platform.OS;
|
|
|
|
const CustomSafeArea = ({customStatusBar, hideTopBar, children}) => {
|
|
if(customStatusBar && OS === "ios") {
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<View style={styles.statusBarHeight} />
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SafeAreaView style={styles.customSafeArea(hideTopBar)}>
|
|
{ OS === "ios" && <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 40, width: '100%', backgroundColor: Theme.colors.white }}/> }
|
|
|
|
<View style={{ flex: 1, backgroundColor: Theme.colors.white }}>
|
|
{children}
|
|
</View>
|
|
</SafeAreaView>
|
|
|
|
</>
|
|
)
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
customSafeArea: (hideTopBar) => {
|
|
return {
|
|
flex: 1,
|
|
backgroundColor: !hideTopBar ? Theme.colors.primary : Theme.colors.white,
|
|
}
|
|
},
|
|
statusBarHeight: {
|
|
height: statusBarHeight,
|
|
backgroundColor: Theme.colors.primary,
|
|
width: '100%'
|
|
}
|
|
});
|
|
export default CustomSafeArea; |