{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-is-edge-to-edge"],"cli":null},"imports":["import { isEdgeToEdge } from 'react-native-is-edge-to-edge';","import { controlEdgeToEdgeValues } from 'react-native-is-edge-to-edge';","import { isEdgeToEdgeFromLibrary } from 'react-native-is-edge-to-edge';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}