src/components/wrappers/SafeAreaWrapper.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import {globalStyles} from '../../styles/styles';
import {UIColors} from '../../utils/ColorConstants';
/**
* SafeArea Wrapper
* @param {Object} props - Properties
* @param {Object} props.children Component to be wrapped
* @param {Object} props.safeAreaStyle Styling for the wrapper
* @returns {Object} SafeAreaWrapper
*/
export default function SafeAreaWrapper(props) {
// Retrieve props
const children = props.children;
const safeAreaStyle = props.safeAreaStyle;
// If safeAreaStyle is undefined, get from safeContainer
const safeContainerStyle =
safeAreaStyle !== undefined ? safeAreaStyle : styles.safeContainer;
return (
<SafeAreaProvider>
<View style={globalStyles.coverAll}>
<SafeAreaView style={safeContainerStyle}>
{children}
</SafeAreaView>
</View>
</SafeAreaProvider>
);
}
/** Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
safeContainer: {
width: '100%',
height: '100%',
justifyContent: 'flex-start',
alignContent: 'center',
backgroundColor: UIColors.BACKGROUND_VIEW,
},
});