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 থেকে ভিন্ন।