❗❗❗ PLEASE NOTICE ❗❗❗ This package is not longer maintained, plaease use alternatives like react-native-safe-area-context
A library to help you design your react-native app for notched iPhones.
yarn add react-native-iphone-x-helper
or
npm i react-native-iphone-x-helper --save
this method it for creating stylesheets with the iPhone X in mind
iphoneXStyle - the style to apply if you're on iPhone X
regularStyle (optional) - the style to apply if you're not on iPhone X
// in style.js
import { StyleSheet } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-x-helper'
export default StyleSheet.create({
header:{
position: 'absolute',
top: 0,
left: 0,
right: 0,
padding:10,
height: 60,
backgroundColor: 'transparent',
...ifIphoneX({
paddingTop: 50
}, {
paddingTop: 20
})
},
});returns - true if you running on an iPhone X.
import { isIphoneX } from 'react-native-iphone-x-helper'
// ...
if (isIphoneX()) {
// do this...
} else {
// do that...
}returns
- Android:
StatusBar.currentHeight - iOS:
| StatusBarHeight | Devices |
|---|---|
| 20 | Others |
| 44 | iPhoneX, Xs, Xs Max, 11 Pro, 11 Pro Max |
| 47 | iPhone12, 12 Pro, 12 Pro Max, 13, 13 Pro, 13 Pro Max, 14, 14 Plus |
| 48(Not Supported Now) | iPhone11, Xr |
| 50 | iPhone12 Mini, 13 Mini |
| 59 | iPhone14 Pro、14 Pro Max, 15, 15 Plus, 15 Pro, 15 Pro Max, iPhone 16, iPhone 16 Plus |
| 62 | iPhone16 Pro、16 Pro Max |
// in style.js
import { StyleSheet } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper'
export default StyleSheet.create({
header:{
position: 'absolute',
top: 0,
left: 0,
right: 0,
padding:10,
height: 60,
backgroundColor: 'transparent',
paddingTop: getStatusBarHeight()
},
});NOTE: If your using the the unsafe statusbar height, make sure to add 14dp of padding to your content, otherwise it's going to be flush against the notch
returns - the height of the bottom to fit the safe area: 34 for iPhone X and 0 for other devices.
// in style.js
import { StyleSheet } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-x-helper'
export default StyleSheet.create({
totalview: {
flex: 1,
backgroundColor: 'transparent',
marginBottom: getBottomSpace()
},
});returns the device whether contains the dynamic island (iPhone 14 Pro and 14 Pro Max, all iPhone 15 and all iPhone 16).
import { isDynamicIsland } from 'react-native-iphone-x-helper'
// ...
if (isDynamicIsland()) {
// do this...
} else {
// do that...
}MIT