# react-native-iphone-x-helper

> A library to help you design your react-native app for the iPhone X

Latest version **1.3.1** (published 2020-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-iphone-x-helper
pnpm add react-native-iphone-x-helper
yarn add react-native-iphone-x-helper
bun add react-native-iphone-x-helper
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2020-11-08 |
| First published | 2017-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 937 |
| Author | Elad Gil |
| Maintainers | ptelad |
| Keywords | react-native, ios, iphone-x, iphoneX, stylesheet |

## Links

- npm: https://www.npmjs.com/package/react-native-iphone-x-helper
- Repository: https://github.com/ptelad/react-native-iphone-x-helper
- Homepage: https://github.com/ptelad/react-native-iphone-x-helper#readme
- Issues: https://github.com/ptelad/react-native-iphone-x-helper/issues
- npm.io page: https://npm.io/package/react-native-iphone-x-helper

## Recent versions

- 1.3.1 (latest) — 2020-11-08
- 1.3.0 — 2020-10-15
- 1.2.1 — 2019-05-29
- 1.2.0 — 2018-09-27
- 1.1.0 — 2018-09-05
- 1.0.3 — 2018-05-09
- 1.0.2 — 2018-01-10
- 1.0.1 — 2017-09-17
- 1.0.0 — 2017-09-17

## README

[![npm version](https://badge.fury.io/js/react-native-iphone-x-helper.svg)](https://badge.fury.io/js/react-native-iphone-x-helper)

# 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 ####
```js
// 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 ####
```js
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 ####

```js
// 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 ####

```js
// 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**

---
_Source: https://npm.io/package/react-native-iphone-x-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._