What is react-native-iphone-x-helper?
The react-native-iphone-x-helper package provides utilities to help handle the layout and design issues specific to iPhone X and later models with notches and home indicator areas. It helps developers ensure their apps look good and function well on these devices.
What are react-native-iphone-x-helper's main functionalities?
getStatusBarHeight
This function returns the height of the status bar, which can vary depending on the device. It helps in adjusting the layout to avoid overlapping with the status bar.
const { getStatusBarHeight } = require('react-native-iphone-x-helper');
const statusBarHeight = getStatusBarHeight();
console.log(statusBarHeight);
getBottomSpace
This function returns the height of the bottom space, which is the area occupied by the home indicator on iPhone X and later models. It helps in adjusting the layout to avoid overlapping with the home indicator.
const { getBottomSpace } = require('react-native-iphone-x-helper');
const bottomSpace = getBottomSpace();
console.log(bottomSpace);
isIphoneX
This function checks if the device is an iPhone X or later model. It can be used to conditionally apply styles or layouts specific to these devices.
const { isIphoneX } = require('react-native-iphone-x-helper');
const isX = isIphoneX();
console.log(isX);
Other packages similar to react-native-iphone-x-helper
react-native-safe-area-context
The react-native-safe-area-context package provides a flexible way to handle safe area insets in a cross-platform manner. It offers hooks and components to easily access and use safe area insets, making it a more versatile solution compared to react-native-iphone-x-helper, which is specifically tailored for iPhone X and later models.
react-native-safe-area-view
The react-native-safe-area-view package provides a component that automatically applies safe area insets as padding to its children. It is a more component-based approach compared to react-native-iphone-x-helper, which provides utility functions.
react-native-iphone-x-helper
A library to help you design your react-native app for notched iPhones.
Installing
npm i react-native-iphone-x-helper --save
API
ifIphoneX(iphoneXStyle, [regularStyle])
this method it for creating stylesheets with the iPhone X in mind
Parameters
iphoneXStyle - the style to apply if you're on iPhone X
regularStyle (optional) - the style to apply if you're not on iPhone X
Example
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
})
},
});
isIphoneX()
returns - true
if you running on an iPhone X.
Example
import { isIphoneX } from 'react-native-iphone-x-helper'
if (isIphoneX()) {
} else {
}
getStatusBarHeight([safe])
Parameters
safe - whether you want for get safe area height or not
returns - the height of the status bar: 44
for safe iPhoneX, 30
for unsafe iPhoneX, 20
for other iOS devices and StatusBar.currentHeight
for Android.
Example
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
getBottomSpace
returns - the height of the bottom to fit the safe area: 34
for iPhone X and 0
for other devices.
Example
import { StyleSheet } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-x-helper'
export default StyleSheet.create({
totalview: {
flex: 1,
backgroundColor: 'transparent',
marginBottom: getBottomSpace()
},
});
Licence
MIT