react-native-screens 5.0.0-alpha.2 → 5.0.0-alpha.4

package/src/components/stack/header/StackHeaderConfig.ios.tsx

@@ -1,19 +1,15 @@
 import React, {
   type ComponentRef,
-  type Ref,
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react';
-import type {
-  StackHeaderConfigProps,
-  StackHeaderConfigRef,
-} from './StackHeaderConfig.types';
+import type { StackHeaderConfigProps } from './StackHeaderConfig.types';
 import StackHeaderConfigIOSNativeComponent, {
   Commands as StackHeaderConfigIOSNativeCommands,
+  HeaderAppearance,
   MenuItemPressEvent,
   MenuSelectionChangeEvent,
   NativeMenuElementOptionsIOS,
@@ -22,8 +18,9 @@ import type { StackHeaderItemPlacement } from './ios/StackHeaderItem.ios.types';
 import { StackHeaderItemSpacerPlacement } from './ios/StackHeaderItemSpacer.ios.types';
 import StackHeaderItemSpacer from './ios/StackHeaderItemSpacer.ios';
 import StackHeaderItem from './ios/StackHeaderItem.ios';
-import { NativeSyntheticEvent, StyleSheet } from 'react-native';
+import { NativeSyntheticEvent, StyleSheet, processColor } from 'react-native';
 import type {
+  StackHeaderAppearanceIOS,
   StackHeaderInlineCustomItemIOS,
   StackHeaderInlineItemIOS,
   StackHeaderMenuItemOptionsIOS,
@@ -37,13 +34,10 @@ import { resolveIconAssetSources, resolveMenuIcons } from './ios/iconUtils.ios';
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-function StackHeaderConfig(
-  props: StackHeaderConfigProps,
-  forwardedRef: Ref<StackHeaderConfigRef>,
-) {
+function StackHeaderConfig(props: StackHeaderConfigProps) {
   // android props are safely dropped
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { ios, android, ...restProps } = props;
+  const { ref: forwardedRef, ios, android, ...restProps } = props;
 
   const {
     leadingItems,
@@ -55,6 +49,14 @@ function StackHeaderConfig(
     largeTitle,
     largeSubtitle,
     largeTitleEnabled,
+    prompt,
+    minimizationBehavior,
+    restorationBehavior,
+    backButtonTitle,
+    backButtonDisplayMode,
+    backButtonMenuEnabled,
+    standardAppearance,
+    scrollEdgeAppearance,
   } = ios ?? {};
 
   const nativeRef =
@@ -102,10 +104,10 @@ function StackHeaderConfig(
       [
         ...(leadingItems ?? [])
           .filter(it => it && it.type === 'item')
-          .map(it => it.menu),
+          .flatMap(it => [it.menu, it.menuRepresentation]),
         ...(trailingItems ?? [])
           .filter(it => it && it.type === 'item')
-          .map(it => it.menu),
+          .flatMap(it => [it.menu, it.menuRepresentation]),
         titleMenu,
       ].filter(it => !!it),
     [leadingItems, trailingItems, titleMenu],
@@ -151,9 +153,17 @@ function StackHeaderConfig(
       ref={nativeRef}
       {...restProps}
       collapsable={false}
+      backButtonTitle={backButtonTitle}
+      backButtonDisplayMode={backButtonDisplayMode}
+      backButtonMenuEnabled={backButtonMenuEnabled}
       largeTitle={largeTitle}
       largeSubtitle={largeSubtitle}
       largeTitleEnabled={!!largeTitleEnabled}
+      prompt={prompt}
+      minimizationBehavior={minimizationBehavior}
+      restorationBehavior={restorationBehavior}
+      standardAppearance={mapAppearanceToNativeProp(standardAppearance)}
+      scrollEdgeAppearance={mapAppearanceToNativeProp(scrollEdgeAppearance)}
       titleMenu={resolvedTitleMenu}
       style={styles.config}
       onMenuItemPress={handleMenuItemPress}
@@ -168,6 +178,36 @@ function StackHeaderConfig(
   );
 }
 
+function mapAppearanceToNativeProp(
+  appearance?: StackHeaderAppearanceIOS,
+): HeaderAppearance | undefined {
+  if (!appearance) return undefined;
+
+  const {
+    titleFontColor,
+    titleFontWeight,
+    largeTitleFontColor,
+    largeTitleFontWeight,
+    subtitleFontColor,
+    subtitleFontWeight,
+  } = appearance;
+
+  return {
+    ...appearance,
+    titleFontColor: processColor(titleFontColor),
+    titleFontWeight:
+      titleFontWeight !== undefined ? String(titleFontWeight) : undefined,
+    largeTitleFontColor: processColor(largeTitleFontColor),
+    largeTitleFontWeight:
+      largeTitleFontWeight !== undefined
+        ? String(largeTitleFontWeight)
+        : undefined,
+    subtitleFontColor: processColor(subtitleFontColor),
+    subtitleFontWeight:
+      subtitleFontWeight !== undefined ? String(subtitleFontWeight) : undefined,
+  };
+}
+
 function makeItemViewFromItem(
   item:
     | StackHeaderInlineItemIOS
@@ -254,6 +294,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default forwardRef<StackHeaderConfigRef, StackHeaderConfigProps>(
-  StackHeaderConfig,
-);
+export default StackHeaderConfig;

package/src/components/stack/header/StackHeaderConfig.ios.types.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react';
+import type { TextStyle } from 'react-native';
 import type { PlatformIconIOS } from '../../shared/types';
 import type { StackHeaderMenuIOS } from './ios/StackHeaderMenu.ios.types';
 
@@ -92,8 +93,110 @@ export interface SupportsMenuIOS {
    * @platform iOS
    */
   menu?: StackHeaderMenuIOS | undefined;
+  /**
+   * @summary Menu definition substituting the item when it is displayed in a menu.
+   *
+   * @description
+   * When the system moves the item into a menu (e.g. the navigation bar
+   * overflow menu), this menu is displayed in its place. Useful for custom items
+   * ({@link StackHeaderInlineCustomItemIOS.render | render}), which iOS doesn't display in the overflow menu otherwise.
+   * The `id`s used in the menu are expected to be unique across every `menu` and `menuRepresentation`.
+   *
+   * @platform iOS
+   *
+   * @supported iOS 16 and higher
+   */
+  menuRepresentation?: StackHeaderMenuIOS | undefined;
+}
+
+export interface SupportsSharedBackgroundIOS {
+  /**
+   * @summary Whether the liquid glass background for this item should be hidden.
+   *
+   * @description
+   * On iOS 26, adjacent bar button items are grouped inside a shared liquid
+   * glass background. Setting this to `true` removes the shared background
+   * from this item.
+   *
+   * @default false
+   *
+   * @platform iOS
+   *
+   * @supported iOS 26 and higher
+   */
+  hidesSharedBackground?: boolean | undefined;
+}
+
+/**
+ * @summary Priority used when the header has to decide which items to keep.
+ *
+ * @description
+ * Each value maps to the matching `UIBarButtonItemVisibilityPriority` constant.
+ *
+ * @platform iOS
+ *
+ * @supported iOS 27 and higher
+ */
+export type StackHeaderItemVisibilityPriorityIOS = 'low' | 'standard' | 'high';
+
+export interface SupportsVisibilityPriorityIOS {
+  /**
+   * @summary Decides which items give way first when the header runs out of room.
+   *
+   * @description
+   * When the items do not fit, the header moves the ones with the lowest
+   * priority into the overflow ("...") menu, and keeps the higher ones.
+   *
+   * Accepts `'low'`, `'standard'` (the default) and `'high'`, which map to the
+   * `UIBarButtonItemVisibilityPriority` constants. Only the relative order of
+   * the items matters.
+   *
+   * When the item is placed in an implicit group of items, the group
+   * inherits this priority.
+   *
+   * A custom item ({@link StackHeaderInlineCustomItemIOS.render | render})
+   * moved into the overflow menu has no content to show there.
+   *
+   * @default 'standard'
+   *
+   * @platform iOS
+   *
+   * @supported iOS 27 and higher
+   */
+  visibilityPriority?: StackHeaderItemVisibilityPriorityIOS | undefined;
 }
 
+export interface SupportsIdentifierIOS {
+  /**
+   * @summary Stable identifier used to match the item across different screens
+   * for more intelligent animation on transition.
+   *
+   * @description
+   * When navigating between screens, iOS tries to match similarly looking items (i.e. same sfSymbol)
+   * and animate between them. If the heuristic fails, a simpler crossfade is applied.
+   * In a situation where visually different items should be logically considered the same across screens,
+   * you may use this prop to tell this fact to the system. The identifier shouldn't be updated at runtime;
+   * doing so will result in item rebuild and visual flash.
+   *
+   * @platform iOS
+   *
+   * @supported iOS 26 and higher
+   */
+  identifier?: string | undefined;
+}
+
+/**
+ * @summary Visual variant (style) of a header item.
+ *
+ * @description
+ * - `plain`: the default look of a bar button item.
+ * - `prominent`: the item is emphasized with a tinted background.
+ *   On iOS below 26 it falls back to bold text (the `done` style).
+ *
+ * @platform iOS
+ */
+export type StackHeaderItemVariantIOS = 'plain' | 'prominent';
+
 /**
  * @summary Native header item with text label.
  *
@@ -101,13 +204,37 @@ export interface SupportsMenuIOS {
  */
 export interface StackHeaderInlineItemIOS
   extends StackHeaderBaseItemIOS,
-    SupportsMenuIOS {
+    SupportsMenuIOS,
+    SupportsIdentifierIOS,
+    SupportsSharedBackgroundIOS,
+    SupportsVisibilityPriorityIOS {
   /**
    * @summary Marks this object as a header item definition.
    *
    * @platform iOS
    */
   type: 'item';
+  /**
+   * @summary Visual variant (style) of the item.
+   *
+   * @default 'plain'
+   *
+   * @platform iOS
+   */
+  variant?: StackHeaderItemVariantIOS | undefined;
+  /**
+   * @summary Whether the item is disabled.
+   *
+   * @description
+   * A disabled item is grayed out and does not respond to user interaction:
+   * neither {@link StackHeaderInlineItemIOS.onPress | onPress} nor
+   * {@link SupportsMenuIOS.menu | menu} is triggered.
+   *
+   * @default false
+   *
+   * @platform iOS
+   */
+  disabled?: boolean | undefined;
   /**
    * @summary Callback invoked when the header item is pressed.
    *
@@ -126,7 +253,11 @@ export interface StackHeaderInlineItemIOS
  *
  * @platform iOS
  */
-export interface StackHeaderInlineCustomItemIOS extends SupportsMenuIOS {
+export interface StackHeaderInlineCustomItemIOS
+  extends SupportsMenuIOS,
+    SupportsIdentifierIOS,
+    SupportsSharedBackgroundIOS,
+    SupportsVisibilityPriorityIOS {
   /**
    * @summary A unique identifier within the screen header.
    *
@@ -250,7 +381,203 @@ export interface StackHeaderTitleCustomItemIOS {
   render: () => ReactElement;
 }
 
+/**
+ * @summary Controls how the back button title is displayed.
+ *
+ * @description
+ * - `default`: the system chooses the title depending on available space.
+ *   On iOS < 26 options include: custom title (defaults to previous screen title),
+ *   generic "Back", no title; on iOS >= 26 it's either custom title (if set) or no title.
+ * - `generic`: on iOS < 26, the system uses a generic "Back" title or no title;
+ *   on iOS >= 26 it's the same as `minimal`.
+ * - `minimal`: no title is displayed next to the back button chevron.
+ *
+ * @platform iOS
+ */
+export type StackHeaderBackButtonDisplayModeIOS =
+  | 'default'
+  | 'generic'
+  | 'minimal';
+
+/**
+ * @summary Controls when the navigation bar minimizes in response to scrolling.
+ *
+ * @description
+ * - `automatic`: the system determines the minimization behavior.
+ * - `never`: the navigation bar does not minimize.
+ * - `onScrollDown`: the navigation bar minimizes when the user scrolls down.
+ * - `onScrollUp`: the navigation bar minimizes when the user scrolls up.
+ *
+ * @platform iOS
+ */
+export type StackHeaderMinimizationBehaviorIOS =
+  | 'automatic'
+  | 'never'
+  | 'onScrollDown'
+  | 'onScrollUp';
+
+/**
+ * @summary Controls when a minimized navigation bar restores.
+ *
+ * @description
+ * - `automatic`: the system determines the restoration behavior. By default
+ *   the navigation bar restores when the user reverses scroll direction.
+ * - `atScrollEdge`: the navigation bar restores only when the scroll view's
+ *   content reaches the scroll edge. Honored only together with
+ *   `minimizationBehavior: 'onScrollDown'`.
+ *
+ * @platform iOS
+ */
+export type StackHeaderRestorationBehaviorIOS = 'automatic' | 'atScrollEdge';
+
+export interface StackHeaderAppearanceIOS {
+  /**
+   * @summary Specifies the font family used for the title of the header.
+   *
+   * @platform ios
+   */
+  titleFontFamily?: TextStyle['fontFamily'] | undefined;
+  /**
+   * @summary Specifies the font size used for the title of the header.
+   *
+   * @platform ios
+   */
+  titleFontSize?: TextStyle['fontSize'] | undefined;
+  /**
+   * @summary Specifies the font weight used for the title of the header.
+   *
+   * @platform ios
+   */
+  titleFontWeight?: TextStyle['fontWeight'] | undefined;
+  /**
+   * @summary Specifies the font style used for the title of the header.
+   *
+   * @platform ios
+   */
+  titleFontStyle?: TextStyle['fontStyle'] | undefined;
+  /**
+   * @summary Specifies the font color used for the title of the header.
+   *
+   * @platform ios
+   */
+  titleFontColor?: TextStyle['color'] | undefined;
+  /**
+   * @summary Specifies the font family used for the large title of the header.
+   *
+   * @platform ios
+   */
+  largeTitleFontFamily?: TextStyle['fontFamily'] | undefined;
+  /**
+   * @summary Specifies the font size used for the large title of the header.
+   *
+   * @platform ios
+   */
+  largeTitleFontSize?: TextStyle['fontSize'] | undefined;
+  /**
+   * @summary Specifies the font weight used for the large title of the header.
+   *
+   * @platform ios
+   */
+  largeTitleFontWeight?: TextStyle['fontWeight'] | undefined;
+  /**
+   * @summary Specifies the font style used for the large title of the header.
+   *
+   * @platform ios
+   */
+  largeTitleFontStyle?: TextStyle['fontStyle'] | undefined;
+  /**
+   * @summary Specifies the font color used for the large title of the header.
+   *
+   * @platform ios
+   */
+  largeTitleFontColor?: TextStyle['color'] | undefined;
+  /**
+   * @summary Specifies the font family used for the subtitle of the header.
+   *
+   * @description Applies to both the regular and the large subtitle.
+   *
+   * @platform ios
+   *
+   * @supported iOS 26 and higher
+   */
+  subtitleFontFamily?: TextStyle['fontFamily'] | undefined;
+  /**
+   * @summary Specifies the font size used for the subtitle of the header.
+   *
+   * @description Applies to both the regular and the large subtitle.
+   *
+   * @platform ios
+   *
+   * @supported iOS 26 and higher
+   */
+  subtitleFontSize?: TextStyle['fontSize'] | undefined;
+  /**
+   * @summary Specifies the font weight used for the subtitle of the header.
+   *
+   * @description Applies to both the regular and the large subtitle.
+   *
+   * @platform ios
+   *
+   * @supported iOS 26 and higher
+   */
+  subtitleFontWeight?: TextStyle['fontWeight'] | undefined;
+  /**
+   * @summary Specifies the font style used for the subtitle of the header.
+   *
+   * @description Applies to both the regular and the large subtitle.
+   *
+   * @platform ios
+   *
+   * @supported iOS 26 and higher
+   */
+  subtitleFontStyle?: TextStyle['fontStyle'] | undefined;
+  /**
+   * @summary Specifies the font color used for the subtitle of the header.
+   *
+   * @description Applies to both the regular and the large subtitle.
+   *
+   * @platform ios
+   *
+   * @supported iOS 26 and higher
+   */
+  subtitleFontColor?: TextStyle['color'] | undefined;
+}
+
 export interface StackHeaderConfigPropsIOS {
+  /**
+   * @summary Title displayed next to the back button on this screen.
+   *
+   * @description
+   * Configured on the screen whose back button it applies to (the screen that
+   * is pushed on top). When unset, the system derives the back title from the
+   * previous screen's `title`.
+   *
+   * @platform iOS
+   */
+  backButtonTitle?: string | undefined;
+  /**
+   * @summary Controls how the back button title is displayed.
+   *
+   * @default 'default'
+   *
+   * @platform iOS
+   */
+  backButtonDisplayMode?: StackHeaderBackButtonDisplayModeIOS | undefined;
+  /**
+   * @summary Whether the back button shows the navigation history menu.
+   *
+   * @description
+   * Configured on the screen whose back button it applies to (the screen that
+   * is pushed on top). When `false`, the navigation history menu is not shown
+   * on either of the gestures that normally open it: long-pressing the back
+   * button and secondary-clicking it (trackpad / mouse right click); tapping
+   * it still pops the screen.
+   *
+   * @default true
+   *
+   * @platform iOS
+   */
+  backButtonMenuEnabled?: boolean | undefined;
   /**
    * @summary Custom item to display as a subtitle.
    *
@@ -351,6 +678,61 @@ export interface StackHeaderConfigPropsIOS {
    * @supported iOS 26 and higher
    */
   largeSubtitleItem?: StackHeaderTitleCustomItemIOS | undefined;
+  /**
+   * @summary A single line of text displayed at the top of the navigation bar,
+   * above the title.
+   *
+   * @description
+   * Setting this prop increases the height of the navigation bar.
+   *
+   * @platform iOS
+   */
+  prompt?: string | undefined;
+  /**
+   * @summary Controls when the navigation bar minimizes in response to scrolling.
+   *
+   * @description
+   * When the navigation bar minimizes, an integrated top tab bar minimizes as well.
+   *
+   * @default 'automatic'
+   *
+   * @platform iOS
+   *
+   * @supported iOS 27 and higher
+   */
+  minimizationBehavior?: StackHeaderMinimizationBehaviorIOS | undefined;
+  /**
+   * @summary Controls when a minimized navigation bar restores.
+   *
+   * @description
+   * Currently honored only together with `minimizationBehavior: 'onScrollDown'`.
+   * With other minimization behaviors, the system falls back to `automatic`.
+   *
+   * @default 'automatic'
+   *
+   * @platform iOS
+   *
+   * @supported iOS 27 and higher
+   */
+  restorationBehavior?: StackHeaderRestorationBehaviorIOS | undefined;
+  /**
+   * @summary Appearance of the header when the edge of scrollable content
+   * is not aligned with the edge of the header.
+   *
+   * @platform ios
+   */
+  standardAppearance?: StackHeaderAppearanceIOS | undefined;
+  /**
+   * @summary Appearance of the header when the edge of scrollable content
+   * is aligned with the edge of the header.
+   *
+   * @description If unset, derives the configuration from `standardAppearance`,
+   * otherwise becomes a standalone definition. In both cases it keeps transparent
+   * background by default (iOS <18).
+   *
+   * @platform ios
+   */
+  scrollEdgeAppearance?: StackHeaderAppearanceIOS | undefined;
 }
 
 export interface StackHeaderConfigCommandsIOS {

package/src/components/stack/header/StackHeaderConfig.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { StackHeaderConfigProps } from './StackHeaderConfig.types';
+
+/**
+ * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
+ */
+function StackHeaderConfig(_props: StackHeaderConfigProps) {
+  return <View />;
+}
+
+export default StackHeaderConfig;

package/src/components/stack/header/StackHeaderConfig.types.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'react';
 import type { StackHeaderConfigCommandsAndroid } from './StackHeaderConfig.android.types';
 import { StackHeaderConfigPropsAndroid } from './StackHeaderConfig.android.types';
 import type { StackHeaderConfigCommandsIOS } from './StackHeaderConfig.ios.types';
@@ -11,9 +12,9 @@ export interface StackHeaderConfigPropsBase {
    */
   title?: string | undefined;
   /**
-   * @summary Subtitle displayed in the header. Currently unsupported on Android.
+   * @summary Subtitle displayed in the header.
    *
-   * @platform ios
+   * @platform android, ios
    */
   subtitle?: string | undefined;
   /**
@@ -58,6 +59,7 @@ export interface StackHeaderConfigPropsBase {
 export interface StackHeaderConfigProps extends StackHeaderConfigPropsBase {
   android?: StackHeaderConfigPropsAndroid | undefined;
   ios?: StackHeaderConfigPropsIOS | undefined;
+  ref?: Ref<StackHeaderConfigRef> | undefined;
 }
 
 export interface StackHeaderConfigRef {

package/src/components/stack/header/ios/StackHeaderItem.ios.tsx

@@ -6,7 +6,7 @@ import { NativeSyntheticEvent, StyleSheet } from 'react-native';
 import { resolveIconAssetSources, resolveMenuIcons } from './iconUtils.ios';
 
 export default function StackHeaderItem(props: StackHeaderItemProps) {
-  const { render, onPress, icon, menu, ...rest } = props;
+  const { render, onPress, icon, menu, menuRepresentation, ...rest } = props;
 
   // `rest.menu` includes some JS callback within nested menu specification
   // codegen strips JS functions and replaces them with NULLT and keys of such type
@@ -24,12 +24,20 @@ export default function StackHeaderItem(props: StackHeaderItemProps) {
     () => (menu != null ? resolveMenuIcons(menu) : undefined),
     [menu],
   );
+  const resolvedMenuRepresentation = useMemo(
+    () =>
+      menuRepresentation != null
+        ? resolveMenuIcons(menuRepresentation)
+        : undefined,
+    [menuRepresentation],
+  );
 
   return (
     <StackHeaderItemIOSNativeComponent
       {...rest}
       icon={resolvedIcon}
       menu={resolvedMenu}
+      menuRepresentation={resolvedMenuRepresentation}
       // We need to tell iOS that we want the handler to be attached only when we actually require it
       // because doing so makes the menu appear on long press instead of tap
       respondsToOnPress={!!onPress}

package/src/components/stack/header/ios/StackHeaderItem.ios.types.ts

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import type { PlatformIconIOS } from '../../../shared/types';
 import type { StackHeaderMenuIOS } from './StackHeaderMenu.ios.types';
+import type { StackHeaderItemVisibilityPriorityIOS } from '../StackHeaderConfig.ios.types';
 
 export type StackHeaderItemPlacement =
   | 'leading'
@@ -12,9 +13,15 @@ export type StackHeaderItemPlacement =
 export type StackHeaderItemProps = {
   placement: StackHeaderItemPlacement;
   itemId?: string | undefined;
+  identifier?: string | undefined;
+  hidesSharedBackground?: boolean | undefined;
+  visibilityPriority?: StackHeaderItemVisibilityPriorityIOS | undefined;
   title?: string | undefined;
   icon?: PlatformIconIOS | undefined;
   render?: (() => ReactElement) | undefined;
   menu?: StackHeaderMenuIOS | undefined;
+  menuRepresentation?: StackHeaderMenuIOS | undefined;
+  variant?: 'plain' | 'prominent' | undefined;
+  disabled?: boolean | undefined;
   onPress?: (() => void) | undefined;
 };

package/src/components/stack/host/StackHost.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import StackHostNativeComponent from '../../../fabric/stack/StackHostNativeComponent';
 import type { StackHostProps } from './StackHost.types';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-function StackHost({ children, ref }: StackHostProps) {
+function StackHost(props: StackHostProps) {
+  const { children, ref, direction, ...restProps } = props;
+
+  // RN's `direction` style sets the native View's layoutDirection, which the
+  // stack's native subtree inherits. iOS needs a trait override instead.
+  const directionStyle = Platform.OS === 'android' ? { direction } : undefined;
+
   return (
-    <StackHostNativeComponent ref={ref} style={styles.container}>
+    <StackHostNativeComponent
+      ref={ref}
+      style={[styles.container, directionStyle]}
+      {...restProps}>
       {children}
     </StackHostNativeComponent>
   );