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 مواد کی حفاظت کا سب سے آسان طریقہ ہے، لیکن ہمیشہ لچیلا نہیں ہے۔ کمپوننٹ تمام اطراف پر ایک جیسی پیڈنگ لاگو کرتا ہے، جو تب صعب ہے جب مختلف کناروں کے لیے مختلف پیڈنگ کی ضرورت ہو۔ مثال کے طور پڑ، سائڈ پیڈنگ ضروری نہیں ہو سکتی، جبکہ نیچے کی پیڈنگ صرف ایک بٹن کے لیے ضروری ہو سکتی ہے۔

اہم متبادل: react-native-safe-area-context سے useSafeAreaInsets (سب سے لچیلا حل)، 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 سے مختلف ہیں۔