41 lines
1.7 KiB
Markdown
41 lines
1.7 KiB
Markdown
# react-native-is-edge-to-edge
|
|
|
|
Many libraries provide options to account for the transparency of status and navigation bars. For example, the [`useHideAnimation`](https://github.com/zoontek/react-native-bootsplash?tab=readme-ov-file#usehideanimation) hook in `react-native-bootsplash` includes `statusBarTranslucent` and `navigationBarTranslucent` options, while the [`useAnimatedKeyboard`](https://docs.swmansion.com/react-native-reanimated/docs/device/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,
|
|
isEdgeToEdgeFromLibrary,
|
|
isEdgeToEdgeFromProperty,
|
|
} 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 (
|
|
<MyAwesomeLibraryNativeComponent
|
|
statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
|
|
navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
|
|
// …
|
|
/>
|
|
);
|
|
}
|
|
```
|