# react-native-is-edge-to-edge

> Detect react-native-edge-to-edge package install

Latest version **1.3.1** (published 2026-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-is-edge-to-edge
pnpm add react-native-is-edge-to-edge
yarn add react-native-is-edge-to-edge
bun add react-native-is-edge-to-edge
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2026-03-03 |
| First published | 2024-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1034 |
| Author | Mathieu Acthernoene |
| Maintainers | brentvatne, zoontek |
| Keywords | react, react-native, edge-to-edge, status-bar, navigation-bar, system-bar, system-bars |

## Links

- npm: https://www.npmjs.com/package/react-native-is-edge-to-edge
- Repository: https://github.com/zoontek/react-native-edge-to-edge
- Issues: https://github.com/zoontek/react-native-edge-to-edge/issues
- npm.io page: https://npm.io/package/react-native-is-edge-to-edge

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2026-03-03
- 1.3.0 — 2026-03-03
- 1.2.1 — 2025-07-01
- 1.2.0 — 2025-07-01
- 1.1.7 — 2025-04-04
- 1.1.6 — 2024-10-29
- 1.1.5 — 2024-10-27
- 1.1.4 — 2024-10-27
- 1.1.3 — 2024-10-27
- 1.1.2 — 2024-10-27
- 1.1.1 — 2024-10-27
- 1.1.0 — 2024-10-27
- 1.0.0 — 2024-10-23
- 0.1.2 — 2024-10-15
- 0.1.1 — 2024-10-15
- … 2 more at https://npm.io/package/react-native-is-edge-to-edge/versions

## README

# 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}
      // …
    />
  );
}
```

---
_Source: https://npm.io/package/react-native-is-edge-to-edge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._