getStatusBarHeightgetTopInset
getBottomSpacegetBottomInset
isIphoneXhasNotch
isDynamicIslandhasDynamicIsland
ifIphoneX
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.
yarn add rn-iphone-helper
or
npm i rn-iphone-helper --save
returns - true if iPhone has a notch.
import { hasNotch } from 'rn-iphone-helper';
// ...
if (hasNotch()) {
// do this...
} else {
// do that...
}returns - true if iPhone has the dynamic island.
import { hasDynamicIsland } from 'rn-iphone-helper';
// ...
if (hasDynamicIsland()) {
// do this...
} else {
// do that...
}returns - true if iPhone has the dynamic island or a notch.
import { hasDisplayCutout } from 'rn-iphone-helper';
// ...
if (hasDisplayCutout()) {
// do this...
} else {
// do that...
}cutoutEnd - (boolean) return notch height only or top inset to fit safe area.
returns
- Android:
StatusBar.currentHeight - iOS: See devices.js
// 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(),
},
});returns - the bottom inset to fit the safe area: 34 for iPhones with display cutout and 0 for other devices.
// 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(),
},
});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;
}MIT
Send us an email at hello@4twiggers.com
