react-native-iphone-x-helper
A library to help you design your react-native app for the iPhone X
Last updated 8 months ago by ptelad .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-iphone-x-helper 
SYNC missed versions from official npm registry.

npm version

react-native-iphone-x-helper

A library to help you design your react-native app for the iPhone X, XS, XS Max & XR

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

// 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
        })
    },
});

isIphoneX()

returns - true if you running on an iPhone X.

Example

import { isIphoneX } from 'react-native-iphone-x-helper'

// ...

if (isIphoneX()) {
    // do this...
} else {
    // do that...
}

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

// 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

getBottomSpace

returns - the height of the bottom to fit the safe area: 34 for iPhone X and 0 for other devices.

Example

// 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()
    },
});

Licence

MIT

Current Tags

  • 1.2.1                                ...           latest (8 months ago)

7 Versions

  • 1.2.1                                ...           8 months ago
  • 1.2.0                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 4
This Week 131
This Month 5,679
Last Day 59
Last Week 657
Last Month 6,156
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (95)

Copyright 2014 - 2017 © taobao.org |