react-native-screens 3.8.0 → 3.10.2

package/lib/typescript/reanimated/ReanimatedScreen.d.ts

@@ -1,2 +1,5 @@
-import { PropsWithChildren } from 'react';
-export default function ReanimatedScreenProvider(props: PropsWithChildren<unknown>): JSX.Element;
+import React from 'react';
+import { ScreenProps } from 'react-native-screens';
+import Animated from 'react-native-reanimated';
+declare const ReanimatedScreen: React.ForwardRefExoticComponent<Pick<ScreenProps, "children" | "active" | "activityState" | "customAnimationOnSwipe" | "enabled" | "isNativeStack" | "fullScreenSwipeEnabled" | "gestureEnabled" | "nativeBackButtonDismissalEnabled" | "onAppear" | "onComponentRef" | "onDisappear" | "onDismissed" | "onHeaderBackButtonClicked" | "onTransitionProgress" | "onWillAppear" | "onWillDisappear" | "replaceAnimation" | "screenOrientation" | "stackAnimation" | "stackPresentation" | "statusBarAnimation" | "statusBarColor" | "statusBarHidden" | "statusBarStyle" | "statusBarTranslucent" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
+export default ReanimatedScreen;

package/lib/typescript/reanimated/ReanimatedScreenProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function ReanimatedScreenProvider(props: PropsWithChildren<unknown>): JSX.Element;

package/lib/typescript/reanimated/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ReanimatedScreenProvider } from './ReanimatedScreen';
+export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
 export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';

package/lib/typescript/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, NativeSyntheticEvent, ViewProps, View, TargetedEvent, TextInputFocusEventData } from 'react-native';
 export declare type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet';
 export declare type StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left';
@@ -270,6 +269,14 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
      * Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
      */
     largeTitleHideShadow?: boolean;
+    /**
+     * Callback which is executed when screen header is attached
+     */
+    onAttached?: () => void;
+    /**
+     * Callback which is executed when screen header is detached
+     */
+    onDetached?: () => void;
     /**
      * String that can be displayed in the header as a fallback for `headerTitle`.
      */
@@ -309,22 +316,46 @@ export interface SearchBarProps {
      * The auto-capitalization behavior
      */
     autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+    /**
+     * Automatically focuses search bar on mount
+     *
+     * @platform android
+     */
+    autoFocus?: boolean;
     /**
      * The search field background color
      */
     barTintColor?: string;
     /**
      * The text to be used instead of default `Cancel` button text
+     *
+     * @platform ios
      */
     cancelButtonText?: string;
+    /**
+     * Specifies whether the back button should close search bar's text input or not.
+     *
+     * @platform android
+     */
+    disableBackButtonOverride?: boolean;
     /**
      * Indicates whether to hide the navigation bar
+     *
+     * @platform ios
      */
     hideNavigationBar?: boolean;
     /**
      * Indicates whether to hide the search bar when scrolling
+     *
+     * @platform ios
      */
     hideWhenScrolling?: boolean;
+    /**
+     * Sets type of the input. Defaults to `text`.
+     *
+     * @platform android
+     */
+    inputType?: 'text' | 'phone' | 'number' | 'email';
     /**
      * Indicates whether to to obscure the underlying content
      */
@@ -335,6 +366,8 @@ export interface SearchBarProps {
     onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     /**
      * A callback that gets called when the cancel button is pressed
+     *
+     * @platform ios
      */
     onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     /**
@@ -344,7 +377,19 @@ export interface SearchBarProps {
     /**
      * A callback that gets called when search bar has received focus
      */
+    onClose?: () => void;
+    /**
+     * A callback that gets called when search bar is opened
+     *
+     * @platform android
+     */
     onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+    /**
+     * A callback that gets called when search bar is closed
+     *
+     * @platform android
+     */
+    onOpen?: () => void;
     /**
      * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
      */

package/lib/typescript/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isSearchBarAvailableForCurrentPlatform: boolean;
+export declare function executeNativeBackPress(): boolean;

package/native-stack/README.md

@@ -362,7 +362,7 @@ Search bar is only supported on iOS.
 Example: 
 
 ```js
-React.useEffect(() => {
+React.useLayoutEffect(() => {
   navigation.setOptions({
     searchBar: {
       // search bar options
@@ -371,6 +371,8 @@ React.useEffect(() => {
 }, [navigation]);
 ```
 
+We advise using `useLayoutEffect` hook instead of `useEffect` when managing `searchBar` props to avoid unexpected layout issues.
+
 Supported properties are described below.
 
 #### `autoCapitalize`
@@ -383,7 +385,11 @@ Possible values:
 - `sentences`
 - `characters`
 
-Defaults to `sentences`.
+Defaults to `sentences` on iOS and `'none'` on Android.
+
+#### `autoFocus` (Android only)
+
+When set to `true` focuses search bar automatically when screen is appearing. Default value is `false`.
 
 #### `barTintColor`
 
@@ -391,23 +397,37 @@ The search field background color.
 
 By default bar tint color is translucent.
 
-#### `cancelButtonText`
+#### `cancelButtonText` (iOS only)
 
 The text to be used instead of default `Cancel` button text.
 
-#### `hideNavigationBar`
+#### `disableBackButtonOverride` (Android only)
+
+Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true` 
+
+#### `hideNavigationBar` (iOS only)
 
 Boolean indicating whether to hide the navigation bar during searching.
 
 Defaults to `true`.
 
-#### `hideWhenScrolling`
+#### `hideWhenScrolling` (iOS only)
 
 Boolean indicating whether to hide the search bar when scrolling.
 
 Defaults to `true`.
 
-####  `obscureBackground`
+#### `inputType` (Android only)
+
+This prop is used to change type of the input and keyboard. Default value is `'text'`.
+
+All values:
+- `'text'` - normal text input
+- `'number'` - number input
+- `'email'` - email input
+- `'phone'` - phone input
+
+####  `obscureBackground` (iOS only)
 
 Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
 
@@ -430,7 +450,7 @@ Example:
 ```js
 const [search, setSearch] = React.useState('');
 
-React.useEffect(() => {
+React.useLayoutEffect(() => {
   navigation.setOptions({
     searchBar: {
       onChangeText: (event) => setSearch(event.nativeEvent.text),
@@ -438,11 +458,19 @@ React.useEffect(() => {
   });
 }, [navigation]);
 ```
+#### `onClose` (Android only)
+
+A callback that gets called when search bar is closing
+
 
 #### `onFocus`
 
 A callback that gets called when search bar has received focus.
 
+#### `onOpen` (Android only)
+
+A callback that gets called when search bar is expanding
+
 #### `onSearchButtonPress`
 
 A callback that gets called when the search button is pressed. It receives the current text value of the search bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "3.8.0",
+  "version": "3.10.2",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",
@@ -35,7 +35,8 @@
     "windows/",
     "RNScreens.podspec",
     "README.md",
-    "!**/__tests__"
+    "!**/__tests__",
+    "!android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.kt"
   ],
   "repository": {
     "type": "git",
@@ -52,6 +53,7 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-screens#readme",
   "dependencies": {
+    "react-freeze": "^1.0.0",
     "warn-once": "^0.1.0"
   },
   "peerDependencies": {
@@ -80,6 +82,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "husky": "^7.0.1",

package/src/index.native.tsx

@@ -10,9 +10,11 @@ import {
   View,
   ViewProps,
 } from 'react-native';
+import { Freeze } from 'react-freeze';
 // @ts-ignore Getting private component
 // eslint-disable-next-line import/default
 import processColor from 'react-native/Libraries/StyleSheet/processColor';
+import { version } from 'react-native/package.json';
 
 import TransitionProgressContext from './TransitionProgressContext';
 import useTransitionProgress from './useTransitionProgress';
@@ -29,6 +31,10 @@ import {
   ScreenStackHeaderConfigProps,
   SearchBarProps,
 } from './types';
+import {
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from './utils';
 
 // web implementation is taken from `index.tsx`
 const isPlatformSupported =
@@ -47,6 +53,21 @@ function enableScreens(shouldEnableScreens = true): void {
   }
 }
 
+let ENABLE_FREEZE = false;
+
+function enableFreeze(shouldEnableReactFreeze = true): void {
+  const minor = parseInt(version.split('.')[1]); // eg. takes 66 from '0.66.0'
+
+  // react-freeze requires react-native >=0.64, react-native from main is 0.0.0
+  if (!(minor === 0 || minor >= 64) && shouldEnableReactFreeze) {
+    console.warn(
+      'react-freeze library requires at least react-native 0.64. Please upgrade your react-native version in order to use this feature.'
+    );
+  }
+
+  ENABLE_FREEZE = shouldEnableReactFreeze;
+}
+
 // const that tells if the library should use new implementation, will be undefined for older versions
 const shouldUseActivityState = true;
 
@@ -123,6 +144,65 @@ const ScreensNativeModules = {
   },
 };
 
+interface FreezeWrapperProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+// This component allows one more render before freezing the screen.
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = React.useState(false);
+
+  if (freeze !== freezeState) {
+    // setImmediate is executed at the end of the JS execution block.
+    // Used here for changing the state right after the render.
+    setImmediate(() => {
+      setFreezeState(freeze);
+    });
+  }
+
+  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
+}
+
+function MaybeFreeze({ freeze, children }: FreezeWrapperProps) {
+  if (ENABLE_FREEZE) {
+    return <DelayedFreeze freeze={freeze}>{children}</DelayedFreeze>;
+  } else {
+    return <>{children}</>;
+  }
+}
+
+function ScreenStack(props: ScreenStackProps) {
+  if (ENABLE_FREEZE) {
+    const { children, ...rest } = props;
+    const size = React.Children.count(children);
+    // freezes all screens except the top one
+    const childrenWithFreeze = React.Children.map(children, (child, index) => (
+      <DelayedFreeze freeze={size - index > 1}>{child}</DelayedFreeze>
+    ));
+    return (
+      <ScreensNativeModules.NativeScreenStack {...rest}>
+        {childrenWithFreeze}
+      </ScreensNativeModules.NativeScreenStack>
+    );
+  }
+  return <ScreensNativeModules.NativeScreenStack {...props} />;
+}
+
+// Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+interface ViewConfig extends View {
+  viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+}
+
 class Screen extends React.Component<ScreenProps> {
   private ref: React.ElementRef<typeof View> | null = null;
   private closing = new Animated.Value(0);
@@ -168,40 +248,52 @@ class Screen extends React.Component<ScreenProps> {
       const processedColor = processColor(statusBarColor);
 
       return (
-        <AnimatedNativeScreen
-          {...props}
-          statusBarColor={processedColor}
-          activityState={activityState}
-          ref={this.setRef}
-          onTransitionProgress={
-            !isNativeStack
-              ? undefined
-              : Animated.event(
-                  [
-                    {
-                      nativeEvent: {
-                        progress: this.progress,
-                        closing: this.closing,
-                        goingForward: this.goingForward,
+        <MaybeFreeze freeze={activityState === 0}>
+          <AnimatedNativeScreen
+            {...props}
+            statusBarColor={processedColor}
+            activityState={activityState}
+            // This prevents showing blank screen when navigating between multiple screens with freezing
+            // https://github.com/software-mansion/react-native-screens/pull/1208
+            ref={(ref: ViewConfig) => {
+              if (ref?.viewConfig?.validAttributes?.style) {
+                ref.viewConfig.validAttributes.style = {
+                  ...ref.viewConfig.validAttributes.style,
+                  display: false,
+                };
+              }
+              this.setRef(ref);
+            }}
+            onTransitionProgress={
+              !isNativeStack
+                ? undefined
+                : Animated.event(
+                    [
+                      {
+                        nativeEvent: {
+                          progress: this.progress,
+                          closing: this.closing,
+                          goingForward: this.goingForward,
+                        },
                       },
-                    },
-                  ],
-                  { useNativeDriver: true }
-                )
-          }>
-          {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
-            children
-          ) : (
-            <TransitionProgressContext.Provider
-              value={{
-                progress: this.progress,
-                closing: this.closing,
-                goingForward: this.goingForward,
-              }}>
-              {children}
-            </TransitionProgressContext.Provider>
-          )}
-        </AnimatedNativeScreen>
+                    ],
+                    { useNativeDriver: true }
+                  )
+            }>
+            {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
+              children
+            ) : (
+              <TransitionProgressContext.Provider
+                value={{
+                  progress: this.progress,
+                  closing: this.closing,
+                  goingForward: this.goingForward,
+                }}>
+                {children}
+              </TransitionProgressContext.Provider>
+            )}
+          </AnimatedNativeScreen>
+        </MaybeFreeze>
       );
     } else {
       // same reason as above
@@ -323,6 +415,7 @@ module.exports = {
   Screen,
   ScreenContainer,
   ScreenContext,
+  ScreenStack,
 
   get NativeScreen() {
     return ScreensNativeModules.NativeScreen;
@@ -336,9 +429,6 @@ module.exports = {
     return ScreensNativeModules.NativeScreenNavigationContainer;
   },
 
-  get ScreenStack() {
-    return ScreensNativeModules.NativeScreenStack;
-  },
   get ScreenStackHeaderConfig() {
     return ScreensNativeModules.NativeScreenStackHeaderConfig;
   },
@@ -346,8 +436,10 @@ module.exports = {
     return ScreensNativeModules.NativeScreenStackHeaderSubview;
   },
   get SearchBar() {
-    if (Platform.OS !== 'ios') {
-      console.warn('Importing SearchBar is only valid on iOS devices.');
+    if (!isSearchBarAvailableForCurrentPlatform) {
+      console.warn(
+        'Importing SearchBar is only valid on iOS and Android devices.'
+      );
       return View;
     }
 
@@ -370,7 +462,11 @@ module.exports = {
   ScreenStackHeaderSearchBarView,
 
   enableScreens,
+  enableFreeze,
   screensEnabled,
   shouldUseActivityState,
   useTransitionProgress,
+
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
 };

package/src/index.tsx

@@ -11,6 +11,10 @@ import {
 
 export * from './types';
 export { default as useTransitionProgress } from './useTransitionProgress';
+export {
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from './utils';
 
 let ENABLE_SCREENS = true;
 
@@ -22,6 +26,12 @@ export function screensEnabled(): boolean {
   return ENABLE_SCREENS;
 }
 
+// @ts-ignore function stub, freezing logic is located in index.native.tsx
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function enableFreeze(shouldEnableReactFreeze = true): void {
+  // noop
+}
+
 export class NativeScreen extends React.Component<ScreenProps> {
   render(): JSX.Element {
     let {

package/src/native-stack/types.tsx

@@ -273,8 +273,6 @@ export type NativeStackNavigationOptions = {
   screenOrientation?: ScreenProps['screenOrientation'];
   /**
    * Object in which you should pass props in order to render native iOS searchBar.
-   *
-   * @platform ios
    */
   searchBar?: SearchBarProps;
   /**

package/src/native-stack/utils/useBackPressSubscription.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
+
+interface Args {
+  onBackPress: () => boolean;
+  isDisabled: boolean;
+}
+
+interface UseBackPressSubscription {
+  handleAttached: () => void;
+  handleDetached: () => void;
+  createSubscription: () => void;
+  clearSubscription: () => void;
+}
+
+/**
+ * This hook is an abstraction for keeping back press subscription
+ * logic in one place.
+ */
+export function useBackPressSubscription({
+  onBackPress,
+  isDisabled,
+}: Args): UseBackPressSubscription {
+  const [isActive, setIsActive] = React.useState(false);
+  const subscription = React.useRef<NativeEventSubscription | undefined>();
+
+  const clearSubscription = React.useCallback((shouldSetActive = true) => {
+    subscription.current?.remove();
+    subscription.current = undefined;
+    if (shouldSetActive) setIsActive(false);
+  }, []);
+
+  const createSubscription = React.useCallback(() => {
+    if (!isDisabled) {
+      subscription.current?.remove();
+      subscription.current = BackHandler.addEventListener(
+        'hardwareBackPress',
+        onBackPress
+      );
+      setIsActive(true);
+    }
+  }, [isDisabled, onBackPress]);
+
+  const handleAttached = React.useCallback(() => {
+    if (isActive) {
+      createSubscription();
+    }
+  }, [createSubscription, isActive]);
+
+  const handleDetached = React.useCallback(() => {
+    clearSubscription(false);
+  }, [clearSubscription]);
+
+  React.useEffect(() => {
+    if (isDisabled) {
+      clearSubscription();
+    }
+  }, [isDisabled, clearSubscription]);
+
+  return {
+    handleAttached,
+    handleDetached,
+    createSubscription,
+    clearSubscription,
+  };
+}

package/src/native-stack/views/HeaderConfig.tsx

@@ -9,8 +9,12 @@ import {
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
   SearchBar,
+  SearchBarProps,
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
 } from 'react-native-screens';
 import { NativeStackNavigationOptions } from '../types';
+import { useBackPressSubscription } from '../utils/useBackPressSubscription';
 import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
@@ -48,6 +52,19 @@ export default function HeaderConfig({
   const { colors } = useTheme();
   const tintColor = headerTintColor ?? colors.primary;
 
+  // We need to use back press subscription here to override back button behavior on JS side.
+  // Because screens are usually used with react-navigation and this library overrides back button
+  // we need to handle it first in case when search bar is open
+  const {
+    handleAttached,
+    handleDetached,
+    clearSubscription,
+    createSubscription,
+  } = useBackPressSubscription({
+    onBackPress: executeNativeBackPress,
+    isDisabled: !searchBar || !!searchBar.disableBackButtonOverride,
+  });
+
   const [
     backTitleFontFamily,
     largeTitleFontFamily,
@@ -58,6 +75,29 @@ export default function HeaderConfig({
     headerTitleStyle.fontFamily,
   ]);
 
+  // We want to clear clearSubscription only when components unmounts or search bar changes
+  React.useEffect(() => clearSubscription, [searchBar]);
+
+  const processedSearchBarOptions = React.useMemo(() => {
+    if (
+      Platform.OS === 'android' &&
+      searchBar &&
+      !searchBar.disableBackButtonOverride
+    ) {
+      const onFocus: SearchBarProps['onFocus'] = (...args) => {
+        createSubscription();
+        searchBar.onFocus?.(...args);
+      };
+      const onClose: SearchBarProps['onClose'] = (...args) => {
+        clearSubscription();
+        searchBar.onClose?.(...args);
+      };
+
+      return { ...searchBar, onFocus, onClose };
+    }
+    return searchBar;
+  }, [searchBar, createSubscription, clearSubscription]);
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
@@ -99,7 +139,9 @@ export default function HeaderConfig({
       titleFontSize={headerTitleStyle.fontSize}
       titleFontWeight={headerTitleStyle.fontWeight}
       topInsetEnabled={headerTopInsetEnabled}
-      translucent={headerTranslucent === true}>
+      translucent={headerTranslucent === true}
+      onAttached={handleAttached}
+      onDetached={handleDetached}>
       {headerRight !== undefined ? (
         <ScreenStackHeaderRightView>
           {headerRight({ tintColor })}
@@ -121,9 +163,10 @@ export default function HeaderConfig({
           {headerCenter({ tintColor })}
         </ScreenStackHeaderCenterView>
       ) : null}
-      {Platform.OS === 'ios' && searchBar !== undefined ? (
+      {isSearchBarAvailableForCurrentPlatform &&
+      processedSearchBarOptions !== undefined ? (
         <ScreenStackHeaderSearchBarView>
-          <SearchBar {...searchBar} />
+          <SearchBar {...processedSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}
     </ScreenStackHeaderConfig>