Home Reference Source

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,
    },
});