# react-native-safe-area-view

> Add padding to your views to account for notches, home indicators, status bar, and possibly other future things.

Latest version **1.1.1** (published 2020-04-25) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-native-safe-area-view
pnpm add react-native-safe-area-view
yarn add react-native-safe-area-view
bun add react-native-safe-area-view
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-04-25 |
| First published | 2017-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 656 |
| Author | Dave Pack |
| Maintainers | brentvatne, davepack, satya164 |
| Keywords | react-native, iPhoneX, SafeAreaView, safe area, notch |

## Links

- npm: https://www.npmjs.com/package/react-native-safe-area-view
- Repository: https://github.com/react-community/react-native-safe-area-view
- Homepage: https://github.com/react-community/react-native-safe-area-view#readme
- Issues: https://github.com/react-community/react-native-safe-area-view/issues
- npm.io page: https://npm.io/package/react-native-safe-area-view

## Dependencies (1)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^2.3.1

## Recent versions

- 1.1.1 (latest) — 2020-04-25
- 2.0.0 (next) — 2020-05-15
- 0.14.9 (legacy) — 2020-04-07
- 1.0.0-alpha.2 (alpha) — 2019-09-16
- 1.1.0 — 2020-04-19
- 1.0.0 — 2019-09-26
- 1.0.0-alpha.1 — 2019-09-09
- 0.14.8 — 2019-09-06
- 1.0.0-alpha.0 — 2019-08-20
- 0.14.7 — 2019-08-10
- 0.14.6 — 2019-07-03
- 0.14.5 — 2019-06-06
- 0.14.4 — 2019-05-20
- 0.14.3 — 2019-05-16
- 0.14.2 — 2019-05-16
- … 17 more at https://npm.io/package/react-native-safe-area-view/versions

## README

# react-native-safe-area-view

This library provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).

## Installation

### In the Expo managed workflow:

```
expo install react-native-safe-area-view react-native-safe-area-context
```

### In bare React Native projects:

```
yarn add react-native-safe-area-view react-native-safe-area-context
```

Next, you need to link `react-native-safe-area-context`. If you are using autolinking, run `pod install` again. If not, follow [these instructions](https://github.com/th3rdwave/react-native-safe-area-context#getting-started). Then re-build your app binary.

## Usage

First you need to wrap the root of your app with the `SafeAreaProvider`.

```js
import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import MyAwesomeApp from './src/MyAwesomeApp';

export default function App() {
  return (
    <SafeAreaProvider>
      <MyAwesomeApp />
    </SafeAreaProvider>
  );
}
```

Now you can wrap components that touch any edge of the screen with a `SafeAreaView`.

```jsx
import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}
```

### forceInset

Sometimes you will observe unexpected behavior and jank because SafeAreaView uses `onLayout` then calls `measureInWindow` on the view. If you know your view will touch certain edges, use `forceInset` to force it to apply the inset padding on the view.

```jsx
<SafeAreaView forceInset={{ top: 'always' }}>
  <View>
    <Text>Yeah, I'm safe too!</Text>
  </View>
</SafeAreaView>
```

`forceInset` takes an object with the keys `top | bottom | left | right | vertical | horizontal` and the values `'always' | 'never'`. Or you can override the padding altogether by passing an integer.

### Accessing safe area inset values

Sometimes it's useful to know what the insets are for the top, right, bottom, and left of the screen. See the documentation for [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for more information.

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