Skip to content

Commit

Permalink
feat: add autoHideHomeIndicator option for stack (#11415)
Browse files Browse the repository at this point in the history
An autoHideHomeIndicator prop exists in native-stack (added in 00b2c24),
and this updates @react-navigation/stack to add an identical prop.

**Motivation**

We have an app using @react-navigation/stack that needs to hide the home
indicator in some cases and switching to native-stack breaks existing
functionality for us.

**Test plan**

Set `autoHideHomeIndicator` to `true` and use iPhone 14 Simulator (or
similar) to observe that the home indicator bar automatically hides
after a few seconds when there is no activity on the screen.

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
  • Loading branch information
mortend and satya164 committed Feb 8, 2024
1 parent 1b56cb5 commit 8367758
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/stack/src/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,12 @@ export type StackNavigationOptions = StackHeaderOptions &
* Only supported on iOS and Android.
*/
freezeOnBlur?: boolean;
/**
* Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
*
* @platform ios
*/
autoHideHomeIndicator?: boolean;
};

export type StackNavigationConfig = {
Expand Down
1 change: 1 addition & 0 deletions packages/stack/src/views/Screens.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const MaybeScreen = ({
active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
children: React.ReactNode;
freezeOnBlur?: boolean;
homeIndicatorHidden?: boolean;
}) => {
if (Screens != null) {
return (
Expand Down
2 changes: 2 additions & 0 deletions packages/stack/src/views/Stack/CardStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -665,6 +665,7 @@ export class CardStack extends React.Component<Props, State> {
headerShown = true,
headerTransparent,
freezeOnBlur,
autoHideHomeIndicator,
} = scene.descriptor.options;

const safeAreaInsetTop = insets.top;
Expand Down Expand Up @@ -698,6 +699,7 @@ export class CardStack extends React.Component<Props, State> {
enabled={detachInactiveScreens}
active={isScreenActive}
freezeOnBlur={freezeOnBlur}
homeIndicatorHidden={autoHideHomeIndicator}
pointerEvents="box-none"
>
<CardContainer
Expand Down

0 comments on commit 8367758

Please sign in to comment.