useSafeAreaInset.js

import {useState, useEffect} from 'react';
import type safeAreaInsets from 'safe-area-insets'

type SafeAreaInsetsModule = typeof safeAreaInsets

export type SafeAreaInsets = Pick<SafeAreaInsetsModule, 'top' | 'right' | 'bottom' | 'left'>

// Written like this because of https://stackoverflow.com/q/62726153/741970
export default function useSafeAreaInsets() : SafeAreaInsets {
    const [safeInsets, setSafeInsets] = useState({
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    });
    useEffect(() => {
        let safeAreaInsets : SafeAreaInsetsModule | undefined
        function setSafeAreaInsets() {
            // Get values from accessors: https://github.com/zhetengbiji/safeAreaInsets/blob/287ff9e20988c311dca3baf31fc49cb467e7ad47/src/index.ts#L187-L198
            const {top, right, bottom, left} = safeAreaInsets!
            setSafeInsets({top, right, bottom, left});
        }
        import('safe-area-insets').then(_safeAreaInsets => {
            safeAreaInsets = _safeAreaInsets;
            setSafeAreaInsets()
            safeAreaInsets.onChange(setSafeAreaInsets);
        });
        return () => safeAreaInsets?.offChange(setSafeAreaInsets)
    }, []);
    return safeInsets;
}