SafeAreaView — що це, верстка з Safe Area в React Native

Що таке SafeAreaView?

SafeAreaView — компонент React Native, який автоматично додає внутрішні відступи, щоб контент не перекривався системними елементами інтерфейсу: рядком стану, 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 пункти для домашнього індикатора. Android використовує WindowInsets — верхній відступ для рядка стану та нижній для системної навігації.

Важливо: SafeAreaView застосовує відступи автоматично, але тільки для кореневого контейнера. Вкладені компоненти не отримують захисту — кожен екран повинен мати свій 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.