Safe Areas & Notches

import { StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 
export function AppRoot({ children }: { children: React.ReactNode }) {
  return <SafeAreaProvider>{children}</SafeAreaProvider>;
}
 
export function Screen({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <View style={styles.header}>
        <Text style={styles.title}>{title}</Text>
      </View>
      <View style={styles.body}>{children}</View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#fff" },
  header: { paddingHorizontal: 16, paddingBottom: 8 },
  title: { fontSize: 28, fontWeight: "700" },
  body: { flex: 1, paddingHorizontal: 16 },
});

import { ScrollView, StatusBar, StyleSheet, Text, View } from "react-native";
import {
  SafeAreaProvider,
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
 
function ArticleScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={styles.screen}>
      <StatusBar barStyle="dark-content" translucent backgroundColor="transparent" />
 
      {/* Edge-to-edge hero - manual top inset for readable text under status bar */}
      <View style={[styles.hero, { paddingTop: insets.top + 12 }]}>
        <Text style={styles.heroTitle}>Safe Areas</Text>
        <Text style={styles.heroSubtitle}>Edge-to-edge with readable insets</Text>
      </View>
 
      {/* Standard content - SafeAreaView handles sides; bottom inset for home indicator */}
      <SafeAreaView style={styles.content} edges={["left", "right", "bottom"]}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <Text style={styles.paragraph}>
            On RN 0.86, Android draws behind the status and navigation bars. iOS has
            done this for years. react-native-safe-area-context reports the unobstructed
            rectangle so your UI stays tappable.
          </Text>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}
 
export default function App() {
  return (
    <SafeAreaProvider>
      <ArticleScreen />
    </SafeAreaProvider>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#0f172a" },
  hero: {
    paddingHorizontal: 20,
    paddingBottom: 24,
    backgroundColor: "#1e293b",
  },
  heroTitle: { fontSize: 32, fontWeight: "800", color: "#f8fafc" },
  heroSubtitle: { fontSize: 16, color: "#94a3b8", marginTop: 4 },
  content: { flex: 1, backgroundColor: "#fff", borderTopLeftRadius: 16, borderTopRightRadius: 16 },
  scroll: { padding: 20 },
  paragraph: { fontSize: 16, lineHeight: 24, color: "#334155" },
});

import { Platform, StatusBar } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
 
function EdgeToEdgeShell({ children }: { children: React.ReactNode }) {
  const insets = useSafeAreaInsets();
 
  return (
    <View
      style={{
        flex: 1,
        paddingTop: Platform.OS === "android" ? insets.top : 0, // SafeAreaView often handles iOS
        paddingBottom: insets.bottom,
      }}
    >
      <StatusBar translucent backgroundColor="transparent" barStyle="dark-content" />
      {children}
    </View>
  );
}

import { useSafeAreaInsets } from "react-native-safe-area-context";
 
function FloatingActionButton({ onPress }: { onPress: () => void }) {
  const insets = useSafeAreaInsets();
 
  return (
    <Pressable
      onPress={onPress}
      style={{
        position: "absolute",
        right: 16,
        bottom: insets.bottom + 16, // clears home indicator / nav bar
      }}
    />
  );
}

import type { EdgeInsets } from "react-native-safe-area-context";
import type { Edge } from "react-native-safe-area-context";
 
const TAB_EDGES: Edge[] = ["top", "left", "right"];
 
function useBottomInset(extra = 0): number {
  const { bottom } = useSafeAreaInsets();
  return bottom + extra;
}
 
// Pass insets to a non-React utility
function contentHeight(windowHeight: number, insets: EdgeInsets): number {
  return windowHeight - insets.top - insets.bottom;
}