src/components/Auth/AuthLayout.tsx

import React from "react";
import { ImageBackground, Keyboard, StyleSheet, TouchableWithoutFeedback, View } from "react-native";

/**
 * Layout shared between all Unauthorized components
 * @category Unauthorized
 * @component
 */
const UnauthorizedLayout : React.FC = ({children}) => {

    /**
     * Dismisses keyboard.
     */
    const dismissKeyboard = () => {
        Keyboard.dismiss();
    }

    return (
        <ImageBackground style={styles.background} source={require('../../../assets/cover.jpg')}>
            <TouchableWithoutFeedback style={{height: '100%', width: '100%'}} onPress={dismissKeyboard}>
                <View style={{height: '100%', width: '100%'}}>
                {children}
                </View>
            </TouchableWithoutFeedback>
        </ImageBackground>
    )
}

const styles = StyleSheet.create({
    background: {
        flex: 1,
        resizeMode: 'cover',
        padding: 25,
    },
})

export default UnauthorizedLayout;