react-native-iphone-x-helper

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.

README

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

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