ExpoIntermediate

Safe Area — notch, home indicator ও insets

আধুনিক ফোনের safe area handle করা — useSafeAreaInsets — বাংলায়।

4টি অংশবাংলা ভাষায়

ফোনে notch, dynamic island, rounded corner — সেসব logo ধাক্কা না খেয়ে content সাজাতে safe area। আধুনিক convention-এ `react-native-safe-area-context`-এর `useSafeAreaInsets`:

app/(tabs)/index.tsxtsx

tsx

import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function Home() {
  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
      }}
    />
  );
}

insets.top — status bar / notch
insets.bottom — home indicator
insets.left / right — landscape notch

React Native-এর SafeAreaView সাবধান

built-in SafeAreaView (react-native থেকে) শুধু top handle করে; edge-to-edge Android-এ সমস্যা। Expo ও expo-router project-এ ইতিমধ্যে react-native-safe-area-context থাকে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।