11- Safe Area & Device Real Estate

1. What is the "Safe Area"?

Modern smartphones have physical features like notches (for cameras), dynamic islands, and home indicators (the bar at the bottom) that overlay the screen.

• The Problem: If you don't account for these, your content (titles, buttons) can get trapped behind the clock, battery icon, or physical notch, making it unreadable or unclickable.
• The Goal: Ensure content stays within the "Safe Area"—the part of the screen where it is guaranteed to be visible and interactive.

2. Standard Approach: SafeAreaView

React Native provides a built-in <SafeAreaView> component.

• How it works: It automatically detects the device's "unsafe" areas and applies the necessary padding.
• The Limitation: Sometimes using SafeAreaView can feel "janky" or choppy during page transitions, especially when using complex navigation libraries like Expo Router.

3. Advanced Approach: useSafeAreaInsets

For smoother performance and more control, we can use the useSafeAreaInsets hook from the react-native-safe-area-context library. This hook gives us the exact pixel values for the "unsafe" areas on all four sides.

• Insets Object: Returns an object with { top, bottom, left, right }.
• Application: You manually apply these values as padding to a regular View.

4. Making "ThemedView" Safe-Aware

To make our development easier, we can update our reusable ThemedView component to handle safe areas automatically based on a prop.

We don’t always need the view to be safe right? sometime, some sections on the page that doesn’t require small extra padding around it. So we need this to be a Choice.

File: ./components/ThemedView.jsx

import { View, useColorScheme } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Colors } from "../constants/Colors";

const ThemedView = ({ style, safe = false, ...props }) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme] ?? Colors.light;

  // If SAFE Prop -> FALSE, return a regular themed view
  if (!safe) {
    return (
      <View style={[{ backgroundColor: theme.background }, style]} {...props} />
    );
  }

const ***insets*** = useSafeAreaInsets()      //  {"bottom": 0, "left": 0, "right": 0, "top": 43.13725662231445}

  // If SAFE Prop -> TRUE, apply manual padding based on device insets
  return (
    <View
      style={[{ 
        backgroundColor: theme.background,
        paddingTop: ***insets***.top,
        paddingBottom: ***insets***.bottom,
      },
        style,
      ]}
      {...props}
    />
  );
};

export default ThemedView;