SafeAreaView — qu’est-ce que c’est, conception avec Safe Area dans React Native

Qu’est-ce que SafeAreaView?

SafeAreaView est un composant React Native qui ajoute automatiquement un padding interne pour que le contenu ne soit pas masqué par les éléments de l’interface système : barre d’état, Notch, Dynamic Island et barre de navigation système. Le composant est apparu dans React Native 0.50 pour iOS et a été ensuite étendu pour Android.

Sous iOS, SafeAreaView utilise UIView.safeAreaInsets natif, introduit dans iOS 11 (2017). Sous Android, le composant prend en compte WindowInsets — les insets système disponibles depuis Android 5.0 (API 21). Selon Apple (2026), 92% des iPhones actifs ont un écran avec encoche ou Dynamic Island.

Pourquoi Safe Area est nécessaire

Le concept de Safe Area fait partie des recommandations Apple HIG (Human Interface Guidelines). Avant l’iPhone X (2017), tout l’espace de l’écran était sûr. Avec l’arrivée du Notch, Apple a défini les zones où le contenu ne doit pas être placé : le découpage de la caméra, l’indicateur d’heure et de batterie, l’indicateur d’accueil. Android a implémenté un concept similaire avec l’avènement des écrans à encoche en 2018.

Comment Safe Area fonctionne sur iOS et Android

Sous iOS, SafeAreaView lit safeAreaInsets depuis le guide de mise en page natif. L’inset supérieur inclut la hauteur de la barre d’état (généralement 44 ou 50 points pour les iPhones avec Notch). L’inset inférieur est de 34 points pour l’indicateur d’accueil. Android utilise WindowInsets — inset supérieur pour la barre d’état et inférieur pour la navigation système.

Important : SafeAreaView applique le padding automatiquement, mais seulement pour le conteneur racine. Les composants imbriqués ne reçoivent pas de protection — chaque écran doit avoir son propre SafeAreaView. Pour les fenêtres modales et BottomSheet, tenez compte des insets séparément.

Notch, Dynamic Island et barres système

Notch est un découpage matériel en haut de l’écran contenant la caméra et les capteurs. Il est apparu sur l’iPhone X (2017). Dynamic Island est une zone logicielle-matérielle de l’iPhone 14 Pro et plus récents, remplaçant le Notch par un élément interactif. Les deux nécessitent un inset supérieur de 50-56 pt.

Sur Android, les encoches existent sous différentes formes : goutte, punch-hole, bande sous la caméra. SafeAreaView sur Android utilise WindowInsets, qui prennent en compte la forme de l’encoche. Pour les applications en orientation paysage, des insets latéraux sont ajoutés pour empêcher le contenu de chevaucher les éléments système.

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>
);

L’approche Edge-to-edge (Android 15+) recommande de dessiner le contenu sous les barres système, mais en tenant compte des insets pour les éléments interactifs. SafeAreaView aide à maintenir cet équilibre : l’arrière-plan est dessiné sous les barres, tandis que les boutons et le texte restent dans la zone sécurisée.

Utilisation et alternatives à SafeAreaView

SafeAreaView est le moyen le plus simple de protéger le contenu, mais pas toujours flexible. Le composant applique le même padding sur tous les côtés, ce qui est peu pratique lorsque différents padding sont nécessaires pour différents bords. Par exemple, le padding latéral peut être inutile, tandis que le padding inférieur peut être nécessaire seulement pour un bouton.

Les principales alternatives : useSafeAreaInsets de react-native-safe-area-context (solution la plus flexible), StatusBar.currentHeight sur Android, Platform.OS avec vérification manuelle du modèle d’appareil. Pour les cas complexes, utilisez une combinaison de SafeAreaView pour le conteneur général et useSafeAreaInsets pour les éléments individuels.

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

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

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

La bibliothèque react-native-safe-area-context est la norme de facto pour travailler avec Safe Area dans React Native. Elle est prise en charge par Expo, React Navigation et la plupart des kits UI. Elle fournit à la fois un hook et un composant Consumer pour les approches fonctionnelles et basées sur les classes.

react-native-safe-area-context pour un contrôle total

react-native-safe-area-context est une bibliothèque qui fournit une API plus flexible que SafeAreaView intégré. Le principal avantage est l’accès aux valeurs individuelles des insets (top, bottom, left, right) via le hook useSafeAreaInsets, permettant une application sélective des insets.

La bibliothèque fournit également SafeAreaProvider — un composant obligatoire au niveau supérieur de l’application. Il s’abonne aux changements d’insets système lors de la rotation de l’écran ou de l’ouverture du clavier. React Navigation utilise cette bibliothèque par défaut.

SafeAreaView de react-native-safe-area-context diffère de l’intégré : il fonctionne sur plus d’appareils et prend en charge l’animation des changements d’insets. Pour les nouveaux projets, il est recommandé d’installer cette bibliothèque comme dépendance et d’utiliser son SafeAreaView au lieu de l’intégré.

Erreurs courantes avec SafeAreaView

SafeAreaView est souvent utilisé incorrectement. La première erreur est d’envelopper chaque composant dans SafeAreaView, ce qui crée un double padding. La règle : un SafeAreaView par View racine de l’écran. Les composants imbriqués héritent des insets via la mise en page Flex.

La deuxième erreur est d’ignorer Android. Sur Android, SafeAreaView utilise WindowInsets, qui peuvent varier selon les versions de l’OS. Sur Android 15+, les barres système peuvent être transparentes et les insets changent. Testez toujours SafeAreaView sur des appareils réels, pas seulement dans l’émulateur.

La troisième erreur est le padding codé en dur. N’utilisez jamais Platform.OS === 'ios' ? 44 : 24 — les valeurs des insets varient entre les modèles et les versions de l’OS. Utilisez toujours les API système : safeAreaInsets ou useSafeAreaInsets. Dynamic Island sur iPhone 15 Pro a des insets différents de ceux du Notch sur iPhone X.