React Native-এ SafeAreaView-এর গুরুত্ব ব্যাখ্যা

SafeAreaView কম্পোনেন্টটি আপনার কন্টেন্টকে ডিভাইসের নিরাপদ এলাকা (safe boundaries) এ দেখানোর জন্য দায়িত্ব নেয়। এটি স্বয়ংক্রিয়ভাবে প্যাডিং যোগ করে এবং নেভিগেশন বার, টুলবার, ট্যাব বার ইত্যাদি দিয়ে কন্টেন্ট কভার হয় না তা নিশ্চিত করে। এই কম্পোনেন্টটি মূলত iOS ডিভাইসের জন্য প্রযোজ্য।

SafeAreaView ছাড়া সমস্যা

নিচের উদাহরণে সাধারণ 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;

SafeAreaView ব্যবহার করে সমাধান

SafeAreaView ইম্পোর্ট করে View-এর জায়গায় ব্যবহার করলে সমস্যা সমাধান হয়।

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;

এখন আউটপুটে টেক্সটটি স্ট্যাটাস বারের নিচে নিরাপদে দেখা যাবে, স্বয়ংক্রিয় প্যাডিং যুক্ত হয়ে থাকবে।

মূল ফায়দা

• ন치는 (notch), ডাইনামিক আইল্যান্ড, স্ট্যাটাস বার, হোম ইন্ডিকেটর ইত্যাদি থেকে কন্টেন্ট রক্ষা করে।
• iOS-এ SafeAreaView ব্যবহার করা বেস্ট প্র্যাকটিস।
• Android-এ সাধারণত Viewই পর্যাপ্ত, কিন্তু ক্রস-প্ল্যাটফর্ম কনসিস্টেন্সির জন্য এটিই ব্যবহার করা ভালো।