SafeAreaView — nó là gì, bố cục với Safe Area trong React Native

SafeAreaView là gì?

SafeAreaView là một thành phần React Native tự động thêm padding bên trong để nội dung không bị che bởi các phần tử giao diện hệ thống: thanh trạng thái, Notch, Dynamic Island và thanh điều hướng hệ thống. Thành phần này xuất hiện trong React Native 0.50 cho iOS và sau đó được mở rộng cho Android.

Trên iOS, SafeAreaView sử dụng UIView.safeAreaInsets gốc, được giới thiệu trong iOS 11 (2017). Trên Android, thành phần tính đến WindowInsets — các insets hệ thống có sẵn từ Android 5.0 (API 21). Theo Apple (2026), 92% iPhone đang hoạt động có màn hình với notch hoặc Dynamic Island.

Tại sao cần Safe Area

Khái niệm Safe Area là một phần của khuyến nghị Apple HIG (Human Interface Guidelines). Trước iPhone X (2017), toàn bộ không gian màn hình đều an toàn. Với sự xuất hiện của Notch, Apple đã xác định các khu vực không nên đặt nội dung: phần cắt camera, chỉ báo thời gian và pin, chỉ báo home. Android đã triển khai một khái niệm tương tự với sự ra đời của màn hình notch vào năm 2018.

Cách Safe Area hoạt động trên iOS và Android

Trên iOS, SafeAreaView đọc safeAreaInsets từ hướng dẫn bố cục gốc. Inset phía trên bao gồm chiều cao của thanh trạng thái (thường là 44 hoặc 50 điểm cho iPhone có Notch). Inset phía dưới là 34 điểm cho chỉ báo Home. Android sử dụng WindowInsets — inset trên cho thanh trạng thái và inset dưới cho điều hướng hệ thống.

Quan trọng: SafeAreaView tự động áp dụng padding, nhưng chỉ cho container gốc. Các thành phần lồng nhau không nhận được bảo vệ — mỗi màn hình phải có SafeAreaView riêng. Đối với cửa sổ modal và BottomSheet, hãy tính đến các insets riêng biệt.

Notch, Dynamic Island và thanh hệ thống

Notch là phần cắt phần cứng ở trên cùng của màn hình chứa camera và cảm biến. Nó xuất hiện trên iPhone X (2017). Dynamic Island là vùng phần mềm-phần cứng của iPhone 14 Pro trở lên, thay thế Notch bằng một phần tử tương tác. Cả hai đều yêu cầu inset trên 50-56 pt.

Trên Android, các notch có nhiều hình dạng khác nhau: hình giọt nước, punch-hole, dải dưới camera. SafeAreaView trên Android sử dụng WindowInsets, tính đến hình dạng của notch. Đối với ứng dụng ở chế độ ngang, các inset bên được thêm vào để ngăn nội dung chồng lên các phần tử hệ thống.

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

Cách tiếp cận Edge-to-edge (Android 15+) khuyến nghị vẽ nội dung dưới các thanh hệ thống, nhưng tính đến các insets cho các phần tử tương tác. SafeAreaView giúp duy trì sự cân bằng này: nền được vẽ dưới các thanh, trong khi các nút và văn bản vẫn ở trong vùng an toàn.

Sử dụng và các lựa chọn thay thế SafeAreaView

SafeAreaView là cách đơn giản nhất để bảo vệ nội dung, nhưng không phải lúc nào cũng linh hoạt. Thành phần áp dụng cùng một padding cho tất cả các cạnh, điều này bất tiện khi cần padding khác nhau cho các cạnh khác nhau. Ví dụ, padding bên có thể không cần thiết, trong khi padding dưới có thể chỉ cần cho một nút.

Các lựa chọn thay thế chính: useSafeAreaInsets từ react-native-safe-area-context (giải pháp linh hoạt nhất), StatusBar.currentHeight trên Android, Platform.OS với kiểm tra thủ công model thiết bị. Đối với các trường hợp phức tạp, hãy sử dụng kết hợp SafeAreaView cho container tổng thể và useSafeAreaInsets cho các phần tử riêng lẻ.

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

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

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

Thư viện react-native-safe-area-context là tiêu chuẩn thực tế để làm việc với Safe Area trong React Native. Nó được hỗ trợ bởi Expo, React Navigation và hầu hết các bộ UI. Nó cung cấp cả hook và thành phần Consumer cho cả hai cách tiếp cận hàm và dựa trên lớp.

react-native-safe-area-context để kiểm soát hoàn toàn

react-native-safe-area-context là một thư viện cung cấp API linh hoạt hơn SafeAreaView tích hợp sẵn. Lợi thế chính là truy cập vào các giá trị inset riêng lẻ (top, bottom, left, right) thông qua hook useSafeAreaInsets, cho phép áp dụng inset có chọn lọc.

Thư viện cũng cung cấp SafeAreaProvider — một thành phần bắt buộc ở cấp cao nhất của ứng dụng. Nó đăng ký nhận thay đổi insets hệ thống khi xoay màn hình hoặc mở bàn phím. React Navigation sử dụng thư viện này theo mặc định.

SafeAreaView từ react-native-safe-area-context khác với thành phần tích hợp sẵn: nó hoạt động trên nhiều thiết bị hơn và hỗ trợ hoạt ảnh thay đổi inset. Đối với các dự án mới, nên cài đặt thư viện này như một phụ thuộc và sử dụng SafeAreaView của nó thay vì thành phần tích hợp sẵn.

Lỗi thường gặp khi làm việc với SafeAreaView

SafeAreaView thường được sử dụng không đúng cách. Lỗi đầu tiên là bọc mọi thành phần trong SafeAreaView, tạo ra padding kép. Quy tắc: một SafeAreaView cho một View gốc của màn hình. Các thành phần lồng nhau kế thừa các insets thông qua bố cục Flex.

Lỗi thứ hai là bỏ qua Android. Trên Android, SafeAreaView sử dụng WindowInsets, có thể khác nhau giữa các phiên bản OS. Trên Android 15+, các thanh hệ thống có thể trong suốt và insets thay đổi. Luôn kiểm tra SafeAreaView trên thiết bị thực, không chỉ trong trình giả lập.

Lỗi thứ ba là padding cứng. Không bao giờ sử dụng Platform.OS === 'ios' ? 44 : 24 — giá trị insets thay đổi giữa các model và phiên bản OS. Luôn sử dụng API hệ thống: safeAreaInsets hoặc useSafeAreaInsets. Dynamic Island trên iPhone 15 Pro có insets khác với Notch trên iPhone X.