How to hide iOS app home indicator in React Native project with Expo Router?

Question

I want to hide the home indicator in an iOS app on screens representing a full screen mode in my React Native project, using Expo and Expo Router and testing it with the iOS simulator on a Mac as I currently don't have a real iOS device available.

Here is what worked for Android, see Expo NavigationBar:

import * as NavigationBar from "expo-navigation-bar";
...
NavigationBar.setVisibilityAsync("hidden");

Expo router uses React Navigation under the hood, so I looked at the autoHideHomeIndicator property for stack screen options as also suggested here. This seems to be React Natives implementation of Apples prefersHomeIndicatorAutoHidden property.

Apple dev docs also say:

The system takes your preference into account, but returning true is no guarantee that the indicator will be hidden.

I tried to configure this property in a _layout.tsx file like this:

<Stack screenOptions={{ headerShown: true, autoHideHomeIndicator: true }}>
  <Stack.Screen name="fullscreen" options={{ headerShown: true, autoHideHomeIndicator: true }} />
</Stack>

or dynamically on my page like this:

<View>
  <Stack.Screen options={{ title: "Full Screen", autoHideHomeIndicator: true }} />
</View>

and also played around with the headerShown and title properties to test that setting properties generally works. However, setting the autoHideHomeIndicator property had no effect.

I also tried react-native-home-indicator, but without linking the library or changing Appdelegate.m (because too complicated for me as I just use Expo and not bare React Native) and therefore got a TypeError: Cannot read property 'autoHidden' of null

Here are some versions of my setup:

React Native 0.72.6, Expo 49.0.15, Expo Router 2.0.0, iOS: 16.4, Simulator: Version 14.3.1 (994)

Why is the home indicator still showing and what do I have to change to hide it?

Answer 1

After some more research I found out that it is not possible to hide the home indicator permanently on iOS for full screens with frequent touch interactions from within the app. Even if technical workrounds could be found for this, there is a risk the app would be rejected after submission to the app store, because it would violate the UI guidelines.

The best result that one could achieve is the impression of a hidden home indicator on "passive" full screens when viewing content like video. In this case the home indicator will fade out after a few seconds without interaction but come back once the screen is touched again. So in case of an "active" full screen it is probably better not to hide the home indicator, because showing and hiding it, will cause constant distraction for the user.

For an individual user there is a workaround to hide the home indicator temporarily for a usage session in a selected app via the Guided Access configuration.