SafeAreaView is used to handle notches and safe areas

Without SafeAreaProvider and SafeAreaView, content renders underneath the iPhone notch, Dynamic Island, and home indicator — login buttons land under the status bar, close icons end up behind the camera cutout, and the first row of a list is clipped. This breaks the app on every iPhone from the X onward and most modern Androids. App Store reviewers flag notch collisions as a functional defect, not a visual polish issue.

Install react-native-safe-area-context, mount SafeAreaProvider at the app root, and wrap every screen (including modals and bottom sheets) in SafeAreaView or read insets via useSafeAreaInsets():

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
  return <SafeAreaProvider><SafeAreaView style={{ flex: 1 }}><Navigation /></SafeAreaView></SafeAreaProvider>;
}

Children rendered outside the tree — modals, sheets — need their own SafeAreaView.