@junioorpl/react-native-safe-edges

Device-aware edge insets for React Native. Two APIs, one package — pick what fits your app.

Install

npm install @junioorpl/react-native-safe-edges

For the hook API, also install:

npm install react-native-safe-area-context

APIs

Static API — getStaticEdges(), TOP, BOTTOM

Uses a built-in device dimension map. Values resolve once at module load.

import { TOP, BOTTOM } from '@junioorpl/react-native-safe-edges';

<View style={{ marginTop: TOP, paddingBottom: BOTTOM }}>
  <Text>Content</Text>
</View>

Or get full device info:

import { getStaticEdges } from '@junioorpl/react-native-safe-edges';

const { top, bottom, model } = getStaticEdges();
// model → "iPhone 16 Pro Max"

Hook API — useSafeEdges()

Uses react-native-safe-area-context for runtime detection. Requires <SafeAreaProvider> wrapping your app.

import { useSafeEdges } from '@junioorpl/react-native-safe-edges';

function Screen() {
  const { top, bottom, left, right } = useSafeEdges();

  return (
    <View style={{ paddingTop: top, paddingBottom: bottom }}>
      <Text>Content</Text>
    </View>
  );
}

Which API should I use?

| | Static API | Hook API | |---|---|---| | Dependencies | None (just react-native) | react-native-safe-area-context | | Resolution | Module load (once) | Runtime (reactive) | | Landscape support | No | Yes | | New device support | Needs package update | Automatic | | Works outside React | Yes | No (hook) | | Accuracy | Per-model lookup table | Native system values | | Setup | Zero config | Requires <SafeAreaProvider> |

Use Static when: you need simple top/bottom offsets, want zero setup, or need values outside the React tree (navigation config, style constants).

Use Hook when: you need runtime accuracy, landscape support, or want automatic support for future devices without waiting for a package update.

Both are fine to use in the same app. Common pattern: static for navigation/layout constants, hook for screen-level adaptive padding.

Supported Devices

iOS (dimension map)

| Dimensions | Models | |---|---| | 375×667 | iPhone 8, SE (2nd & 3rd gen) | | 414×736 | iPhone 8 Plus | | 375×812 | iPhone X, XS, 11 Pro, 12 Mini, 13 Mini | | 414×896 | iPhone XR, XS Max, 11, 11 Pro Max | | 390×844 | iPhone 12, 12 Pro, 13, 13 Pro, 14, 15, 16, 16e | | 428×926 | iPhone 12/13 Pro Max, 14 Plus, 15 Plus, 16 Plus | | 393×852 | iPhone 14 Pro, 15 Pro, 16 Pro | | 430×932 | iPhone 14 Pro Max, 15 Pro Max, 16 Pro Max | | 402×874 | iPhone 17, 17 Pro | | 420×912 | iPhone 17 Air | | 440×956 | iPhone 17 Pro Max |

Android

Uses StatusBar.currentHeight from React Native (no hardcoded values).

Keeping this package updated

New iPhone? New dimensions? Open an issue or PR:

1. Add the entry to src/devices.ts
2. Update the table above
3. Bump minor version

https://github.com/junioorpl/react-native-safe-edges/issues

License

MIT