React Native Edge-to-Edge Installation Detector

Common errors

• Console warning: 'statusBarTranslucent' or 'navigationBarTranslucent' is defined but react-native-edge-to-edge is active.

  cause A third-party library or an application component is explicitly setting system bar translucency properties while `react-native-edge-to-edge` is already managing these behaviors, potentially leading to redundant or conflicting configurations.
  fix If you are a library user, check your component props and remove explicit `statusBarTranslucent` or `navigationBarTranslucent` settings if `react-native-edge-to-edge` is intended to control them. If you are a library author, ensure your library correctly uses `controlEdgeToEdgeValues` to guide users, and adjust your own internal logic to respect `react-native-edge-to-edge`'s active state.

• Edge-to-edge UI effects (e.g., transparent status/navigation bars) are not visible despite `isEdgeToEdge()` returning true.

  cause While `react-native-is-edge-to-edge` may detect the *presence* of the main `react-native-edge-to-edge` package, the core library itself might not be correctly installed, linked, or configured in the native Android project (e.g., missing XML styles, `com.google.android.material:material` dependency issues).
  fix Thoroughly review the installation and configuration steps for the primary `react-native-edge-to-edge` package. Check Android manifest, `styles.xml`, and `build.gradle` for correct setup and ensure all native dependencies are satisfied, especially `com.google.android.material:material`.

Warnings

• gotcha Libraries consuming `react-native-is-edge-to-edge` must still ensure their own translucency (`statusBarTranslucent`, `navigationBarTranslucent`) options are adjusted to avoid visual conflicts or redundant settings when `react-native-edge-to-edge` is detected as active. This detector package does not automatically manage system bar behavior.
  Fix: Manually integrate the `isEdgeToEdge()` check within your component's logic or use context providers to dynamically set translucency props based on the detection result. Refer to the `react-native-edge-to-edge` documentation for how it expects other libraries to integrate.
• gotcha When `react-native-edge-to-edge` is detected as active, explicitly setting `statusBarTranslucent` or `navigationBarTranslucent` in a consuming library might be redundant or could lead to unexpected behavior. The `controlEdgeToEdgeValues` utility is provided to help library authors warn end-users about such unnecessary definitions during development.
  Fix: Library authors should integrate `controlEdgeToEdgeValues` in `__DEV__` mode to provide helpful console warnings. Library users should configure their translucency settings primarily through `react-native-edge-to-edge` and avoid redundant manual settings if the library is already handling them.

Install

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

Imports

• isEdgeToEdge
  wrong:

  const isEdgeToEdge = require('react-native-is-edge-to-edge').isEdgeToEdge;

  correct:

  import { isEdgeToEdge } from 'react-native-is-edge-to-edge';

  Primary function to check if the main `react-native-edge-to-edge` library is active.
• controlEdgeToEdgeValues
  wrong:

  const { controlEdgeToEdgeValues } = require('react-native-is-edge-to-edge');

  correct:

  import { controlEdgeToEdgeValues } from 'react-native-is-edge-to-edge';

  A utility function for library authors to warn users about redundant translucency props when edge-to-edge is active.
• isEdgeToEdgeFromLibrary
  wrong:

  import isEdgeToEdgeFromLibrary from 'react-native-is-edge-to-edge/isEdgeToEdgeFromLibrary';

  correct:

  import { isEdgeToEdgeFromLibrary } from 'react-native-is-edge-to-edge';

  One of the internal checks used by `isEdgeToEdge()`, useful for granular detection methods.

Quickstart

This example demonstrates how a library component can use `isEdgeToEdge()` to adapt its behavior and warn users about redundant props, ensuring compatibility with the main `react-native-edge-to-edge` library.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {
  controlEdgeToEdgeValues,
  isEdgeToEdge,
  isEdgeToEdgeFromLibrary, // Useful for granular checks if needed
  isEdgeToEdgeFromProperty, // Checks a specific property flag
} from "react-native-is-edge-to-edge";

// Determine if react-native-edge-to-edge is active in the current environment.
// This is the primary function for most library authors.
const IS_EDGE_TO_EDGE_ACTIVE = isEdgeToEdge();

interface MyLibraryComponentProps {
  // These props might be passed by the user of your library.
  statusBarTranslucent?: boolean;
  navigationBarTranslucent?: boolean;
}

// A hypothetical component from a third-party library that needs to
// adapt to edge-to-edge mode.
function MyAwesomeLibraryComponent({
  statusBarTranslucent = false, // Default to false if not provided
  navigationBarTranslucent = false, // Default to false if not provided
}: MyLibraryComponentProps) {
  // In development, warn library users if they are setting redundant translucency props
  // when react-native-edge-to-edge is already managing system bars.
  if (__DEV__) {
    controlEdgeToEdgeValues({
      statusBarTranslucent,
      navigationBarTranslucent,
    });
  }

  // Your internal native component or view might then consume these adjusted values.
  // If edge-to-edge is active, we prioritize its setting, otherwise fall back to user-provided props.
  return (
    <View style={[
        styles.container,
        IS_EDGE_TO_EDGE_ACTIVE && styles.edgeToEdgePadding // Apply specific styling for edge-to-edge
    ]}>
      <Text>
        Edge-to-Edge is {IS_EDGE_TO_EDGE_ACTIVE ? 'ACTIVE' : 'INACTIVE'}
      </Text>
      <Text>
        Status Bar Translucency: {IS_EDGE_TO_EDGE_ACTIVE || statusBarTranslucent ? 'True' : 'False'}
      </Text>
      <Text>
        Navigation Bar Translucency: {IS_EDGE_TO_EDGE_ACTIVE || navigationBarTranslucent ? 'True' : 'False'}
      </Text>
      {/* Imagine a native component rendering here with adjusted props */}
      {/* <MyAwesomeLibraryNativeComponent
        statusBarTranslucent={IS_EDGE_TO_EDGE_ACTIVE || statusBarTranslucent}
        navigationBarTranslucent={IS_EDGE_TO_EDGE_ACTIVE || navigationBarTranslucent}
        // ... other props
      /> */}
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
    },
    edgeToEdgePadding: {
        // This is a placeholder for actual edge-to-edge safe area handling.
        // In a real app, you'd use `react-native-safe-area-context` or similar.
        paddingTop: 0,
        paddingBottom: 0,
        // Potentially more complex logic based on `react-native-edge-to-edge` hooks.
    }
});

export default MyAwesomeLibraryComponent;