paulxuca / react-native-home-indicator

A <PrefersHomeIndicatorAutoHidden /> component for react-native

A declarative approach for hiding the iPhone X Home Indicator in react-native.

Getting Started

1. Add dependency

npm install react-native-home-indicator --save

2. Link library

If you're using RN >= 0.60.0 just go run pod install inside the ios-directory. To install in projects using RN < 0.60.0 follow the manual linking steps

3. Add Header to Search Path

Because you need to call react-native-home-indicator from native, ensure that you add $(SRCROOT)/../node_modules/react-native-home-indicator/ios to your Header Search Paths as described here

4. 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>
    );
}