{"id":15788,"library":"react-native-edge-to-edge","title":"React Native Edge-to-Edge Display","description":"react-native-edge-to-edge is a React Native library designed to simplify enabling the edge-to-edge display on Android devices (v6+), allowing app content to flow seamlessly under system bars (status and navigation bars). It aims to provide a consistent user experience with iOS and modern Android design patterns, effectively replacing deprecated methods like `FLAG_FULLSCREEN` for immersive modes. The library is currently at version 1.8.1, actively maintained, and follows React Native's release support policy, supporting the latest and two previous minor series. It sees regular updates, often addressing platform-specific quirks and integrating with new Android themeing. A key differentiator is its straightforward configuration via theme inheritance and a dedicated Expo plugin, offering a robust solution as Android 15+ is expected to enforce edge-to-edge by default.","status":"active","version":"1.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/zoontek/react-native-edge-to-edge","tags":["javascript","react","react-native","edge-to-edge","status-bar","navigation-bar","system-bar","system-bars","typescript"],"install":[{"cmd":"npm install react-native-edge-to-edge","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-edge-to-edge","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-edge-to-edge","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native components and hooks.","package":"react","optional":false},{"reason":"Core peer dependency for any React Native library.","package":"react-native","optional":false}],"imports":[{"note":"Primary component/hook for controlling system bar styles and visibility. Use named import for direct access.","wrong":"const { SystemBars } = require('react-native-edge-to-edge')","symbol":"SystemBars","correct":"import { SystemBars } from 'react-native-edge-to-edge'"},{"note":"Dedicated function for Expo dynamic configuration (`app.config.ts`). In `app.config.js` (CommonJS), use `const edgeToEdge = require('react-native-edge-to-edge/expo')`.","wrong":"import { edgeToEdge } from 'react-native-edge-to-edge/expo'","symbol":"edgeToEdge","correct":"import edgeToEdge from 'react-native-edge-to-edge/expo'"},{"note":"Imperative methods for controlling system bar styles and visibility introduced in v1.6.0. Used similarly to `SystemBars` component props.","symbol":"setSystemBarStyle, setSystemBarsHidden","correct":"import { setSystemBarStyle, setSystemBarsHidden } from 'react-native-edge-to-edge'"}],"quickstart":{"code":"import React from 'react';\nimport { SafeAreaView, Text, View, StyleSheet } from 'react-native';\nimport { SystemBars } from 'react-native-edge-to-edge';\n\n// Android Theme configuration (in android/app/src/main/res/values/themes.xml or styles.xml):\n// <style name=\"AppTheme\" parent=\"Theme.EdgeToEdge.Material3\">\n//     <!-- Your customizations -->\n// </style>\n\nexport default function App() {\n  return (\n    <View style={styles.container}>\n      <SystemBars\n        style=\"dark-content\"\n        hidden={false}\n        animated={true}\n        navigationBarStyle=\"light-content\"\n      />\n      <SafeAreaView style={styles.safeArea}>\n        <Text style={styles.text}>\n          Welcome to the Edge-to-Edge React Native App!\n        </Text>\n        <Text style={styles.subText}>\n          Content now flows beautifully beneath system bars.\n        </Text>\n        {/* Your main application content goes here */}\n      </SafeAreaView>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#303030',\n  },\n  safeArea: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingHorizontal: 20,\n  },\n  text: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#E0E0E0',\n    textAlign: 'center',\n    marginBottom: 10,\n  },\n  subText: {\n    fontSize: 16,\n    color: '#B0B0B0',\n    textAlign: 'center',\n  },\n});","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=0.81.0 (React Native)"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions, especially future Android 15+ target SDK 35."},{"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.","message":"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.","severity":"breaking","affected_versions":"All versions on Android 11+"},{"fix":"Ensure `enforceNavigationBarContrast` is set to `false` in your Android theme if you need to customize `androidNavigationBar.barStyle`.","message":"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.","severity":"gotcha","affected_versions":"<=1.4.2"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade `react-native-edge-to-edge` to version `1.8.1` or higher, which includes a fix for this missing dependency.","cause":"The native Android dependency `com.google.android.material:material` was missing from the project's Gradle configuration.","error":"Failed to resolve: com.google.android.material:material"},{"fix":"Update `react-native-edge-to-edge` to version `1.8.0` or later to fix this issue.","cause":"A bug in older versions caused system bars to become visible again after the soft keyboard was dismissed, particularly on Android API 27.","error":"System bars (status or navigation) unexpectedly reappear after keyboard dismissal on Android."},{"fix":"Upgrade `react-native-edge-to-edge` to version `1.4.3` or newer to resolve this MIUI-specific bug.","cause":"A specific issue on MIUI where the navigation bar state was not correctly preserved across app lifecycle events.","error":"Hidden navigation bar reappears on MIUI devices after backgrounding and foregrounding the app."},{"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.","cause":"An issue where the status bar might not correctly show if the app was started with it initially hidden.","error":"Status bar remains hidden after app launch, even if it should be visible."}],"ecosystem":"npm"}