SafeAreaView — यह क्या है, React Native में Safe Area के साथ लेआउट

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% सक्रिय iPhones में नॉच या Dynamic Island वाला डिस्प्ले है।

Safe Area की आवश्यकता क्यों है

Safe Area अवधारणा Apple HIG (Human Interface Guidelines) सिफारिशों का हिस्सा है। iPhone X (2017) से पहले, पूरी स्क्रीन सुरक्षित थी। Notch के आगमन के साथ, Apple ने उन क्षेत्रों को परिभाषित किया जहाँ सामग्री नहीं रखी जानी चाहिए: कैमरा कटआउट, समय और बैटरी संकेतक, होम इंडिकेटर। Android ने 2018 में नॉचेड डिस्प्ले के आगमन के साथ एक समान अवधारणा लागू की।

iOS और Android पर Safe Area कैसे काम करता है

iOS पर, SafeAreaView नेटिव लेआउट-गाइड से safeAreaInsets पढ़ता है। ऊपरी इंसेट में स्टैटस बैर की ऊँचाई शामिल होती है (आमतौर पर Notch वाले iPhones के लिए 44 या 50 पॉइंट)। निचला इंसेट होम इंडिकेटर के लिए 34 पॉइंट है। Android WindowInsets का उपयोग करता है — स्टैटस बैर के लिए ऊपरी इंसेट और सिस्टम नेविगेशन के लिए निचला इंसेट।

महत्वपूर्ण: SafeAreaView स्वचालित रूप से पैडिंग लागू करता है, लेकिन केवल रूट कंटैनर के लिए। नेस्टेड घटकों को सुरक्षा नहीं मिलती — प्रत्येक स्क्रीन का अपना SafeAreaView होना चाहिए। मोडल विंडो और BottomSheet के लिए, अलग से इंसेट्स का ध्यान रखें।

Notch, Dynamic Island और सिस्टम बैर्स

Notch स्क्रीन के शीर्ष भाग में एक हार्डवेयर कटआउट है जिसमें कैमरा और संवेदक होते हैं। यह iPhone X (2017) में दिखाई दिया था। Dynamic Island iPhone 14 Pro और नए का एक सॉफ़्टवेयर-हार्डवेयर क्षेत्र है, जो Notch को एक इंटरैक्टिव तत्व से बदलता है। दोनों को 50-56 pt के ऊपरी इंसेट की आवश्यकता होती है।

Android पर, कटआउट विभिन्न आकारों में आते हैं: आँसू के आकार का, पंच-होल, कैमरा के नीचे पट्टी। Android पर SafeAreaView 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 सामग्री की रक्षा का सबसे सरल तरीका है, लेकिन हमेशा लचीला नहीं है। यह घटक सभी पक्षों पर समान पैडिंग लागू करता है, जो असुविधाजनक होता है जब विभिन्न किनारों के लिए अलग-अलग पैडिंग की आवश्यकता होती है। उदाहरण के लिए, साइड पैडिंग अनावश्यक हो सकती है, जबकि निचली पैडिंग केवल एक बटन के लिए आवश्यक हो सकती है।

मुख्य विकल्प: useSafeAreaInsets react-native-safe-area-context से (सबसे लचीला हल), Android पर StatusBar.currentHeight, डिवाइस मॉडल की मैनुअल जाँच के साथ 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 लाइब्रेरी React Native में Safe Area के साथ काम करने का डी फैक्टो मानक है। यह Expo, React Navigation और अधिकांश UI किट्स द्वारा समर्थित है। यह दोनों कार्यात्मक और क्लास-आधारित दृष्टिकोणों के लिए hook और Consumer घटक दोनों प्रदान करता है।

पूर्ण नियंत्रण के लिए react-native-safe-area-context

react-native-safe-area-context एक लाइब्रेरी है जो बिल्ट-इन SafeAreaView की तुलना में अधिक लचीला API प्रदान करती है। मुख्य लाभ useSafeAreaInsets hook के माध्यम से अलग-अलग इंसेट मानों (top, bottom, left, right) तक पहुँच है, जो इंसेट्स के चयनात्मक अनुप्रयोग की अनुमति देता है।

लाइब्रेरी SafeAreaProvider भी प्रदान करती है — एक घटक जो एप्लिकेशन के शीर्ष स्तर पर आवश्यक है। यह स्क्रीन घुमाने या कीबोर्ड खोलने पर सिस्टम इंसेट परिवर्तनों की सदस्यता लेता है। React Navigation डिफ़ॉल्ट रूप से इस लाइब्रेरी का उपयोग करता है।

react-native-safe-area-context से SafeAreaView बिल्ट-इन से अलग है: यह अधिक उपकरणों पर काम करता है और इंसेट परिवर्तन एनिमेशन का समर्थन करता है। नए प्रोजेक्टों के लिए, इस लाइब्रेरी को निर्भरता के रूप में स्थापित करने और बिल्ट-इन के बजाय इसके SafeAreaView का उपयोग करने की सिफारिश की जाती है।

SafeAreaView के साथ काम करते समय सामान्य गलतियाँ

SafeAreaView अक्सर गलत तरीके से उपयोग किया जाता है। पहली गलती प्रत्येक घटक को SafeAreaView में लपेटना है, जो डबल पैडिंग बनाता है। नियम: स्क्रीन के रूट View के लिए एक SafeAreaView। नेस्टेड घटक Flex लेआउट के माध्यम से इंसेट्स प्राप्त करते हैं।

दूसरी गलती Android को नजरअंदाज करना है। Android पर, SafeAreaView WindowInsets का उपयोग करता है, जो OS संस्करणों के बीच भिन्न हो सकते हैं। Android 15+ पर, सिस्टम बैर्स पारदर्शी हो सकते हैं और इंसेट्स बदल सकते हैं। हमेशा SafeAreaView को एमुलेटर में नहीं, बल्कि असली उपकरणों पर परीक्षण करें।

तीसरी गलती हार्डकोडेड पैडिंग है। कभी भी Platform.OS === 'ios' ? 44 : 24 का उपयोग न करें — इंसेट मान मॉडल और OS संस्करणों के बीच बदलते रहते हैं। हमेशा सिस्टम API का उपयोग करें: safeAreaInsets या useSafeAreaInsets। iPhone 15 Pro पर Dynamic Island के अलग इंसेट्स हैं जो iPhone X पर Notch से भिन्न हैं।