https://github.com/flowkey/react-native-home-indicator
A <PrefersHomeIndicatorAutoHidden /> component for react-native
https://github.com/flowkey/react-native-home-indicator
Last synced: 5 months ago
JSON representation
A <PrefersHomeIndicatorAutoHidden /> component for react-native
- Host: GitHub
- URL: https://github.com/flowkey/react-native-home-indicator
- Owner: flowkey
- License: mit
- Created: 2018-01-10T11:43:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-20T12:50:58.000Z (almost 4 years ago)
- Last Synced: 2025-09-16T03:02:34.145Z (9 months ago)
- Language: JavaScript
- Size: 618 KB
- Stars: 80
- Watchers: 11
- Forks: 24
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-native-home-indicator)
[](https://circleci.com/gh/flowkey/react-native-home-indicator)
[](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
```
```objective-c
// find this line
UIViewController *rootViewController = [UIViewController new];
```
```objective-c
// and replace with
UIViewController *rootViewController = [HomeIndicatorViewController new];
```
## Simple Usage
Render `` 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 (
...
);
}
```
## 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 (
);
}
```