[Android] System bottom navigation is covering app content

[Z1A1]

When using react-native-safe-area-context on Android with edge-to-edge navigation and a transparent system navigation bar, the app layout can be covered by the system bottom navigation (with classic/nav bar buttons). The content does not respect bottom insets and appears under the navigation bar, making UI elements at the bottom inaccessible or hidden.

See the attached screenshot for reference:

[Mahimsharma]

We ran into the same issue — Android 16 (API 36) enforces edge-to-edge by default, and react-native-safe-area-context insets aren't automatically applied to the app layout, so the system navigation bar overlaps content.

Workaround

We created a simple wrapper component that applies paddingBottom using useSafeAreaInsets(), but only on Android 16+:

import { Platform, View } from 'react-native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

const isAndroid16 = Platform.OS === 'android' && Platform.Version >= 36;

const AndroidEdgeToEdgeSpacer = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const insets = useSafeAreaInsets();
  if (!isAndroid16) return <>{children}</>;
  return (
    <View style={{ flex: 1, paddingBottom: insets.bottom }}>{children}</View>
  );
};

Then wrap your app content with it inside SafeAreaProvider:

<SafeAreaProvider>
  <AndroidEdgeToEdgeSpacer>
    {/* rest of your app */}
  </AndroidEdgeToEdgeSpacer>
</SafeAreaProvider>

This keeps behavior unchanged on older Android versions and iOS, while adding the bottom inset padding needed for Android 16's mandatory edge-to-edge layout.

[cjxe]

but some Androids don't have the 3 buttons, so no inset is appropriate for these

so a simple wrapper with insets.bottom is not enough for all Androids