Safe Area

On mobile browsers, content can sometimes be obscured by system UI such as the status bar or home indicator. The Apps in Toss SDK provides a function that calculates the Safe Area inset values for the screen in pixels to prevent this situation.

Especially on devices like the iPhone X and later, or some Android devices, system UI often covers content in web apps that use the full screen. Using the function below, you can easily adjust the insets so that content is displayed safely.

useSafeAreaInsets

It calculates the screen's Safe Area inset values in pixels so that you can prevent content from being obscured by system UI such as the status bar or home indicator in mobile browsers. useSafeAreaInsets can be used when developing with React Native.

import { useSafeAreaInsets } from '@granite-js/native/react-native-safe-area-context';
const { top: safeAreaTop, right: safeAreaRight } = useSafeAreaInsets();
// Top navbar inset: safeAreaTop
// Right navbar inset: safeAreaRight + 10