Detect react-native-edge-to-edge package install
npm install react-native-is-edge-to-edgeMany libraries provide options to account for the transparency of status and navigation bars. For example, the useHideAnimation hook in react-native-bootsplash includes statusBarTranslucent and navigationBarTranslucent options, while the useAnimatedKeyboard hook in react-native-reanimated offers an isStatusBarTranslucentAndroid option, among others.
> [!IMPORTANT]
> Until third-party libraries officially add support for react-native-edge-to-edge to set these options automatically, you may need to adjust them manually to prevent interference with the library.
To support library authors, we provide this lightweight package called react-native-is-edge-to-edge (note the -is-!), which checks whether react-native-edge-to-edge is installed, making it easier to update your library accordingly:
``tsx
import {
controlEdgeToEdgeValues,
isEdgeToEdge,
} from "react-native-is-edge-to-edge";
const EDGE_TO_EDGE = isEdgeToEdge();
function MyAwesomeLibraryComponent({
statusBarTranslucent,
navigationBarTranslucent,
}) {
if (__DEV__) {
// warn the user once about unnecessary defined values
controlEdgeToEdgeValues({
statusBarTranslucent,
navigationBarTranslucent,
});
}
return (
navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
// …
/>
);
}
`
If you want to check for the library's presence on the native side to bypass certain parts of your code, consider using this small utility:
`kotlin``
object EdgeToEdge {
// we cannot detect edge-to-edge, but we can detect react-native-edge-to-edge install
val ENABLED: Boolean = try {
Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
true
} catch (exception: ClassNotFoundException) {
false
}
}