Why is there white space at the bottom of my app on iPhone?

If your screen looks right everywhere except for a white or gray band along the bottom of newer iPhones, your layout is already half right. Your content is clear of the home indicator, but nothing fills that area with your background color.

Why it happens

iPhones without a home button reserve space at the top and bottom of the screen, called the safe area, so content doesn’t sit under the notch or the home indicator. When a screen’s background color is set on a view that sits inside that safe area padding, the padding itself shows whatever is behind it, and that’s the band you’re seeing.

Two other things can leave the same gap: a fixed height (for example, a view sized to Dimensions.get("window").height), and a bottom bar that adds its own padding on top of yours.

How to fix it

1. Use react-native-safe-area-context. React Native’s own SafeAreaView only ever worked on iOS, and it’s deprecated as of React Native 0.81. Wrap your app once in SafeAreaProvider, unless you’re using Expo Router, where that wrapper is already in place.

2. Put the background color on the outermost view, so it fills the whole screen including the safe area, and let the safe area padding go on the inside:

   import { SafeAreaView } from "react-native-safe-area-context";
   
   <SafeAreaView edges={["top"]} style={{ flex: 1, backgroundColor: "#0B1220" }}>
     <Screen />
   </SafeAreaView>;

   The edges prop sets which sides get padding. We’d leave out "bottom", so your background runs under the home indicator.

3. Pad only the content that must stay clear, like a button at the very bottom or the end of a list, with the bottom inset:

   const insets = useSafeAreaInsets();
   <ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + 16 }} />;

4. Replace fixed heights with flex: 1, so the screen always fills the device, whatever its size.

Apps are drawn edge to edge on newer versions of Android too, so the same approach keeps your screens looking right there.

How you know it’s fixed

On an iPhone with a home indicator, your background color reaches the bottom edge of the screen, and nothing important sits under the indicator.

If it’s still there

Look for a parent view with its own background color, or a tab bar or navigator that adds bottom padding. Temporarily giving each wrapper a bright background color is a quick way to see which one is showing.