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

package/src/components/stack/header/ios/iconUtils.ios.ts

@@ -1,5 +1,9 @@
 import type { PlatformIconIOS as ResolvedPlatformIconIOS } from '../../../../fabric/stack/StackHeaderItemIOSNativeComponent';
 import type { PlatformIconIOS } from '../../../shared/types';
+import type {
+  StackHeaderMenuIOS,
+  StackHeaderMenuElementIOS,
+} from './StackHeaderMenu.ios.types';
 import { Image } from 'react-native';
 
 export function resolveIconAssetSources(
@@ -9,16 +13,48 @@ export function resolveIconAssetSources(
     return undefined;
   }
   if (icon.type === 'imageSource') {
+    const resolvedImageSource = Image.resolveAssetSource(icon.imageSource);
+
+    if (!resolvedImageSource) {
+      return undefined;
+    }
+
     return {
       type: 'imageSource',
-      imageSource: Image.resolveAssetSource(icon.imageSource),
+      imageSource: resolvedImageSource,
     };
   }
   if (icon.type === 'templateSource') {
+    const resolvedTemplateSource = Image.resolveAssetSource(
+      icon.templateSource,
+    );
+
+    if (!resolvedTemplateSource) {
+      return undefined;
+    }
+
     return {
       type: 'templateSource',
-      templateSource: Image.resolveAssetSource(icon.templateSource),
+      templateSource: resolvedTemplateSource,
     };
   }
   return icon;
 }
+
+export function resolveMenuElementIcons(
+  element: StackHeaderMenuElementIOS,
+): StackHeaderMenuElementIOS {
+  if (element.type === 'menuItem') {
+    if (element.icon == null) {
+      return element;
+    }
+    return { ...element, icon: resolveIconAssetSources(element.icon) };
+  }
+  return resolveMenuIcons(element);
+}
+
+export function resolveMenuIcons(menu: StackHeaderMenuIOS): StackHeaderMenuIOS {
+  const resolvedIcon = resolveIconAssetSources(menu.icon);
+  const resolvedChildren = menu.children.map(resolveMenuElementIcons);
+  return { ...menu, icon: resolvedIcon, children: resolvedChildren };
+}

package/src/components/stack/header/utils.ts

@@ -2,20 +2,15 @@ import {
   StackHeaderMenuElementIOS,
   StackHeaderMenuIOS,
 } from './ios/StackHeaderMenu.ios.types';
-import { SupportsMenuIOS } from './StackHeaderConfig.ios.types';
 
-export function findMenuElementByIdInItems(
-  items: SupportsMenuIOS[],
+export function findMenuElementByIdInMenus(
+  menus: StackHeaderMenuIOS[],
   id: string,
 ): StackHeaderMenuElementIOS | null {
-  for (const item of items) {
-    if (item.menu === undefined) {
-      continue;
-    }
-
-    const menu = findMenuElementById(item.menu, id);
-    if (menu !== null) {
-      return menu;
+  for (const menu of menus) {
+    const element = findMenuElementById(menu, id);
+    if (element !== null) {
+      return element;
     }
   }
 

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

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

package/src/components/tabs/screen/TabsScreen.types.ts

@@ -110,9 +110,13 @@ export interface TabsScreenPropsBase {
    * Note that:
    * - some components (like `SplitHost`) may choose not to query
    *   its child components,
-   * - Stack v4 implementation **ALWAYS** returns some supported
-   *   orientations (`allButUpsideDown` by default), overriding
-   *   orientation from tab screen.
+   * - Stack v4 (legacy) implementation returns some supported orientations,
+   *   overriding orientation from the tab screen **unless** the Stack v4
+   *   screen has no explicit `screenOrientation` prop and
+   *   `featureFlags.experiment.iosOrientationInheritanceFixEnabled` is
+   *   enabled (the default), in which case it returns `inherit` and no
+   *   longer overrides the parent (see
+   *   https://github.com/software-mansion/react-native-screens/pull/4408).
    *
    * The following values are currently supported:
    *

package/src/experimental/index.ts

@@ -6,3 +6,4 @@
 // Components & types
 
 export * from '../components/safe-area';
+export * from '../components/scroll-to-top-guard';

package/src/fabric/ScrollViewMarkerNativeComponent.ts

@@ -1,6 +1,10 @@
 'use client';
 
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
@@ -12,4 +16,6 @@ interface NativeProps extends ViewProps {
   bottomScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSScrollViewMarker');
+export default codegenNativeComponent<NativeProps>(
+  'RNSScrollViewMarker',
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/FullWindowOverlayNativeComponent.ts

@@ -1,7 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 
 // Internal export, not part of stable library API.
 export interface NativeProps extends ViewProps {
@@ -10,4 +14,4 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNSFullWindowOverlay', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/legacy/ModalScreenNativeComponent.ts

@@ -1,7 +1,12 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+  ColorValue,
+} from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 type ScreenEvent = Readonly<{}>;
@@ -122,8 +127,9 @@ export interface NativeProps extends ViewProps {
   rightScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
   topScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
   synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, true>;
+  iosOrientationInheritanceFixEnabled?: CT.WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSModalScreen', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenContainerNativeComponent.ts

@@ -1,8 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 
 interface NativeProps extends ViewProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSScreenContainer', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenContainer',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenContentWrapperNativeComponent.ts

@@ -1,9 +1,9 @@
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 
 export interface NativeProps extends ViewProps {}
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenContentWrapper',
   {},
-);
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenFooterNativeComponent.ts

@@ -1,6 +1,9 @@
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 
 export interface NativeProps extends ViewProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSScreenFooter', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenFooter',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenNativeComponent.ts

@@ -1,7 +1,12 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+  ColorValue,
+} from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 type ScreenEvent = Readonly<{}>;
@@ -126,8 +131,9 @@ export interface NativeProps extends ViewProps {
     boolean,
     true
   >;
+  iosOrientationInheritanceFixEnabled?: CT.WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSScreen', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenNavigationContainerNativeComponent.ts

@@ -1,11 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 
 interface NativeProps extends ViewProps {}
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenNavigationContainer',
   {},
-);
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenStackHeaderConfigNativeComponent.ts

@@ -1,7 +1,12 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+  ColorValue,
+} from 'react-native';
 
 type DirectionType = 'rtl' | 'ltr';
 
@@ -47,7 +52,7 @@ export interface NativeProps extends ViewProps {
   backTitle?: string | undefined;
   backTitleFontFamily?: string | undefined;
   backTitleFontSize?: CT.Int32 | undefined;
-  backTitleVisible?: CT.WithDefault<boolean, 'true'>;
+  backTitleVisible?: CT.WithDefault<boolean, true>;
   color?: ColorValue | undefined;
   direction?: CT.WithDefault<DirectionType, 'ltr'>;
   hidden?: boolean | undefined;
@@ -96,4 +101,4 @@ export default codegenNativeComponent<NativeProps>(
   {
     interfaceOnly: true,
   },
-);
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenStackHeaderSubviewNativeComponent.ts

@@ -1,7 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 
 export type HeaderSubviewTypes =
   | 'back'
@@ -22,4 +26,4 @@ export default codegenNativeComponent<NativeProps>(
   {
     interfaceOnly: true,
   },
-);
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/ScreenStackNativeComponent.ts

@@ -1,7 +1,12 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+  ColorValue,
+} from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 type FinishTransitioningEvent = Readonly<{}>;
@@ -14,4 +19,7 @@ export interface NativeProps extends ViewProps {
     | undefined;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSScreenStack', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenStack',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/legacy/SearchBarNativeComponent.ts

@@ -76,15 +76,15 @@ export interface NativeProps extends ViewProps {
 type ComponentType = HostComponent<NativeProps>;
 
 interface NativeCommands {
-  blur: (viewRef: React.ElementRef<ComponentType>) => void;
-  focus: (viewRef: React.ElementRef<ComponentType>) => void;
-  clearText: (viewRef: React.ElementRef<ComponentType>) => void;
+  blur: (instance: React.ComponentRef<ComponentType>) => void;
+  focus: (instance: React.ComponentRef<ComponentType>) => void;
+  clearText: (instance: React.ComponentRef<ComponentType>) => void;
   toggleCancelButton: (
-    viewRef: React.ElementRef<ComponentType>,
+    instance: React.ComponentRef<ComponentType>,
     flag: boolean,
   ) => void;
-  setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
-  cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
+  setText: (instance: React.ComponentRef<ComponentType>, text: string) => void;
+  cancelSearch: (instance: React.ComponentRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -98,4 +98,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   ],
 });
 
-export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSSearchBar',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/modals/form-sheet/FormSheetContentWrapperNativeComponent.ts

@@ -1,10 +1,10 @@
 'use client';
 
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 interface NativeProps extends ViewProps {}
 
 export default codegenNativeComponent<NativeProps>(
   'RNSFormSheetContentWrapper',
-);
+) as HostComponent<NativeProps>;

package/src/fabric/modals/form-sheet/FormSheetHostNativeComponent.ts

@@ -1,6 +1,11 @@
 'use client';
 
-import type { CodegenTypes as CT, ColorValue, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  ColorValue,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -44,4 +49,4 @@ interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNSFormSheetHost', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/safe-area/SafeAreaViewNativeComponent.ts

@@ -2,7 +2,11 @@
 // https://github.com/AppAndFlow/react-native-safe-area-context/blob/v5.6.1/src/specs/NativeSafeAreaView.ts
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 
 type InsetType = 'all' | 'system' | 'interface';
 
@@ -21,4 +25,4 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNSSafeAreaView', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/scroll-to-top-guard/ScrollToTopGuardNativeComponent.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import { codegenNativeComponent } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSScrollToTopGuard', {
+  excludedPlatforms: ['android'],
+}) as HostComponent<NativeProps>;

package/src/fabric/split/SplitHostNativeComponent.ts

@@ -112,7 +112,7 @@ type ComponentType = HostComponent<NativeProps>;
 
 interface NativeCommands {
   showColumn: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     column: string,
   ) => void;
 }
@@ -121,4 +121,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: ['showColumn'],
 });
 
-export default codegenNativeComponent<NativeProps>('RNSSplitHost', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSSplitHost',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/split/SplitScreenNativeComponent.ts

@@ -1,6 +1,10 @@
 'use client';
 
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -21,4 +25,4 @@ interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNSSplitScreen', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHeaderConfigAndroidNativeComponent.ts

@@ -103,6 +103,8 @@ export interface NativeProps extends ViewProps {
   scrollFlagExitUntilCollapsed?: CT.WithDefault<boolean, false>;
   scrollFlagSnap?: CT.WithDefault<boolean, false>;
 
+  liftOnScroll?: CT.WithDefault<boolean, true>;
+
   toolbarMenu?: UnsafeMixed<StackHeaderToolbarMenuBaseAndroid> | undefined;
   toolbarMenuGroupDividerEnabled?: CT.WithDefault<boolean, false>;
   onToolbarMenuItemPress?:
@@ -142,4 +144,4 @@ export default codegenNativeComponent<NativeProps>(
     interfaceOnly: true,
     excludedPlatforms: ['iOS'],
   },
-);
+) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHeaderConfigIOSNativeComponent.ts

@@ -6,7 +6,10 @@ import type {
   ViewProps,
 } from 'react-native';
 import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
-import { PlatformIconIOS } from './StackHeaderItemIOSNativeComponent';
+import type {
+  PlatformIconIOS,
+  StackHeaderMenuIOS,
+} from './StackHeaderItemIOSNativeComponent';
 import { UnsafeMixed } from '../codegenUtils';
 
 export type MenuItemPressEvent = Readonly<{ menuItemId: string }>;
@@ -28,6 +31,8 @@ export interface NativeProps extends ViewProps {
   largeSubtitle?: string | undefined;
   largeTitleEnabled?: CT.WithDefault<boolean, false>;
 
+  titleMenu?: UnsafeMixed<StackHeaderMenuIOS> | undefined;
+
   onMenuItemPress?: CT.DirectEventHandler<MenuItemPressEvent> | undefined;
   onMenuSelectionChange?:
     | CT.DirectEventHandler<MenuSelectionChangeEvent>
@@ -68,4 +73,4 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 export default codegenNativeComponent<NativeProps>('RNSStackHeaderConfigIOS', {
   interfaceOnly: true,
   excludedPlatforms: ['android'],
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHeaderItemIOSNativeComponent.ts

@@ -2,6 +2,7 @@
 
 import type {
   CodegenTypes as CT,
+  HostComponent,
   ImageResolvedAssetSource,
   ViewProps,
 } from 'react-native';
@@ -79,4 +80,4 @@ export interface NativeProps extends ViewProps {
 export default codegenNativeComponent<NativeProps>('RNSStackHeaderItemIOS', {
   interfaceOnly: true,
   excludedPlatforms: ['android'],
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHeaderItemSpacerIOSNativeComponent.ts

@@ -1,6 +1,10 @@
 'use client';
 
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 type SpacerSize = 'fixed' | 'flexible';
@@ -17,4 +21,4 @@ export default codegenNativeComponent<NativeProps>(
   {
     excludedPlatforms: ['android'],
   },
-);
+) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHeaderSubviewAndroidNativeComponent.ts

@@ -1,6 +1,10 @@
 'use client';
 
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 type StackHeaderSubviewTypeAndroid =
@@ -24,4 +28,4 @@ export default codegenNativeComponent<NativeProps>(
     interfaceOnly: true,
     excludedPlatforms: ['iOS'],
   },
-);
+) as HostComponent<NativeProps>;

package/src/fabric/stack/StackHostNativeComponent.ts

@@ -1,8 +1,11 @@
 'use client';
 
-import type { ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 export interface NativeProps extends ViewProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSStackHost', {});
+export default codegenNativeComponent<NativeProps>(
+  'RNSStackHost',
+  {},
+) as HostComponent<NativeProps>;

package/src/fabric/stack/StackScreenNativeComponent.ts

@@ -1,6 +1,10 @@
 'use client';
 
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -39,4 +43,4 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNSStackScreen', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/fabric/tabs/TabsBottomAccessoryContentNativeComponent.ts

@@ -1,7 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 
 type BottomAccessoryEnvironment = 'regular' | 'inline';
 
@@ -12,4 +16,4 @@ export interface NativeProps extends ViewProps {
 export default codegenNativeComponent<NativeProps>(
   'RNSTabsBottomAccessoryContent',
   {},
-);
+) as HostComponent<NativeProps>;

package/src/fabric/tabs/TabsBottomAccessoryNativeComponent.ts

@@ -1,7 +1,11 @@
 'use client';
 
 import { codegenNativeComponent } from 'react-native';
-import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
 
 type EnvironmentChangeEvent = {
   environment: 'regular' | 'inline';
@@ -16,4 +20,4 @@ export interface NativeProps extends ViewProps {
 export default codegenNativeComponent<NativeProps>('RNSTabsBottomAccessory', {
   interfaceOnly: true,
   excludedPlatforms: ['android'],
-});
+}) as HostComponent<NativeProps>;