SafeAreaView — что это, вёрстка с Safe Area в React Native

Что такое SafeAreaView?

SafeAreaView — компонент React Native, который автоматически добавляет внутренние отступы (padding), чтобы контент не перекрывался системными элементами интерфейса: строкой статуса, Notch, Dynamic Island и системной навигационной панелью. Компонент появился в React Native 0.50 для iOS и позже был расширен для Android.

На iOS SafeAreaView использует нативный UIView.safeAreaInsets, появившийся в iOS 11 (2017). На Android компонент учитывает WindowInsets — системные отступы, доступные с Android 5.0 (API 21). По данным Apple (2026), 92% активных iPhone имеют дисплей с вырезом или Dynamic Island.

Зачем нужна Safe Area

Концепция Safe Area — часть рекомендаций Apple HIG (Human Interface Guidelines). До iPhone X (2017) всё пространство экрана было безопасным. С появлением Notch Apple определила области, где контент не должен располагаться: вырез камеры, индикатор времени и батареи, домашний индикатор. Android внедрил аналогичную концепцию с появлением дисплеев с вырезом в 2018 году.

Как работает Safe Area на iOS и Android

На iOS SafeAreaView считывает safeAreaInsets из нативного layout-guide. Верхний отступ включает высоту статус-бара (обычно 44 или 50 пунктов для iPhone с Notch). Нижний отступ — 34 пункта для домашнего индикатора (Home Indicator). Android использует WindowInsets — верхний отступ для статус-бара и нижний для системной навигации.

Важно: SafeAreaView применяет padding автоматически, но только для корневого контейнера. Вложенные компоненты не получают защиту — каждый экран должен иметь свой SafeAreaView. Для модальных окон и BottomSheet учитывайте отступы отдельно.

Notch, Dynamic Island и системные панели

Notch — аппаратный вырез в верхней части экрана, содержащий камеру и датчики. Появился в iPhone X (2017). Dynamic Island — программно-аппаратная область iPhone 14 Pro и новее, заменяющая Notch на интерактивный элемент. Оба требуют верхнего отступа 50-56 pt.

На Android вырезы бывают разных форм: каплевидный, отверстие в углу (punch-hole), полоска под камеру. SafeAreaView на Android использует WindowInsets, которые учитывают форму выреза. Для приложений в альбомной ориентации добавляются боковые отступы, чтобы контент не перекрывался системными элементами.

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Edge-to-edge подход (Android 15+) рекомендует рисовать контент под системными панелями, но с учётом отступов для интерактивных элементов. SafeAreaView помогает соблюсти этот баланс: фон рисуется под панелями, а кнопки и текст — в безопасной зоне.

Использование и альтернативы SafeAreaView

SafeAreaView — простейший способ защиты контента, но не всегда гибкий. Компонент применяет одинаковые отступы ко всем сторонам, что неудобно, когда нужен разный padding для разных краёв. Например, боковые отступы могут быть не нужны, а нижний — только для кнопки.

Основные альтернативы: useSafeAreaInsets из react-native-safe-area-context (наиболее гибкое решение), StatusBar.currentHeight на Android, Platform.OS с ручной проверкой модели устройства. Для сложных случаев используйте комбинацию SafeAreaView для общего контейнера и useSafeAreaInsets для отдельных элементов.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

Библиотека react-native-safe-area-context — де-факто стандарт для работы с Safe Area в React Native. Она поддерживается Expo, React Navigation и большинством UI-китов. Предоставляет как hook, так и Consumer-компонент для функционального и классового подходов.

react-native-safe-area-context для полного контроля

react-native-safe-area-context — библиотека, предоставляющая более гибкий API, чем встроенный SafeAreaView. Основное преимущество — доступ к отдельным значениям отступов (top, bottom, left, right) через хук useSafeAreaInsets, что позволяет применять их выборочно.

Библиотека также предоставляет SafeAreaProvider — компонент, который обязателен на верхнем уровне приложения. Он подписывается на изменения системных отступов при повороте экрана или открытии клавиатуры. React Navigation использует эту библиотеку по умолчанию.

SafeAreaView из react-native-safe-area-context отличается от встроенного: он работает на большем количестве устройств и поддерживает анимацию изменения отступов. Для нового проекта рекомендуется устанавливать эту библиотеку как зависимость и использовать её SafeAreaView вместо встроенного.

Типовые ошибки при работе с SafeAreaView

SafeAreaView часто используется некорректно. Первая ошибка — оборачивание каждого компонента в SafeAreaView, что создаёт двойные отступы. Правило: один SafeAreaView на корневой View экрана. Вложенные компоненты наследуют отступы через Flex-вёрстку.

Вторая ошибка — игнорирование Android. На Android SafeAreaView использует WindowInsets, которые могут отличаться на разных версиях ОС. На Android 15+ системные панели могут быть прозрачными, и отступы меняются. Всегда тестируйте SafeAreaView на реальных устройствах, а не только в эмуляторе.

Третья ошибка — жёстко заданные padding. Никогда не используйте Platform.OS === 'ios' ? 44 : 24 — значения отступов меняются между моделями и версиями ОС. Всегда используйте системные API: safeAreaInsets или useSafeAreaInsets. Dynamic Island на iPhone 15 Pro имеет другие отступы, чем Notch на iPhone X.