React Native Edge-to-Edge Display

Common errors

• Failed to resolve: com.google.android.material:material

  cause The native Android dependency `com.google.android.material:material` was missing from the project's Gradle configuration.
  fix Upgrade `react-native-edge-to-edge` to version `1.8.1` or higher, which includes a fix for this missing dependency.

• System bars (status or navigation) unexpectedly reappear after keyboard dismissal on Android.

  cause A bug in older versions caused system bars to become visible again after the soft keyboard was dismissed, particularly on Android API 27.
  fix Update `react-native-edge-to-edge` to version `1.8.0` or later to fix this issue.

• Hidden navigation bar reappears on MIUI devices after backgrounding and foregrounding the app.

  cause A specific issue on MIUI where the navigation bar state was not correctly preserved across app lifecycle events.
  fix Upgrade `react-native-edge-to-edge` to version `1.4.3` or newer to resolve this MIUI-specific bug.

• Status bar remains hidden after app launch, even if it should be visible.

  cause An issue where the status bar might not correctly show if the app was started with it initially hidden.
  fix Update `react-native-edge-to-edge` to version `1.6.1` or later to ensure the status bar's visibility is correctly managed upon app start.

Warnings

• breaking Starting with React Native 0.81, consider using the built-in `edgeToEdgeEnabled=true` Gradle property along with `@zoontek/react-native-navigation-bar` instead of this library for edge-to-edge functionality, as it may become the preferred and more integrated approach.
  Fix: For new projects or upgrades to React Native 0.81+, explore `edgeToEdgeEnabled=true` in Gradle and `@zoontek/react-native-navigation-bar`. For older versions or specific needs, continue using `react-native-edge-to-edge`.
• gotcha Google is expected to mandate that app updates on the Play Store target SDK 35 starting August 31, 2025. Apps targeting SDK 35 will have edge-to-edge display enforced by default on Android 15+, which may affect existing non-edge-to-edge layouts.
  Fix: Proactively update your application to use edge-to-edge design patterns with this library to ensure a consistent experience and compliance with future Play Store requirements.
• breaking The `StatusBar` component's underlying `FLAG_FULLSCREEN` is deprecated since Android 11. Relying on it for immersive mode can lead to inconsistent behavior on newer Android versions.
  Fix: Use `react-native-edge-to-edge`'s `SystemBars` component or `setSystemBarsHidden` imperative method for consistent control over system bar visibility, as it uses modern Android APIs.
• gotcha When setting `androidNavigationBar.barStyle`, it will only take effect if `enforceNavigationBarContrast` is explicitly set to `false` in your theme. This was a fix for an issue where styles were not applied correctly.
  Fix: Ensure `enforceNavigationBarContrast` is set to `false` in your Android theme if you need to customize `androidNavigationBar.barStyle`.

Install

• npm install react-native-edge-to-edge npm
• yarn add react-native-edge-to-edge yarn
• pnpm add react-native-edge-to-edge pnpm

Imports

• SystemBars
  wrong:

  const { SystemBars } = require('react-native-edge-to-edge')

  correct:

  import { SystemBars } from 'react-native-edge-to-edge'

  Primary component/hook for controlling system bar styles and visibility. Use named import for direct access.
• edgeToEdge
  wrong:

  import { edgeToEdge } from 'react-native-edge-to-edge/expo'

  correct:

  import edgeToEdge from 'react-native-edge-to-edge/expo'

  Dedicated function for Expo dynamic configuration (`app.config.ts`). In `app.config.js` (CommonJS), use `const edgeToEdge = require('react-native-edge-to-edge/expo')`.
• setSystemBarStyle, setSystemBarsHidden

  import { setSystemBarStyle, setSystemBarsHidden } from 'react-native-edge-to-edge'

  Imperative methods for controlling system bar styles and visibility introduced in v1.6.0. Used similarly to `SystemBars` component props.

Quickstart

Demonstrates enabling edge-to-edge display by updating the Android theme and using the `SystemBars` component to control status and navigation bar appearance within a React Native application.

import React from 'react';
import { SafeAreaView, Text, View, StyleSheet } from 'react-native';
import { SystemBars } from 'react-native-edge-to-edge';

// Android Theme configuration (in android/app/src/main/res/values/themes.xml or styles.xml):
// <style name="AppTheme" parent="Theme.EdgeToEdge.Material3">
//     <!-- Your customizations -->
// </style>

export default function App() {
  return (
    <View style={styles.container}>
      <SystemBars
        style="dark-content"
        hidden={false}
        animated={true}
        navigationBarStyle="light-content"
      />
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.text}>
          Welcome to the Edge-to-Edge React Native App!
        </Text>
        <Text style={styles.subText}>
          Content now flows beautifully beneath system bars.
        </Text>
        {/* Your main application content goes here */}
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#303030',
  },
  safeArea: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#E0E0E0',
    textAlign: 'center',
    marginBottom: 10,
  },
  subText: {
    fontSize: 16,
    color: '#B0B0B0',
    textAlign: 'center',
  },
});