Registry / react-native-edge-to-edge
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
SystemBars
✓ import { SystemBars } from 'react-native-edge-to-edge'
✗ const { SystemBars } = require('react-native-edge-to-edge')
Primary component/hook for controlling system bar styles and visibility. Use named import for direct access.
edgeToEdge
✓ import edgeToEdge from 'react-native-edge-to-edge/expo'
✗ 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.
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',
},
});
Debug
Known issues
breakingStarting 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.fixFor 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`.
affects: >=0.81.0 (React Native)
gotchaGoogle 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.fixProactively 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.
affects: All versions, especially future Android 15+ target SDK 35.
breakingThe `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.fixUse `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.
affects: All versions on Android 11+
gotchaWhen 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.fixEnsure `enforceNavigationBarContrast` is set to `false` in your Android theme if you need to customize `androidNavigationBar.barStyle`.
affects: <=1.4.2
Errors
Common errors & fixes
Failed to resolve: com.google.android.material:material
The native Android dependency `com.google.android.material:material` was missing from the project's Gradle configuration.
fixUpgrade `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.
A bug in older versions caused system bars to become visible again after the soft keyboard was dismissed, particularly on Android API 27.
fixUpdate `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.
A specific issue on MIUI where the navigation bar state was not correctly preserved across app lifecycle events.
fixUpgrade `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.
An issue where the status bar might not correctly show if the app was started with it initially hidden.
fixUpdate `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.
Audit
Dependencies
reactrequiredPeer dependency for React Native components and hooks.
react-nativerequiredCore peer dependency for any React Native library.