@amazon-devices/react-native-screens 2.0.1759135970 → 3.0.9000000000

package/src/native-stack/types.tsx

@@ -24,6 +24,7 @@ import {
 // amznmod_react - change imports to kepler packages
 } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import {
   ImageSourcePropType,
   StyleProp,
@@ -31,12 +32,15 @@ import {
   ColorValue,
 } from 'react-native';
 import {
+  GestureDetectorBridge,
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
-  SheetDetentTypes,
-} from '@amazon-devices/react-native-screens';
+} from '../types';
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackNavigationEventMap = {
   /**
    * Event which fires when the screen appears.
@@ -64,11 +68,23 @@ export type NativeStackNavigationEventMap = {
    * Event which fires when a header height gets changed.
    */
   headerHeightChange: { data: { headerHeight: number } };
+  /**
+   * Event which fires when screen is in sheet presentation & it's detent changes.
+   *
+   * In payload it caries two fields:
+   *
+   * * index - current detent index in the `sheetAllowedDetents` array,
+   * * isStable - on Android `false` value means that the user is dragging the sheet or it is settling; on iOS it is always `true`.
+   */
+  sheetDetentChange: { data: { index: number; isStable: boolean } };
 };
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = string,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -79,23 +95,34 @@ export type NativeStackNavigationProp<
 > &
   StackActionHelpers<ParamList>;
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = string,
 > = {
   navigation: NativeStackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
 };
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackNavigationHelpers = NavigationHelpers<
   ParamListBase,
   NativeStackNavigationEventMap
 >;
 
-// We want it to be an empty object beacuse navigator does not have any additional config
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NativeStackNavigationConfig = {};
+/**
+ * We want it to be an empty object beacuse navigator does not have any additional config
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type NativeStackNavigationConfig = {}; // eslint-disable-line @typescript-eslint/ban-types
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackNavigationOptions = {
   /**
    * Image to display in the header as the back button.
@@ -108,6 +135,8 @@ export type NativeStackNavigationOptions = {
   backButtonInCustomView?: boolean;
   /**
    * Style object for the scene content.
+   *
+   * As a workaround to truncated sheet content, formSheet uses backgroundColor from contentStyle and applies it on Screen.
    */
   contentStyle?: StyleProp<ViewStyle>;
   /**
@@ -125,6 +154,15 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   disableBackButtonMenu?: boolean;
+  /**
+   * How the back button behaves by default (when not customized). Available on iOS>=14, and is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` or `backTitle` is set.
+   * The following values are currently supported (they correspond to https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc):
+   * - "default" – show given back button previous controller title, system generic or just icon based on available space
+   * - "generic" – show given system generic or just icon based on available space
+   * - "minimal" – show just an icon
+   * @platform ios
+   */
+  backButtonDisplayMode?: ScreenStackHeaderConfigProps['backButtonDisplayMode'];
   /**
    * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
    * Defaults to `true` when `enableFreeze()` is run at the top of the application.
@@ -138,6 +176,16 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   fullScreenSwipeEnabled?: boolean;
+  /**
+   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+   * doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
+   * default iOS shadow. Defaults to `true`.
+   *
+   * This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
+   *
+   * @platform ios
+   */
+  fullScreenSwipeShadowEnabled?: boolean;
   /**
    * Whether you can use gestures to dismiss this screen. Defaults to `true`.
    * Only supported on iOS.
@@ -309,6 +357,12 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   navigationBarColor?: ColorValue;
+  /**
+   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -342,17 +396,24 @@ export type NativeStackNavigationOptions = {
   /**
    * Describes heights where a sheet can rest.
    * Works only when `stackPresentation` is set to `formSheet`.
-   * Defaults to `large`.
    *
-   * Available values:
+   * Heights should be described as fraction (a number from [0, 1] interval) of screen height / maximum detent height.
    *
-   * - `large` - only large detent level will be allowed
-   * - `medium` - only medium detent level will be allowed
-   * - `all` - all detent levels will be allowed
+   * Please note that the array **must** be sorted in ascending order.
    *
-   * @platform ios
+   * Defaults to `[1.0]` literal.
+   */
+  sheetAllowedDetents?: ScreenProps['sheetAllowedDetents'] | 'fitToContents';
+  /**
+   * Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
+   *
+   * Not dynamic.
+   *
+   * Defaults to `24`.
+   *
+   * @platform Android
    */
-  sheetAllowedDetents?: SheetDetentTypes;
+  sheetElevation?: ScreenProps['sheetElevation'];
   /**
    * Whether the sheet should expand to larger detent when scrolling.
    * Works only when `stackPresentation` is set to `formSheet`.
@@ -360,7 +421,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  sheetExpandsWhenScrolledToEdge?: boolean;
+  sheetExpandsWhenScrolledToEdge?: ScreenProps['sheetExpandsWhenScrolledToEdge'];
   /**
    * The corner radius that the sheet will try to render with.
    * Works only when `stackPresentation` is set to `formSheet`.
@@ -368,10 +429,8 @@ export type NativeStackNavigationOptions = {
    * If set to non-negative value it will try to render sheet with provided radius, else it will apply system default.
    *
    * If left unset system default is used.
-   *
-   * @platform ios
    */
-  sheetCornerRadius?: number;
+  sheetCornerRadius?: ScreenProps['sheetCornerRadius'];
   /**
    * Boolean indicating whether the sheet shows a grabber at the top.
    * Works only when `stackPresentation` is set to `formSheet`.
@@ -379,22 +438,32 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  sheetGrabberVisible?: boolean;
+  sheetGrabberVisible?: ScreenProps['sheetGrabberVisible'];
+  /**
+   * Index of the detent the sheet should expand to after being opened.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   *
+   * Defaults to `0` - which represents first detent in the detents array.
+   */
+  sheetInitialDetentIndex?: ScreenProps['sheetInitialDetentIndex'];
   /**
    * The largest sheet detent for which a view underneath won't be dimmed.
-   * Works only when `stackPresentation` is se tto `formSheet`.
+   * Works only when `stackPresentation` is set to `formSheet`.
    *
-   * If this prop is set to:
+   * This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
+   * there won't be a dimming view beneath the sheet.
    *
-   * - `large` - the view underneath won't be dimmed at any detent level
-   * - `medium` - the view underneath will be dimmed only when detent level is `large`
-   * - `all` - the view underneath will be dimmed for any detent level
+   * Additionaly there are following options available:
    *
-   * Defaults to `all`.
+   * * `none` - there will be dimming view for all detents levels,
+   * * `largest` - there won't be a dimming view for any detent level.
    *
-   * @platform ios
+   * There also legacy & **deprecated** prop values available: `medium`, `large` (don't confuse with `largest`), `all`, which work in tandem with
+   * corresponding legacy prop values for `sheetAllowedDetents` prop.
+   *
+   * Defaults to `none`, indicating that the dimming view should be always present.
    */
-  sheetLargestUndimmedDetent?: SheetDetentTypes;
+  sheetLargestUndimmedDetentIndex?: ScreenProps['sheetLargestUndimmedDetentIndex'];
   /**
    * How the screen should appear/disappear when pushed or popped at the top of the stack.
    * The following values are currently supported:
@@ -402,10 +471,12 @@ export type NativeStackNavigationOptions = {
    * - "fade" – fades screen in or out
    * - "fade_from_bottom" – performs a fade from bottom animation
    * - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
-   * - "simple_push" – performs a default animation, but without shadow and native header transition (iOS only)
+   * - "simple_push" – performs a default animation, but without native header transition (iOS only)
    * - "slide_from_bottom" – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
-   * - "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
+   * - "slide_from_left" - slide in the new screen from left to right
+   * - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+   * - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
    * - "none" – the screen appears/dissapears without an animation
    */
   stackAnimation?: ScreenProps['stackAnimation'];
@@ -459,21 +530,43 @@ export type NativeStackNavigationOptions = {
    */
   title?: string;
   /**
-   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
    * The duration of `default` and `flip` transitions isn't customizable.
    *
    * @platform ios
    */
   transitionDuration?: number;
+
+  goBackGesture?: GoBackGesture;
+  transitionAnimation?: AnimatedScreenTransition;
+  screenEdgeGesture?: boolean;
+  /**
+   * Footer component that can be used alongside form sheet stack presentation style.
+   *
+   * This option is provided, because due to implementation details it might be problematic
+   * to implement such layout with JS-only code.
+   *
+   * Please note that this prop is marked as unstable and might be subject of breaking changes,
+   * even removal.
+   *
+   * @platform android
+   */
+  unstable_sheetFooter?: () => React.ReactNode;
 };
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackNavigatorProps =
 //@ts-ignore
   DefaultNavigatorOptions<NativeStackNavigationOptions> &
     StackRouterOptions &
     NativeStackNavigationConfig;
 
-    //@ts-ignore
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+//@ts-ignore
 export type NativeStackDescriptor = Descriptor<
   ParamListBase,
   string,
@@ -481,6 +574,86 @@ export type NativeStackDescriptor = Descriptor<
   NativeStackNavigationOptions
 >;
 
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
 export type NativeStackDescriptorMap = {
   [key: string]: NativeStackDescriptor;
 };
+
+/**
+ * Those below copied to src/types.ts should be removed with next minor and native-stack v5 removal
+ */
+
+/**
+ * copy from GestureHandler to avoid strong dependency
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+/**
+ * copy from Reanimated to avoid strong dependency
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type AnimatedScreenTransition = {
+  topScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+  belowTopScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+};
+
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type ScreensRefsHolder = React.MutableRefObject<
+  Record<string, React.MutableRefObject<React.Ref<React.Component>>>
+>;
+
+/**
+ * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+ */
+export type GestureProviderProps = PropsWithChildren<{
+  gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
+  screensRefs: ScreensRefsHolder;
+  currentRouteKey: string;
+  goBackGesture: GoBackGesture | undefined;
+  transitionAnimation: AnimatedScreenTransition | undefined;
+  screenEdgeGesture: boolean | undefined;
+}>;

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

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { StackPresentationTypes } from '@amazon-devices/react-native-screens';
+import { StackPresentationTypes } from '../../types';
 type Layout = { width: number; height: number };
 
 const formSheetModalHeight = 56;
@@ -8,7 +8,7 @@ export default function getDefaultHeaderHeight(
   layout: Layout,
   statusBarHeight: number,
   stackPresentation: StackPresentationTypes,
-  isLargeHeader = false
+  isLargeHeader = false,
 ): number {
   // default header heights
   let headerHeight = Platform.OS === 'android' ? 56 : 64;

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

@@ -0,0 +1,22 @@
+import { Rect } from 'react-native-safe-area-context';
+import { Platform } from 'react-native';
+
+export default function getStatusBarHeight(
+  topInset: number,
+  dimensions: Rect,
+  isStatusBarTranslucent: boolean,
+) {
+  if (Platform.OS === 'ios') {
+    // It looks like some iOS devices don't have strictly set status bar height to 44.
+    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
+    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
+    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
+    const hasDynamicIsland = topInset > 50;
+    return hasDynamicIsland ? topInset - 5 : topInset;
+  } else if (Platform.OS === 'android') {
+    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
+    return isStatusBarTranslucent ? topInset : dimensions.y;
+  }
+
+  return topInset;
+}

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

@@ -7,7 +7,7 @@ export default function useAnimatedHeaderHeight() {
 
   if (animatedValue === undefined) {
     throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
     );
   }
 

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

@@ -35,7 +35,7 @@ export function useBackPressSubscription({
       subscription.current?.remove();
       subscription.current = BackHandler.addEventListener(
         'hardwareBackPress',
-        onBackPress
+        onBackPress,
       );
       setIsActive(true);
     }

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

@@ -7,7 +7,7 @@ export default function useHeaderHeight() {
 
   if (height === undefined) {
     throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
     );
   }
 

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

@@ -1,9 +1,9 @@
 // @ts-ignore: No declaration available
-// eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
+
 import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
 
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+  fontFamilies: (string | undefined)[],
 ): (string | undefined)[] {
   // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
   const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ScreenFooter from '../../components/ScreenFooter';
+
+type FooterProps = {
+  children?: React.ReactNode;
+};
+
+export default function FooterComponent({ children }: FooterProps) {
+  return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
+}

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

@@ -15,6 +15,11 @@
 import { Route, useTheme } from '@amazon-devices/react-navigation__native';
 import * as React from 'react';
 import { Platform } from 'react-native';
+import { SearchBarProps } from '../../types';
+import {
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from '../../utils';
 import {
   ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderCenterView,
@@ -22,14 +27,12 @@ import {
   ScreenStackHeaderLeftView,
   ScreenStackHeaderRightView,
   ScreenStackHeaderSearchBarView,
-  SearchBar,
-  SearchBarProps,
-  isSearchBarAvailableForCurrentPlatform,
-  executeNativeBackPress,
-} from '@amazon-devices/react-native-screens';
+} from '../../components/ScreenStackHeaderConfig';
+import SearchBar from '../../components/SearchBar';
 import { NativeStackNavigationOptions } from '../types';
 import { useBackPressSubscription } from '../utils/useBackPressSubscription';
 import { processFonts } from './FontProcessor';
+import warnOnce from 'warn-once';
 
 type Props = NativeStackNavigationOptions & {
   route: Route<string>;
@@ -40,6 +43,7 @@ export default function HeaderConfig({
   backButtonInCustomView,
   direction,
   disableBackButtonMenu,
+  backButtonDisplayMode = 'default',
   headerBackTitle,
   headerBackTitleStyle = {},
   headerBackTitleVisible = true,
@@ -110,6 +114,15 @@ export default function HeaderConfig({
     return searchBar;
   }, [searchBar, createSubscription, clearSubscription]);
 
+  // @ts-ignore isVision is not yet in the type definitions (RN 0.74+)
+  const isVisionOS = Platform?.isVision;
+
+  warnOnce(
+    isVisionOS &&
+      (headerTitleStyle.color !== undefined || headerTintColor !== undefined),
+    'headerTitleStyle.color and headerTintColor are not supported on visionOS.',
+  );
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
@@ -124,6 +137,7 @@ export default function HeaderConfig({
       color={tintColor}
       direction={direction}
       disableBackButtonMenu={disableBackButtonMenu}
+      backButtonDisplayMode={backButtonDisplayMode}
       hidden={headerShown === false}
       hideBackButton={headerHideBackButton}
       hideShadow={headerHideShadow}
@@ -179,6 +193,7 @@ export default function HeaderConfig({
       {isSearchBarAvailableForCurrentPlatform &&
       processedSearchBarOptions !== undefined ? (
         <ScreenStackHeaderSearchBarView>
+          {/* @ts-ignore Skip incorrect error about incompatible ref types */}
           <SearchBar {...processedSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}