react-native-screens 4.24.0 → 4.25.0-beta.2

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

@@ -0,0 +1,213 @@
+import type { ReactNode } from 'react';
+import type { ColorValue } from 'react-native';
+import type { StackHeaderSubviewCollapseModeAndroid } from './android/StackHeaderSubview.android.types';
+import type { PlatformIconAndroid } from '../../../../types';
+
+export type StackHeaderTypeAndroid = 'small' | 'medium' | 'large';
+
+export type StackHeaderBackgroundSubviewCollapseModeAndroid =
+  StackHeaderSubviewCollapseModeAndroid;
+
+export interface StackHeaderToolbarSubviewAndroid {
+  /**
+   * @summary The React component rendered in this toolbar slot.
+   *
+   * The subview is sized by React Native's layout engine but positioned by the
+   * platform native layout. Each subview is placed independently — subviews do
+   * not participate in a shared flex layout and cannot influence each other's
+   * sizing.
+   *
+   *
+   * @remarks
+   * Intrinsic sizing and explicit dimensions work as expected. Avoid
+   * parent-relative sizing (e.g. `flex: 1`) on the root element — it will
+   * produce incorrect dimensions. Flex layout within a root that has a known
+   * size works as expected.
+   *
+   * @platform android
+   */
+  Component: NonNullable<ReactNode>;
+}
+
+export interface StackHeaderBackgroundSubviewAndroid {
+  /**
+   * @summary Controls how the background subview behaves when the app bar
+   * collapses.
+   *
+   * The following values are available:
+   * - `off` - the subview scrolls away with the app bar,
+   * - `parallax` - the subview scrolls at a slower rate, creating a parallax
+   *   effect.
+   *
+   * @remarks
+   * `pin` is not currently supported because the background subview is
+   * stretched to match the entire `AppBarLayout`, which causes pinned content
+   * to move immediately rather than staying fixed. Support for `pin` collapse
+   * mode might be added in the future.
+   *
+   * @default off
+   *
+   * @platform android
+   */
+  collapseMode?: StackHeaderSubviewCollapseModeAndroid | undefined;
+  /**
+   * @summary The React component rendered as the header background.
+   *
+   * The subview is stretched to match the header (`AppBarLayout`) dimensions,
+   * so parent-relative sizing (e.g. `flex: 1`) works correctly.
+   *
+   * @platform android
+   */
+  Component: NonNullable<ReactNode>;
+}
+
+export interface StackHeaderConfigPropsAndroid {
+  /**
+   * @summary Specifies the type of the Material 3 app bar.
+   *
+   * The following values are available:
+   * - `small` - small app bar with fixed title,
+   * - `medium` - medium app bar with collapsing title,
+   * - `large` - large app bar with collapsing title.
+   *
+   * @remarks
+   * M3 Expressive headers aren't currently supported (there is no stable
+   * `MDC-Android` version yet).
+   *
+   * @see {@link https://m3.material.io/components/app-bars/overview|Material Design 3: App bars}
+   *
+   * @default small
+   *
+   * @platform android
+   */
+  type?: StackHeaderTypeAndroid | undefined;
+  /**
+   * @summary Custom view rendered behind the header content.
+   *
+   * @platform android
+   */
+  backgroundSubview?: StackHeaderBackgroundSubviewAndroid | undefined;
+  /**
+   * @summary Custom view placed in the leading (start) slot of the toolbar.
+   *
+   * @platform android
+   */
+  leadingSubview?: StackHeaderToolbarSubviewAndroid | undefined;
+  /**
+   * @summary Custom view placed in the center slot of the toolbar.
+   *
+   * @platform android
+   */
+  centerSubview?: StackHeaderToolbarSubviewAndroid | undefined;
+  /**
+   * @summary Custom view placed in the trailing (end) slot of the toolbar.
+   *
+   * @platform android
+   */
+  trailingSubview?: StackHeaderToolbarSubviewAndroid | undefined;
+  /**
+   * @summary Tint color applied to the back button icon.
+   *
+   * When `undefined`, the default tint color is used. This applies to the
+   * native back arrow and `drawableResource` icons that have an associated
+   * tint. For `imageSource` icons, no tint is applied by default.
+   *
+   * @platform android
+   */
+  backButtonTintColor?: ColorValue | undefined;
+  /**
+   * @summary Custom icon for the back button.
+   *
+   * When `undefined`, the native back arrow (`homeAsUpIndicator`) is used.
+   *
+   * Supported values:
+   * - `{ type: 'imageSource', imageSource }`
+   *   Uses an image from the provided resource.
+   *
+   *   Remarks: `imageSource` type doesn't support SVGs on Android.
+   *   For loading SVGs use `drawableResource` type.
+   *
+   * - `{ type: 'drawableResource', name }`
+   *   Uses a drawable resource with the given name.
+   *
+   *   Remarks: Requires passing a drawable to resources via Android Studio.
+   *
+   * @platform android
+   */
+  backButtonIcon?: PlatformIconAndroid | undefined;
+  /**
+   * @summary Whether the header reacts to nested scroll. Required for any
+   * other `scrollFlag*` prop to take effect.
+   *
+   * When `undefined`, falls back to the type-specific default:
+   * - `small` -> `false`
+   * - `medium` / `large` -> `true`
+   *
+   * @remarks
+   * Changing any `scrollFlag*` at runtime forces the header back to
+   * its fully expanded state, which produces a visible snap. Treat these
+   * props as a static configuration.
+   *
+   * @platform android
+   */
+  scrollFlagScroll?: boolean | undefined;
+  /**
+   * @summary When enabled, the header re-expands as soon as the user scrolls
+   * back toward the top of the content, regardless of the ScrollView's current
+   * scroll position. Without this flag, the header only begins expanding once
+   * the list has reached the top of its content. Requires `scrollFlagScroll`.
+   *
+   * When `undefined`, falls back to the type-specific default (`false` for
+   * all types).
+   *
+   * @platform android
+   */
+  scrollFlagEnterAlways?: boolean | undefined;
+  /**
+   * @summary Modifies `scrollFlagEnterAlways` so that the initial re-entry
+   * stops at the header's collapsed height (the toolbar); the remainder
+   * expands only after the ScrollView reaches the top of its content. Requires
+   * `scrollFlagEnterAlways`.
+   *
+   * When `undefined`, falls back to the type-specific default (`false` for
+   * all types).
+   *
+   * @remarks
+   * This flag does not have any effect for `small` header.
+   *
+   * @platform android
+   */
+  scrollFlagEnterAlwaysCollapsed?: boolean | undefined;
+  /**
+   * @summary When enabled, the header collapses only until its minimum height
+   * (the toolbar) remains pinned at the top. Without this flag, the entire
+   * header scrolls off the screen. Requires `scrollFlagScroll`.
+   *
+   * When `undefined`, falls back to the type-specific default:
+   * - `small` -> `false`
+   * - `medium` / `large` -> `true`
+   *
+   * @remarks
+   * Setting this flag for `small` header is equivalent to disabling
+   * `scrollFlagScroll`.
+   *
+   * Even when this flag is disabled, a strip with the height of the system top
+   * inset (status bar and display cutout) remains visible at the top.
+   *
+   * @platform android
+   */
+  scrollFlagExitUntilCollapsed?: boolean | undefined;
+  /**
+   * @summary When enabled, the header snaps to its nearest edge (fully
+   * expanded, or fully collapsed as defined by `scrollFlagExitUntilCollapsed`)
+   * after a scroll gesture ends, instead of resting partway. Requires
+   * `scrollFlagScroll`.
+   *
+   * When `undefined`, falls back to the type-specific default:
+   * - `small` -> `false`
+   * - `medium` / `large` -> `true`
+   *
+   * @platform android
+   */
+  scrollFlagSnap?: boolean | undefined;
+}

package/src/components/gamma/stack/header/StackHeaderConfig.d.ts

@@ -0,0 +1,17 @@
+/**
+ * TS module resolution does not support this RN platform extension pattern out of the box.
+ * Without a base .tsx file, TS will throw a "Cannot find module" error.
+ *
+ * This file satisfies the TS compiler by providing the correct type signatures,
+ * whereas Metro will handle the proper runtime file resolution.
+ */
+
+import React from 'react';
+import { StackHeaderConfigProps } from './StackHeaderConfig.types';
+
+/**
+ * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
+ */
+export default function StackHeaderConfig(
+  props: StackHeaderConfigProps,
+): React.JSX.Element;

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

@@ -0,0 +1,18 @@
+import { StackHeaderConfigProps } from './StackHeaderConfig.types';
+import StackHeaderConfigIOSNativeComponent from '../../../../fabric/gamma/stack/StackHeaderConfigIOSNativeComponent';
+import React from 'react';
+
+/**
+ * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
+ */
+function StackHeaderConfig(props: StackHeaderConfigProps) {
+  // android props are safely dropped
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { android, ios, ...baseProps } = props;
+
+  return (
+    <StackHeaderConfigIOSNativeComponent collapsable={false} {...baseProps} />
+  );
+}
+
+export default StackHeaderConfig;

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface StackHeaderConfigPropsIOS {}

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

@@ -0,0 +1,51 @@
+import { StackHeaderConfigPropsAndroid } from './StackHeaderConfig.android.types';
+import { StackHeaderConfigPropsIOS } from './StackHeaderConfig.ios.types';
+
+export interface StackHeaderConfigPropsBase {
+  /**
+   * @summary Title displayed in the header.
+   *
+   * @platform android, ios
+   */
+  title?: string | undefined;
+  /**
+   * @summary Specifies if the header should be hidden.
+   *
+   * @default false
+   *
+   * @platform android, ios
+   */
+  hidden?: boolean | undefined;
+  /**
+   * @summary Specifies if the content should be rendered behind the header.
+   *
+   * When `true`, content is rendered behind the header instead of starting
+   * below it.
+   *
+   * On Android:
+   * - The header background color is not affected by this prop.
+   * - Setting this prop to `true` is not supported when header scrolling is
+   *   enabled.
+   *
+   * @default false
+   *
+   * @platform android, ios
+   */
+  transparent?: boolean | undefined;
+  /**
+   * @summary Specifies if the back button should be hidden.
+   *
+   * This prop does not apply to the root screen of the stack for which the back
+   * button is always hidden.
+   *
+   * @default false
+   *
+   * @platform android, ios
+   */
+  backButtonHidden?: boolean | undefined;
+}
+
+export interface StackHeaderConfigProps extends StackHeaderConfigPropsBase {
+  android?: StackHeaderConfigPropsAndroid | undefined;
+  ios?: StackHeaderConfigPropsIOS | undefined;
+}

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

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+const StackHeaderConfig = View;
+
+export default StackHeaderConfig;

package/src/components/gamma/stack/header/android/StackHeaderSubview.android.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StackHeaderSubviewProps } from './StackHeaderSubview.android.types';
+import { StyleSheet } from 'react-native';
+import StackHeaderSubviewAndroidNativeComponent from '../../../../../fabric/gamma/stack/StackHeaderSubviewAndroidNativeComponent';
+
+/**
+ * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
+ */
+function StackHeaderSubview(props: StackHeaderSubviewProps) {
+  const { children, ...filteredProps } = props;
+  return (
+    <StackHeaderSubviewAndroidNativeComponent
+      collapsable={false}
+      style={
+        filteredProps.type === 'background'
+          ? StyleSheet.absoluteFill
+          : styles.absoluteStartTop
+      }
+      {...filteredProps}>
+      {children}
+    </StackHeaderSubviewAndroidNativeComponent>
+  );
+}
+
+export default StackHeaderSubview;
+
+const styles = StyleSheet.create({
+  absoluteStartTop: {
+    position: 'absolute',
+    start: 0,
+    top: 0,
+  },
+});

package/src/components/gamma/stack/header/android/StackHeaderSubview.android.types.ts

@@ -0,0 +1,16 @@
+import { ViewProps } from 'react-native';
+
+export type StackHeaderSubviewTypeAndroid =
+  | 'background'
+  | 'leading'
+  | 'center'
+  | 'trailing';
+
+export type StackHeaderSubviewCollapseModeAndroid = 'off' | 'parallax';
+
+export type StackHeaderSubviewProps = {
+  children: NonNullable<ViewProps['children']>;
+
+  type?: StackHeaderSubviewTypeAndroid | undefined;
+  collapseMode?: StackHeaderSubviewCollapseModeAndroid | undefined;
+};

package/src/components/gamma/stack/header/index.ts

@@ -0,0 +1,6 @@
+export { default as StackHeaderConfig } from './StackHeaderConfig';
+
+export type * from './StackHeaderConfig.types';
+
+export type * from './StackHeaderConfig.android.types';
+export type * from './StackHeaderConfig.ios.types';

package/src/components/gamma/stack/{StackHost.tsx → host/StackHost.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import StackHostNativeComponent from '../../../fabric/gamma/stack/StackHostNativeComponent';
+import StackHostNativeComponent from '../../../../fabric/gamma/stack/StackHostNativeComponent';
 import type { StackHostProps } from './StackHost.types';
 
 /**

package/src/components/gamma/stack/host/StackHost.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ReactNativeElement, ViewProps } from 'react-native';
+import { type NativeProps } from '../../../../fabric/gamma/stack/StackHostNativeComponent';
+
+export type StackHostProps = {
+  children: NonNullable<ViewProps['children']>;
+  // TODO: Work on these types
+  ref?:
+    | React.RefObject<
+        (React.Component<NativeProps> & ReactNativeElement) | null
+      >
+    | undefined;
+};

package/src/components/gamma/stack/host/index.ts

@@ -0,0 +1,3 @@
+export { default as StackHost } from './StackHost';
+
+export type * from './StackHost.types';

package/src/components/gamma/stack/index.ts

@@ -1,15 +1,36 @@
-import StackHost from './StackHost';
-import StackScreen from './StackScreen';
+import { StackHost } from './host';
+import { StackScreen } from './screen';
+import { StackHeaderConfig } from './header';
 
-export * from './StackHost.types';
-export * from './StackScreen.types';
+export type { StackHostProps } from './host';
+
+export type {
+  OnDismissEventPayload,
+  EmptyEventPayload, // TODO: Remove this from public types (we need one shared type for this)
+  OnDismissEvent,
+  StackScreenActivityMode,
+  StackScreenEventHandler,
+  StackScreenProps,
+} from './screen';
+
+export type {
+  StackHeaderConfigPropsBase,
+  StackHeaderConfigProps,
+  // Android
+  StackHeaderTypeAndroid,
+  StackHeaderBackgroundSubviewCollapseModeAndroid,
+  StackHeaderToolbarSubviewAndroid,
+  StackHeaderBackgroundSubviewAndroid,
+  StackHeaderConfigPropsAndroid,
+  // iOS
+  StackHeaderConfigPropsIOS,
+} from './header';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-const Stack = {
+export const Stack = {
   Host: StackHost,
   Screen: StackScreen,
+  HeaderConfig: StackHeaderConfig,
 };
-
-export default Stack;

package/src/components/gamma/stack/{StackScreen.tsx → screen/StackScreen.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import StackScreenNativeComponent from '../../../fabric/gamma/stack/StackScreenNativeComponent';
+import StackScreenNativeComponent from '../../../../fabric/gamma/stack/StackScreenNativeComponent';
 import { OnDismissEvent, StackScreenProps } from './StackScreen.types';
-import { useRenderDebugInfo } from '../../../private/';
+import { useRenderDebugInfo } from '../../../../private';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE

package/src/components/gamma/stack/{StackScreen.types.ts → screen/StackScreen.types.ts}

@@ -15,22 +15,22 @@ export type StackScreenEventHandler = (
 ) => void;
 
 export type StackScreenProps = {
-  children?: ViewProps['children'];
+  children?: ViewProps['children'] | undefined;
 
   // Control
   activityMode: StackScreenActivityMode;
   screenKey: string;
 
   // Events
-  onWillAppear?: StackScreenEventHandler;
-  onDidAppear?: StackScreenEventHandler;
-  onWillDisappear?: StackScreenEventHandler;
-  onDidDisappear?: StackScreenEventHandler;
+  onWillAppear?: StackScreenEventHandler | undefined;
+  onDidAppear?: StackScreenEventHandler | undefined;
+  onWillDisappear?: StackScreenEventHandler | undefined;
+  onDidDisappear?: StackScreenEventHandler | undefined;
 
-  onDismiss?: (screenKey: string) => void;
-  onNativeDismiss?: (screenKey: string) => void;
-  onNativeDismissPrevented?: StackScreenEventHandler;
+  onDismiss?: ((screenKey: string) => void) | undefined;
+  onNativeDismiss?: ((screenKey: string) => void) | undefined;
+  onNativeDismissPrevented?: StackScreenEventHandler | undefined;
 
   // Configuration
-  preventNativeDismiss?: boolean;
+  preventNativeDismiss?: boolean | undefined;
 };

package/src/components/gamma/stack/screen/index.ts

@@ -0,0 +1,3 @@
+export { default as StackScreen } from './StackScreen';
+
+export type * from './StackScreen.types';

package/src/components/helpers/PlatformUtils.ts

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+
+export const isIOS26OrHigher =
+  Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26;

package/src/components/helpers/prepareHeaderBarButtonItems.ts

@@ -8,10 +8,12 @@ const prepareMenu = (
   menu: HeaderBarButtonItemWithMenu['menu'],
   index: number,
   side: 'left' | 'right',
+  path: string = '',
 ): HeaderBarButtonItemWithMenu['menu'] => {
   return {
     ...menu,
     items: menu.items.map((menuItem, menuIndex) => {
+      const currentPath = path ? `${path}.${menuIndex}` : `${menuIndex}`;
       const iconType = menuItem.icon?.type;
       const sfSymbolName =
         iconType === 'sfSymbol' ? menuItem.icon?.name : undefined;
@@ -32,7 +34,7 @@ const prepareMenu = (
           xcassetName,
           imageSource,
           templateSource,
-          ...prepareMenu(menuItem, menuIndex, side),
+          ...prepareMenu(menuItem, index, side, currentPath),
         };
       }
       return {
@@ -41,7 +43,7 @@ const prepareMenu = (
         xcassetName,
         imageSource,
         templateSource,
-        menuId: `${menuIndex}-${index}-${side}`,
+        menuId: `${currentPath}-${index}-${side}`,
       };
     }),
   };

package/src/components/safe-area/SafeAreaView.tsx

@@ -9,7 +9,7 @@ import SafeAreaViewNativeComponent, {
 } from '../../fabric/safe-area/SafeAreaViewNativeComponent';
 import { StyleSheet } from 'react-native';
 
-function SafeAreaView(props: SafeAreaViewProps) {
+export function SafeAreaView(props: SafeAreaViewProps) {
   return (
     <SafeAreaViewNativeComponent
       {...props}
@@ -19,8 +19,6 @@ function SafeAreaView(props: SafeAreaViewProps) {
   );
 }
 
-export default SafeAreaView;
-
 function getNativeEdgesProp(
   edges: SafeAreaViewProps['edges'],
 ): SafeAreaViewNativeComponentProps['edges'] {

package/src/components/safe-area/SafeAreaView.types.ts

@@ -8,7 +8,7 @@ export type Edge = 'top' | 'right' | 'bottom' | 'left';
 export type InsetType = 'all' | 'system' | 'interface';
 
 export interface SafeAreaViewProps extends ViewProps {
-  edges?: Readonly<Partial<Record<Edge, boolean>>>;
+  edges?: Readonly<Partial<Record<Edge, boolean>>> | undefined;
   // Android-only
-  insetType?: InsetType;
+  insetType?: InsetType | undefined;
 }

package/src/components/safe-area/SafeAreaView.web.tsx

@@ -2,4 +2,4 @@ import { View } from 'react-native';
 
 const SafeAreaView = View;
 
-export default SafeAreaView;
+export { SafeAreaView };

package/src/components/safe-area/index.ts

@@ -0,0 +1,3 @@
+export { SafeAreaView } from './SafeAreaView';
+
+export type { Edge, InsetType, SafeAreaViewProps } from './SafeAreaView.types';

package/src/components/shared/types.ts

@@ -1,3 +1,40 @@
+export type BlurEffect =
+  | 'none'
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+export type ColorScheme = 'light' | 'dark';
+
+export type Direction = 'ltr' | 'rtl';
+
+export type InterfaceOrientation =
+  | 'all'
+  | 'allButUpsideDown'
+  | 'portrait'
+  | 'portraitUp'
+  | 'portraitDown'
+  | 'landscape'
+  | 'landscapeLeft'
+  | 'landscapeRight';
+
 export type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
 
 export type UserInterfaceStyle = 'unspecified' | 'light' | 'dark';

package/src/components/tabs/{TabsAccessory.tsx → bottom-accessory/TabsBottomAccessory.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
-import TabsBottomAccessoryNativeComponent from '../../fabric/tabs/TabsBottomAccessoryNativeComponent';
-import { TabsAccessoryProps } from './TabsAccessory.types';
+import TabsBottomAccessoryNativeComponent from '../../../fabric/tabs/TabsBottomAccessoryNativeComponent';
+import { TabsBottomAccessoryProps } from './TabsBottomAccessory.types';
 import { StyleSheet } from 'react-native';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-export default function TabsAccessory(props: TabsAccessoryProps) {
+export default function TabsBottomAccessory(props: TabsBottomAccessoryProps) {
   return (
     <TabsBottomAccessoryNativeComponent
       {...props}

package/src/components/tabs/bottom-accessory/TabsBottomAccessory.types.ts

@@ -0,0 +1,15 @@
+import { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+export type TabsBottomAccessoryEnvironment = 'regular' | 'inline';
+
+export type TabsBottomAccessoryEnvironmentChangeEvent = {
+  environment: TabsBottomAccessoryEnvironment;
+};
+
+export type TabsBottomAccessoryProps = ViewProps & {
+  onEnvironmentChange?:
+    | ((
+        event: NativeSyntheticEvent<TabsBottomAccessoryEnvironmentChangeEvent>,
+      ) => void)
+    | undefined;
+};

package/src/components/tabs/bottom-accessory/TabsBottomAccessoryContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TabsBottomAccessoryContentProps } from './TabsBottomAccessoryContent.types';
+import TabsBottomAccessoryContentNativeComponent from '../../../fabric/tabs/TabsBottomAccessoryContentNativeComponent';
+
+/**
+ * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
+ */
+export default function TabsBottomAccessoryContent(
+  props: TabsBottomAccessoryContentProps,
+) {
+  return (
+    <TabsBottomAccessoryContentNativeComponent
+      {...props}
+      collapsable={false}
+      style={[props.style, StyleSheet.absoluteFill]}
+    />
+  );
+}