# react-native-home-indicator

> A declarative approach for hiding the Apple Home Indicator in react-native

Latest version **0.2.10** (published 2022-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-home-indicator
pnpm add react-native-home-indicator
yarn add react-native-home-indicator
bun add react-native-home-indicator
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.10 |
| Published | 2022-09-20 |
| First published | 2018-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | flowkey.com |
| Maintainers | michaelknoch |
| Keywords | react-native, Home Indicator, prefersHomeIndicatorAutoHidden, iphoneX, Safe Area |

## Links

- npm: https://www.npmjs.com/package/react-native-home-indicator
- Repository: https://github.com/flowkey/react-native-home-indicator
- Homepage: https://github.com/flowkey/react-native-home-indicator#readme
- Issues: https://github.com/flowkey/react-native-home-indicator/issues
- npm.io page: https://npm.io/package/react-native-home-indicator

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.10 (latest) — 2022-09-20
- 0.2.9 — 2022-05-10
- 0.2.8 — 2022-04-28
- 0.2.7 — 2021-10-16
- 0.2.6 — 2020-09-30
- 0.2.5 — 2019-08-09
- 0.2.4 — 2019-03-11
- 0.2.3 — 2019-03-11
- 0.2.2 — 2019-03-11
- 0.2.1 — 2019-01-25
- 0.2.0 — 2018-06-11
- 0.1.5 — 2018-04-04
- 0.1.4 — 2018-01-16
- 0.1.3 — 2018-01-10
- 0.1.2 — 2018-01-10
- … 2 more at https://npm.io/package/react-native-home-indicator/versions

## README

[![npm version](https://badge.fury.io/js/react-native-home-indicator.svg)](https://badge.fury.io/js/react-native-home-indicator)
[![CircleCI](https://circleci.com/gh/flowkey/react-native-home-indicator.svg?style=svg)](https://circleci.com/gh/flowkey/react-native-home-indicator)
[![codecov](https://codecov.io/gh/flowkey/react-native-home-indicator/branch/master/graph/badge.svg)](https://codecov.io/gh/flowkey/react-native-home-indicator)

A declarative approach for hiding the [Home Indicator](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design) on iOS/iPadOS devices.
## Getting Started

#### 1. Add dependency
`npm install react-native-home-indicator --save`

#### 2. Link library
If you're using RN >= 0.60.0 just run `pod install` as usual

#### 3. Changes in Appdelegate.m

```objective-c
// add to your imports
#import <RNHomeIndicator.h>
```

```objective-c
// find this line
UIViewController *rootViewController = [UIViewController new];
```

```objective-c
// and replace with
UIViewController *rootViewController = [HomeIndicatorViewController new];
```


## Simple Usage

Render `<PrefersHomeIndicatorAutoHidden />` to signal your preference for hiding the Home Indicator. 
"The system takes your preference into account, but returning true is no guarantee that the indicator will be hidden." 
see [developer.apple.com/documentation](https://developer.apple.com/documentation/uikit/uiviewcontroller/2887510-prefershomeindicatorautohidden)

```jsx
...
import PrefersHomeIndicatorAutoHidden from 'react-native-home-indicator';

const SomeReactNativeComponent = () => {
    return (
        <View>
            <PrefersHomeIndicatorAutoHidden />
            ...
        </View>
    );
}
```

## Extended Usage

For more complex usage you can use the `HomeIndicator` component which allows passing your preferred
indicator setting as prop. Its even possible to override previous rendered indicator preferences as
you can see in the following example.

```jsx
...
import { HomeIndicator } from 'react-native-home-indicator';

const SomeReactNativeComponent = () => {
    return (
        <View>
            <HomeIndicator autoHidden />
            <SomeDeepComponentTree>
                 <HomeIndicator autoHidden={false} />
            </SomeDeepComponentTree>
        </View>
    );
}
```

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