Tầm quan trọng của SafeAreaView trong React Native

SafeAreaView là một component giúp hiển thị nội dung trong khu vực an toàn của thiết bị, tự động thêm padding để tránh bị che khuất bởi thanh trạng thái (status bar), thanh điều hướng (navigation bar), notch, màn hình cong, v.v. Component này hoạt động trên cả iOS và Android (từ React Native 0.50+).

Ví dụ: So sánh View và SafeAreaView

1. Sử dụng View thông thường

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

const App = () => {
  return (
    
      Welcome To Tutorialspoint!
    
  );
};

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

export default App;

Kết quả: Văn bản hiển thị ngay dưới thanh trạng thái, có thể bị che khuất.

2. Sử dụng SafeAreaView

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

const App = () => {
  return (
    
      Welcome To Tutorialspoint!
    
  );
};

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

export default App;

Kết quả: Văn bản được đẩy xuống dưới thanh trạng thái nhờ padding tự động.

Khi nào nên dùng SafeAreaView?

• Là container gốc của màn hình (root view).
• Màn hình có notch, màn hình cong, hoặc home indicator (iPhone X+).
• Muốn đảm bảo UI hiển thị đúng trên mọi thiết bị.

Các props hữu ích

Mẹo: Trên Android, SafeAreaView chỉ hoạt động từ API 29+. Để hỗ trợ các phiên bản cũ hơn, hãy dùng thư viện react-native-safe-area-context.