react-native-is-edge-to-edge

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;