A library to help you design your react-native app for the iPhone
npm install react-native-iphone-screen-helper
I forked this project to continue working on it.
This project is a fork of https://www.npmjs.com/package/react-native-iphone-x-helper .
The original repository is not maintained anymore.
The project will be continued in this repository. react-native-iphone-screen-helper is fully compatible.
If you want to support the project feel free to contact me or create a pull request with your feature.
yarn add react-native-iphone-screen-helperor
npm i react-native-iphone-screen-helper --save
#### Parameters ####
iphoneXStyle - the style to apply if you're on iPhone X or newer models with a notch or dynamic island.
regularStyle (optional) - the style to apply if you're not on iPhone X
#### Example ####
``js
// in style.js
import { StyleSheet } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-screen-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're running on an iPhone X or a newer model with a notch or dynamic island.
#### Example ####
`js
import { isIphoneX } from 'react-native-iphone-screen-helper'
// ...
if (isIphoneX()) {
// do this...
} else {
// do that...
}
`
returns - the height of the status bar:
- 62 for safe iPhone 16 Pro Max59
- for safe iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, 15 Pro Max, 16, 16 Plus, 16 Pro50
- for safe iPhone 12 Mini, 13 Mini47
- for safe iPhone 12, 12 Pro, 12 Pro Max, 13, 13 Pro, 13 Pro Max, 14, 14 Plus44
- for safe iPhone X, Xs, Xs Max, 11 Pro, 11 Pro Max48
- for safe iPhone Xr, 1120
- for other devicesStatusBar.currentHeight
- for Android.
#### Example ####
`js
// in style.js
import { StyleSheet } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-screen-helper'
export default StyleSheet.create({
header:{
position: 'absolute',
top: 0,
left: 0,
right: 0,
padding:10,
height: 60,
backgroundColor: 'transparent',
paddingTop: getStatusBarHeight()
},
});
`
returns - the height of the bottom to fit the safe area: 34 for iPhone X and newer models with a notch or dynamic island, and 0 for other devices.
#### Example ####
`js
// in style.js
import { StyleSheet } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-screen-helper'
export default StyleSheet.create({
totalview: {
flex: 1,
backgroundColor: 'transparent',
marginBottom: getBottomSpace()
},
});
``