Safe Area Insets

Introduction

When building mobile applications, it’s crucial to ensure your UI elements don’t overlap with system UI elements like: Status bars, Notches, Home indicators, and Navigation bars.

The Problem

Here’s a basic implementation of a call content component that doesn’t handle Safe Area insets:

import React from "react";
import { CallContent } from "@stream-io/video-react-native-sdk";
import { StyleSheet, View } from "react-native";

export const ActiveCall = () => {
  // other code omitted for brevity
  const { theme } = useTheme();

  return (
    <View style={styles.container}>
      <CallContent
        onHangupCallHandler={onHangupCallHandler}
        landscape={currentOrientation === "landscape"}
        layout={selectedLayout}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
});

As shown in the image below, this results in UI elements overlapping with system areas:

We can solve this problem by using insets. Insets are top, bottom, left, and right padding values that are automatically calculated by the react-native-safe-area-context package based on the device’s notch, home indicator, and status bar.

react-native-safe-area-context is included by default in Expo. If you’re not using Expo, you can install it using the following command:

npm install react-native-safe-area-context

We can use these insets to override the default insets values in our theme.

import { DeepPartial, Theme } from "@stream-io/video-react-native-sdk";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export const useCustomTheme = (): DeepPartial<Theme> => {
  const { top, right, bottom, left } = useSafeAreaInsets();

  const variants: DeepPartial<Theme["variants"]> = {
    insets: {
      top,
      right,
      bottom,
      left,
    },
  };

  const customTheme: DeepPartial<Theme> = {
    variants,
  };

  return customTheme;
};

Without any other code changes to our call content component, we can see that the insets are now properly applied:

Call Duration

Internationalization

Safe Area Insets

Introduction

The Problem

The Solution