4TWIGGERS/rn-iphone-helper

A library to help you design your react-native app for iPhones

Warning breaking changes in V2:

getStatusBarHeight -> getTopInset

getBottomSpace -> getBottomInset

isIphoneX -> hasNotch

isDynamicIsland -> hasDynamicIsland

ifIphoneX -> was completely removed

rn-iphone-helper

A library to help you design your react-native app for iPhones.

NOTE: Library expects to have expo-device, react-native-device-info or react-native-safe-area-context installed. Otherwise will default to legacy mode. Legacy mode fails to correctly detect Dynamic Island on Simulators.

Installing

yarn add rn-iphone-helper

or

npm i rn-iphone-helper --save

API

hasNotch()

returns - true if iPhone has a notch.

Example

import { hasNotch } from 'rn-iphone-helper';

// ...

if (hasNotch()) {
  // do this...
} else {
  // do that...
}

hasDynamicIsland

returns - true if iPhone has the dynamic island.

Example

import { hasDynamicIsland } from 'rn-iphone-helper';

// ...

if (hasDynamicIsland()) {
  // do this...
} else {
  // do that...
}

hasDisplayCutout

returns - true if iPhone has the dynamic island or a notch.

Example

import { hasDisplayCutout } from 'rn-iphone-helper';

// ...

if (hasDisplayCutout()) {
  // do this...
} else {
  // do that...
}

getTopInset

Parameters

cutoutEnd - (boolean) return notch height only or top inset to fit safe area.

returns

• Android: StatusBar.currentHeight
• iOS: See devices.js

Example

// in style.js

import { StyleSheet } from 'react-native';
import { getTopInset } from 'rn-iphone-helper';

export default StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    padding: 10,
    height: 60,
    backgroundColor: 'transparent',
    paddingTop: getTopInset(),
  },
});

getBottomInset

returns - the bottom inset to fit the safe area: 34 for iPhones with display cutout and 0 for other devices.

Example

// in style.js

import { StyleSheet } from 'react-native';
import { getBottomInset } from 'rn-iphone-helper';

export default StyleSheet.create({
  totalview: {
    flex: 1,
    backgroundColor: 'transparent',
    marginBottom: getBottomInset(),
  },
});

getCutoutProps

returns - display cutout frame and radius. Only works if hasDynamicIsland() === true.

Please open issue if you think adding other device support is worth it

interface CutoutProps {
  left: number;
  top: number;
  width: number;
  height: number;
  radius: number;
}

Licence

MIT

Hire us

Send us an email at hello@4twiggers.com