gem-hunter
Language: JavaScript
A library to help you design your react-native app for notched iPhones
react-native-safe-area-contextA library to help you design your react-native app for notched iPhones.
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... }
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.
// 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() }, });
MIT