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.

SafeAreaInsets

When the screen mode changes safe area You can check the values. You can retrieve safe area information when the screen changes, or subscribe to changes. Using this feature, you can implement a stable UI even in various device environments.

• SafeAreaInsets.get() : of the current screen mode safe area retrieves the values.
• SafeAreaInsets.subscribe() : Every time the screen mode changes safe area subscribes to value changes.

In-game X button coordinates

The X button is included by default in the framework. The top rightof the screen, and its position can be calculated as follows.

• X-axis: safeAreaInsetsValue.right + 10
• Y-axis: safeAreaInsetsValue.top + 5 (iOS) / safeAreaInsetsValue.top +10 (Android)

If an in-game button overlaps with the framework's X button, it may be rejected during review.

Example

import { SafeAreaInsets } from '@apps-in-toss/web-framework';
import { useEffect, useState } from 'react';

interface SafeAreaInsets {
  top: number;
  bottom: number;
  left: number;
  right: number;
}

function Page() {
  const [safeAreaInsetsValue, setSafeAreaInsetsValue] = useState<SafeAreaInsets>(() => SafeAreaInsets.get());
  // Top padding for the navigation bar: safeAreaInsetsValue.top
  // Right padding for the navigation bar: safeAreaInsetsValue.right + 10

  useEffect(() => {
    const cleanup = SafeAreaInsets.subscribe({
      onEvent: (insets) => {
        setSafeAreaInsetsValue(insets);
      },
    });
    return () => cleanup();
  }, []);

  // ...
}

getSafeAreaInsets

This function can only be used up to SDK version 1.4.6

Deprecated from version 1.4.7 has been deprecated

import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

const insets = getSafeAreaInsets();
// Example return value: { top: 44, bottom: 34 }

The returned object includes the following properties.

• top: the space that must be reserved so it isn't covered by the top status bar.
• bottom: the space that must be reserved so it isn't covered by the bottom home indicator.

This value is often used when building UI for the entire screen (viewport). For example, you can add spacing to a fixed bottom button or keep the top header from overlapping the status bar.

Example of applying bottom padding

This is an example of adding padding so a fixed bottom button doesn't overlap the home indicator.

import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

const insets = getSafeAreaInsets();

const Button = () => {
  return (
    <div style={{ paddingBottom: `${insets.bottom}px` }}>
      <button>OK</button>

  );
};

Example of applying top padding

This is an example of adding padding so a fixed top header doesn't overlap the status bar.

import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

const insets = getSafeAreaInsets();

const Header = () => {
  return (
    <div style={{ paddingTop: `${insets.top}px` }}>
      <h1>Title</h1>

  );
};

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