{"id":11776,"library":"react-native-is-edge-to-edge","title":"React Native Edge-to-Edge Installation Detector","description":"`react-native-is-edge-to-edge` is a specialized, lightweight utility package designed for React Native library authors. Its primary function is to programmatically detect the presence and activation of the `react-native-edge-to-edge` package within an application's environment. This detection capability allows third-party libraries (e.g., UI components, animation libraries) to dynamically adapt their behavior concerning system bar translucency (status and navigation bars), preventing potential visual glitches or redundant configuration efforts when `react-native-edge-to-edge` is in use. The current stable version of this detector package is 1.3.1, and its development cadence is directly tied to the needs of the broader `react-native-edge-to-edge` ecosystem it supports. It differentiates itself by offering a simple, explicit check for the main edge-to-edge library, acting as an interoperability layer rather than providing the edge-to-edge functionality itself. The package ships with TypeScript types, facilitating safer integration into TypeScript-based projects.","status":"active","version":"1.3.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-is-edge-to-edge","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-is-edge-to-edge","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-is-edge-to-edge","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React Native packages.","package":"react","optional":false},{"reason":"Peer dependency for all React Native packages.","package":"react-native","optional":false}],"imports":[{"note":"Primary function to check if the main `react-native-edge-to-edge` library is active.","wrong":"const isEdgeToEdge = require('react-native-is-edge-to-edge').isEdgeToEdge;","symbol":"isEdgeToEdge","correct":"import { isEdgeToEdge } from 'react-native-is-edge-to-edge';"},{"note":"A utility function for library authors to warn users about redundant translucency props when edge-to-edge is active.","wrong":"const { controlEdgeToEdgeValues } = require('react-native-is-edge-to-edge');","symbol":"controlEdgeToEdgeValues","correct":"import { controlEdgeToEdgeValues } from 'react-native-is-edge-to-edge';"},{"note":"One of the internal checks used by `isEdgeToEdge()`, useful for granular detection methods.","wrong":"import isEdgeToEdgeFromLibrary from 'react-native-is-edge-to-edge/isEdgeToEdgeFromLibrary';","symbol":"isEdgeToEdgeFromLibrary","correct":"import { isEdgeToEdgeFromLibrary } from 'react-native-is-edge-to-edge';"}],"quickstart":{"code":"import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport {\n  controlEdgeToEdgeValues,\n  isEdgeToEdge,\n  isEdgeToEdgeFromLibrary, // Useful for granular checks if needed\n  isEdgeToEdgeFromProperty, // Checks a specific property flag\n} from \"react-native-is-edge-to-edge\";\n\n// Determine if react-native-edge-to-edge is active in the current environment.\n// This is the primary function for most library authors.\nconst IS_EDGE_TO_EDGE_ACTIVE = isEdgeToEdge();\n\ninterface MyLibraryComponentProps {\n  // These props might be passed by the user of your library.\n  statusBarTranslucent?: boolean;\n  navigationBarTranslucent?: boolean;\n}\n\n// A hypothetical component from a third-party library that needs to\n// adapt to edge-to-edge mode.\nfunction MyAwesomeLibraryComponent({\n  statusBarTranslucent = false, // Default to false if not provided\n  navigationBarTranslucent = false, // Default to false if not provided\n}: MyLibraryComponentProps) {\n  // In development, warn library users if they are setting redundant translucency props\n  // when react-native-edge-to-edge is already managing system bars.\n  if (__DEV__) {\n    controlEdgeToEdgeValues({\n      statusBarTranslucent,\n      navigationBarTranslucent,\n    });\n  }\n\n  // Your internal native component or view might then consume these adjusted values.\n  // If edge-to-edge is active, we prioritize its setting, otherwise fall back to user-provided props.\n  return (\n    <View style={[\n        styles.container,\n        IS_EDGE_TO_EDGE_ACTIVE && styles.edgeToEdgePadding // Apply specific styling for edge-to-edge\n    ]}>\n      <Text>\n        Edge-to-Edge is {IS_EDGE_TO_EDGE_ACTIVE ? 'ACTIVE' : 'INACTIVE'}\n      </Text>\n      <Text>\n        Status Bar Translucency: {IS_EDGE_TO_EDGE_ACTIVE || statusBarTranslucent ? 'True' : 'False'}\n      </Text>\n      <Text>\n        Navigation Bar Translucency: {IS_EDGE_TO_EDGE_ACTIVE || navigationBarTranslucent ? 'True' : 'False'}\n      </Text>\n      {/* Imagine a native component rendering here with adjusted props */}\n      {/* <MyAwesomeLibraryNativeComponent\n        statusBarTranslucent={IS_EDGE_TO_EDGE_ACTIVE || statusBarTranslucent}\n        navigationBarTranslucent={IS_EDGE_TO_EDGE_ACTIVE || navigationBarTranslucent}\n        // ... other props\n      /> */}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: '#f0f0f0',\n    },\n    edgeToEdgePadding: {\n        // This is a placeholder for actual edge-to-edge safe area handling.\n        // In a real app, you'd use `react-native-safe-area-context` or similar.\n        paddingTop: 0,\n        paddingBottom: 0,\n        // Potentially more complex logic based on `react-native-edge-to-edge` hooks.\n    }\n});\n\nexport default MyAwesomeLibraryComponent;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"Console warning: 'statusBarTranslucent' or 'navigationBarTranslucent' is defined but react-native-edge-to-edge is active."},{"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`.","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).","error":"Edge-to-edge UI effects (e.g., transparent status/navigation bars) are not visible despite `isEdgeToEdge()` returning true."}],"ecosystem":"npm"}