Skip to content

A <PrefersHomeIndicatorAutoHidden /> component for react-native

License

Notifications You must be signed in to change notification settings

flowkey/react-native-home-indicator

Repository files navigation

npm version CircleCI codecov

A declarative approach for hiding the Home Indicator 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

// add to your imports
#import <RNHomeIndicator.h>
// find this line
UIViewController *rootViewController = [UIViewController new];
// 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

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

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

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

About

A <PrefersHomeIndicatorAutoHidden /> component for react-native

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published