ความสำคัญของ SafeAreaView ใน React Native

คอมโพเนนต์ SafeAreaView ใช้สำหรับแสดงเนื้อหาภายในพื้นที่ปลอดภัยของอุปกรณ์ มันจัดการการเพิ่ม padding ให้อัตโนมัติ และรับรองว่าเนื้อหาจะไม่ถูกบังโดยแถบนำทาง (navigation bar), แถบเครื่องมือ (toolbar), แถบแท็บ (tab bars) และพื้นที่อื่นๆ ของระบบ คอมโพเนนต์นี้พร้อมใช้งานสำหรับอุปกรณ์ iOS

ตัวอย่าง: การใช้งาน SafeAreaView

พิจารณาตัวอย่างต่อไปนี้ที่ใช้คอมโพเนนต์ View แสดงข้อความ "Welcome to Tutorialspoint!"

ตัวอย่างที่ 1: ใช้ View แบบปกติ

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;

ผลลัพธ์

ข้อความจะแสดงทับสเตตัสบาร์ (status bar) โดยค่าเริ่มต้น

ตัวอย่างที่ 2: ใช้ SafeAreaView

แทนที่ View ด้วย SafeAreaView:

import { SafeAreaView } from 'react-native';

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;

ผลลัพธ์

ตอนนี้มี padding ถูกเพิ่มเข้ามาอัตโนมัติ ทำให้ข้อความไม่ทับสเตตัสบาร์อีกต่อไป

สรุป

• SafeAreaView จัดการพื้นที่ปลอดภัยอัตโนมัติสำหรับ iOS
• ป้องกันไม่ให้เนื้อหาถูกบังโดย UI ของระบบ (notch, home indicator, status bar)
• ควรใช้เป็นคอนเทนเนอร์หลัก (root container) ของแอปพลิเคชัน
• สำหรับ Android ให้ใช้ react-native-safe-area-context แทน