@symbiote-native/navigation 1.0.0

package/codegen-specs/ScreenNativeComponent.ts

@@ -0,0 +1,133 @@
+'use client';
+
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ScreenEvent = Readonly<{}>;
+
+type ScreenDismissedEvent = Readonly<{
+  dismissCount: CT.Int32;
+}>;
+
+type TransitionProgressEvent = Readonly<{
+  progress: CT.Double;
+  closing: CT.Int32;
+  goingForward: CT.Int32;
+}>;
+
+type HeaderHeightChangeEvent = Readonly<{
+  headerHeight: CT.Double;
+}>;
+
+type SheetDetentChangedEvent = Readonly<{
+  index: CT.Int32;
+  isStable: boolean;
+}>;
+
+type GestureResponseDistanceType = Readonly<{
+  start: CT.Float;
+  end: CT.Float;
+  top: CT.Float;
+  bottom: CT.Float;
+}>;
+
+type StackPresentation =
+  | 'push'
+  | 'modal'
+  | 'transparentModal'
+  | 'fullScreenModal'
+  | 'formSheet'
+  | 'pageSheet'
+  | 'containedModal'
+  | 'containedTransparentModal';
+
+type StackAnimation =
+  | 'default'
+  | 'flip'
+  | 'simple_push'
+  | 'none'
+  | 'fade'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'fade_from_bottom'
+  | 'ios_from_right'
+  | 'ios_from_left';
+
+type SwipeDirection = 'vertical' | 'horizontal';
+
+type ReplaceAnimation = 'pop' | 'push';
+
+type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
+
+type OptionalBoolean = 'undefined' | 'false' | 'true';
+
+export interface NativeProps extends ViewProps {
+  onAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDismissed?: CT.DirectEventHandler<ScreenDismissedEvent> | undefined;
+  onNativeDismissCancelled?:
+    | CT.DirectEventHandler<ScreenDismissedEvent>
+    | undefined;
+  onWillAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onWillDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderHeightChange?:
+    | CT.DirectEventHandler<HeaderHeightChangeEvent>
+    | undefined;
+  onTransitionProgress?:
+    | CT.DirectEventHandler<TransitionProgressEvent>
+    | undefined;
+  onGestureCancel?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderBackButtonClicked?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onSheetDetentChanged?:
+    | CT.DirectEventHandler<SheetDetentChangedEvent>
+    | undefined;
+  screenId?: CT.WithDefault<string, ''>;
+  sheetAllowedDetents?: number[] | undefined;
+  sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;
+  sheetGrabberVisible?: CT.WithDefault<boolean, false>;
+  sheetCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
+  sheetExpandsWhenScrolledToEdge?: CT.WithDefault<boolean, false>;
+  sheetInitialDetent?: CT.WithDefault<CT.Int32, 0>;
+  sheetElevation?: CT.WithDefault<CT.Int32, 24>;
+  sheetShouldOverflowTopInset?: CT.WithDefault<boolean, false>;
+  sheetDefaultResizeAnimationEnabled?: CT.WithDefault<boolean, true>;
+  customAnimationOnSwipe?: boolean | undefined;
+  fullScreenSwipeEnabled?: CT.WithDefault<OptionalBoolean, 'undefined'>;
+  fullScreenSwipeShadowEnabled?: CT.WithDefault<boolean, true>;
+  homeIndicatorHidden?: boolean | undefined;
+  preventNativeDismiss?: boolean | undefined;
+  gestureEnabled?: CT.WithDefault<boolean, true>;
+  statusBarColor?: ColorValue | undefined;
+  statusBarHidden?: boolean | undefined;
+  screenOrientation?: string | undefined;
+  statusBarAnimation?: string | undefined;
+  statusBarStyle?: string | undefined;
+  statusBarTranslucent?: boolean | undefined;
+  gestureResponseDistance?: GestureResponseDistanceType | undefined;
+  stackPresentation?: CT.WithDefault<StackPresentation, 'push'>;
+  stackAnimation?: CT.WithDefault<StackAnimation, 'default'>;
+  transitionDuration?: CT.WithDefault<CT.Int32, 500>;
+  replaceAnimation?: CT.WithDefault<ReplaceAnimation, 'pop'>;
+  swipeDirection?: CT.WithDefault<SwipeDirection, 'horizontal'>;
+  hideKeyboardOnSwipe?: boolean | undefined;
+  activityState?: CT.WithDefault<CT.Float, -1.0>;
+  navigationBarColor?: ColorValue | undefined;
+  navigationBarTranslucent?: boolean | undefined;
+  navigationBarHidden?: boolean | undefined;
+  nativeBackButtonDismissalEnabled?: boolean | undefined;
+  bottomScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  leftScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  rightScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  topScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, true>;
+  androidResetScreenShadowStateOnOrientationChangeEnabled?: CT.WithDefault<
+    boolean,
+    true
+  >;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSScreen', {
+  interfaceOnly: true,
+});

package/codegen-specs/ScreenNavigationContainerNativeComponent.ts

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

package/codegen-specs/ScreenStackHeaderConfigNativeComponent.ts

@@ -0,0 +1,99 @@
+'use client';
+
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+
+type DirectionType = 'rtl' | 'ltr';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type OnAttachedEvent = Readonly<{}>;
+// eslint-disable-next-line @typescript-eslint/ban-types
+type OnDetachedEvent = Readonly<{}>;
+
+type OnPressHeaderBarButtonItemEvent = Readonly<{ buttonId: string }>;
+type OnPressHeaderBarButtonMenuItemEvent = Readonly<{ menuId: string }>;
+
+type BackButtonDisplayMode = 'minimal' | 'default' | 'generic';
+
+type BlurEffect =
+  | 'none'
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+type UserInterfaceStyle = 'unspecified' | 'light' | 'dark';
+
+export interface NativeProps extends ViewProps {
+  onAttached?: CT.DirectEventHandler<OnAttachedEvent> | undefined;
+  onDetached?: CT.DirectEventHandler<OnDetachedEvent> | undefined;
+  backgroundColor?: ColorValue | undefined;
+  backTitle?: string | undefined;
+  backTitleFontFamily?: string | undefined;
+  backTitleFontSize?: CT.Int32 | undefined;
+  backTitleVisible?: CT.WithDefault<boolean, 'true'>;
+  color?: ColorValue | undefined;
+  direction?: CT.WithDefault<DirectionType, 'ltr'>;
+  hidden?: boolean | undefined;
+  hideShadow?: boolean | undefined;
+  largeTitle?: boolean | undefined;
+  largeTitleFontFamily?: string | undefined;
+  largeTitleFontSize?: CT.Int32 | undefined;
+  largeTitleFontWeight?: string | undefined;
+  largeTitleBackgroundColor?: ColorValue | undefined;
+  largeTitleHideShadow?: boolean | undefined;
+  largeTitleColor?: ColorValue | undefined;
+  translucent?: boolean | undefined;
+  title?: string | undefined;
+  titleFontFamily?: string | undefined;
+  titleFontSize?: CT.Int32 | undefined;
+  titleFontWeight?: string | undefined;
+  titleColor?: ColorValue | undefined;
+  disableBackButtonMenu?: boolean | undefined;
+  backButtonDisplayMode?: CT.WithDefault<BackButtonDisplayMode, 'default'>;
+  hideBackButton?: boolean | undefined;
+  backButtonInCustomView?: boolean | undefined;
+  blurEffect?: CT.WithDefault<BlurEffect, 'none'>;
+  // TODO: implement this props on iOS
+  topInsetEnabled?: boolean | undefined;
+  headerLeftBarButtonItems?: CT.UnsafeMixed[] | undefined;
+  headerRightBarButtonItems?: CT.UnsafeMixed[] | undefined;
+  onPressHeaderBarButtonItem?:
+    | CT.DirectEventHandler<OnPressHeaderBarButtonItemEvent>
+    | undefined;
+  onPressHeaderBarButtonMenuItem?:
+    | CT.DirectEventHandler<OnPressHeaderBarButtonMenuItemEvent>
+    | undefined;
+  synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, true>;
+
+  // Experimental
+  userInterfaceStyle?: CT.WithDefault<UserInterfaceStyle, 'unspecified'>;
+  consumeTopInset?: boolean | undefined;
+  consumeLeftInset?: boolean | undefined;
+  consumeRightInset?: boolean | undefined;
+  consumeBottomInset?: boolean | undefined;
+  legacyTopInsetBehavior?: boolean | undefined;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderConfig',
+  {
+    interfaceOnly: true,
+  },
+);

package/codegen-specs/ScreenStackHeaderSubviewNativeComponent.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes as CT, ViewProps } from 'react-native';
+
+export type HeaderSubviewTypes =
+  | 'back'
+  | 'right'
+  | 'left'
+  | 'title'
+  | 'center'
+  | 'searchBar';
+
+export interface NativeProps extends ViewProps {
+  type?: CT.WithDefault<HeaderSubviewTypes, 'left'>;
+  hidesSharedBackground?: boolean | undefined;
+  synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, true>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderSubview',
+  {
+    interfaceOnly: true,
+  },
+);

package/codegen-specs/ScreenStackNativeComponent.ts

@@ -0,0 +1,17 @@
+'use client';
+
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes as CT, ViewProps, ColorValue } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FinishTransitioningEvent = Readonly<{}>;
+
+export interface NativeProps extends ViewProps {
+  nativeContainerBackgroundColor?: ColorValue | undefined;
+
+  onFinishTransitioning?:
+    | CT.DirectEventHandler<FinishTransitioningEvent>
+    | undefined;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSScreenStack', {});

package/codegen-specs/SearchBarNativeComponent.ts

@@ -0,0 +1,101 @@
+'use client';
+
+import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
+import type {
+  CodegenTypes as CT,
+  ViewProps,
+  ColorValue,
+  HostComponent,
+} from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type SearchBarEvent = Readonly<{}>;
+
+export type SearchButtonPressedEvent = Readonly<{
+  text?: string | undefined;
+}>;
+
+export type ChangeTextEvent = Readonly<{
+  text?: string | undefined;
+}>;
+
+type SearchBarPlacement =
+  | 'automatic'
+  | 'inline' // deprecated starting from iOS 26
+  | 'stacked'
+  | 'integrated'
+  | 'integratedButton'
+  | 'integratedCentered';
+
+type AutoCapitalizeType =
+  | 'systemDefault'
+  | 'none'
+  | 'words'
+  | 'sentences'
+  | 'characters';
+
+type OptionalBoolean = 'undefined' | 'false' | 'true';
+
+export interface NativeProps extends ViewProps {
+  onSearchFocus?: CT.DirectEventHandler<SearchBarEvent> | null | undefined;
+  onSearchBlur?: CT.DirectEventHandler<SearchBarEvent> | null | undefined;
+  onSearchButtonPress?:
+    | CT.DirectEventHandler<SearchButtonPressedEvent>
+    | null
+    | undefined;
+  onCancelButtonPress?:
+    | CT.DirectEventHandler<SearchBarEvent>
+    | null
+    | undefined;
+  onChangeText?: CT.DirectEventHandler<ChangeTextEvent> | null | undefined;
+  hideWhenScrolling?: CT.WithDefault<boolean, true>;
+  autoCapitalize?: CT.WithDefault<AutoCapitalizeType, 'systemDefault'>;
+  placeholder?: string | undefined;
+  placement?: CT.WithDefault<SearchBarPlacement, 'automatic'>;
+  allowToolbarIntegration?: CT.WithDefault<boolean, true>;
+  obscureBackground?: CT.WithDefault<OptionalBoolean, 'undefined'>;
+  hideNavigationBar?: CT.WithDefault<OptionalBoolean, 'undefined'>;
+  cancelButtonText?: string | undefined;
+  // TODO: implement these on iOS
+  barTintColor?: ColorValue | undefined;
+  tintColor?: ColorValue | undefined;
+  textColor?: ColorValue | undefined;
+
+  // Android only
+  autoFocus?: CT.WithDefault<boolean, false>;
+  disableBackButtonOverride?: boolean | undefined;
+  // TODO: consider creating enum here
+  inputType?: string | undefined;
+  onClose?: CT.DirectEventHandler<SearchBarEvent> | null | undefined;
+  onOpen?: CT.DirectEventHandler<SearchBarEvent> | null | undefined;
+  hintTextColor?: ColorValue | undefined;
+  headerIconColor?: ColorValue | undefined;
+  shouldShowHintSearchIcon?: CT.WithDefault<boolean, true>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  blur: (viewRef: React.ElementRef<ComponentType>) => void;
+  focus: (viewRef: React.ElementRef<ComponentType>) => void;
+  clearText: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleCancelButton: (
+    viewRef: React.ElementRef<ComponentType>,
+    flag: boolean,
+  ) => void;
+  setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+  cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'blur',
+    'focus',
+    'clearText',
+    'toggleCancelButton',
+    'setText',
+    'cancelSearch',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('RNSSearchBar', {});

package/codegen-specs/codegenUtils.ts

@@ -0,0 +1,6 @@
+// copied from https://github.com/software-mansion/react-native-svg/blob/be06e84ec4809a8071f18f9824ffbe61424ee80d/src/fabric/codegenUtils.ts
+
+// codegen will generate folly::dynamic in place of this type, but it's not exported by RN
+// since codegen doesn't really follow imports, this way we can trick it into generating the correct type
+// while keeping typescript happy
+export type UnsafeMixed<T> = T;

package/codegen-specs/gamma/ScrollViewMarkerNativeComponent.ts

@@ -0,0 +1,15 @@
+'use client';
+
+import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
+
+interface NativeProps extends ViewProps {
+  leftScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  topScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  rightScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  bottomScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSScrollViewMarker');

package/codegen-specs/gamma/modals/form-sheet/FormSheetContentWrapperNativeComponent.ts

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

package/codegen-specs/gamma/modals/form-sheet/FormSheetHostNativeComponent.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import type { CodegenTypes as CT, ColorValue, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type GenericEmptyEvent = Readonly<{}>;
+
+type DetentChangedEvent = Readonly<{
+  index: CT.Int32;
+}>;
+
+interface NativeProps extends ViewProps {
+  // General
+  isOpen?: CT.WithDefault<boolean, false>;
+  detents?: CT.Double[] | undefined;
+  prefersGrabberVisible?: CT.WithDefault<boolean, false>;
+  preferredCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
+  largestUndimmedDetentIndex?: CT.WithDefault<CT.Int32, -1>;
+  initialDetentIndex?: CT.WithDefault<CT.Int32, 0>;
+  prefersScrollingExpandsWhenScrolledToEdge?: CT.WithDefault<boolean, true>;
+  preventNativeDismiss?: CT.WithDefault<boolean, false>;
+  nativeContainerBackgroundColor?: ColorValue | undefined;
+  // Events
+  onWillAppear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDidAppear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onWillDisappear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDidDisappear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDismiss?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onNativeDismiss?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onNativeDismissPrevented?:
+    | CT.DirectEventHandler<GenericEmptyEvent>
+    | undefined;
+  onDetentChanged?: CT.DirectEventHandler<DetentChangedEvent> | undefined;
+
+  // Workaround helper that triggers a synchronous event to flush a pending
+  // shadow-node state update in the current event beat. Mirrors iOS's
+  // `EventQueue::UpdateMode::unstable_Immediate`, which Android does not expose
+  // to Java/Kotlin as of now.
+  // TODO: Remove when a synchronous state update API is exposed on Android.
+  // https://github.com/facebook/react-native/pull/56311
+  onSyncFlush?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSFormSheetHost', {
+  interfaceOnly: true,
+});

package/codegen-specs/gamma/split/SplitHostNativeComponent.ts

@@ -0,0 +1,124 @@
+'use client';
+
+import type {
+  CodegenTypes as CT,
+  ViewProps,
+  HostComponent,
+} from 'react-native';
+import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type GenericEmptyEvent = Readonly<{}>;
+
+type DisplayModeWillChangeEvent = {
+  currentDisplayMode: string;
+  nextDisplayMode: string;
+};
+
+type SplitViewDisplayModeButtonVisibility = 'always' | 'automatic' | 'never';
+
+type SplitViewSplitBehavior = 'automatic' | 'displace' | 'overlay' | 'tile';
+
+type SplitViewPrimaryEdge = 'leading' | 'trailing';
+
+type SplitViewDisplayMode =
+  | 'automatic'
+  | 'secondaryOnly'
+  | 'oneBesideSecondary'
+  | 'oneOverSecondary'
+  | 'twoBesideSecondary'
+  | 'twoOverSecondary'
+  | 'twoDisplaceSecondary';
+
+type SplitViewOrientation =
+  | 'inherit'
+  | 'all'
+  | 'allButUpsideDown'
+  | 'portrait'
+  | 'portraitUp'
+  | 'portraitDown'
+  | 'landscape'
+  | 'landscapeLeft'
+  | 'landscapeRight';
+
+type SplitViewColorScheme = 'inherit' | 'light' | 'dark';
+
+type SplitViewPrimaryBackgroundStyle = 'default' | 'none' | 'sidebar';
+
+type SplitViewTopColumnForCollapsing =
+  | 'default'
+  | 'primary'
+  | 'supplementary'
+  | 'secondary';
+
+interface ColumnMetrics {
+  minimumPrimaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  maximumPrimaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  preferredPrimaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
+  minimumSupplementaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  maximumSupplementaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  preferredSupplementaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
+
+  // iOS 26 only
+  minimumSecondaryColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  preferredSecondaryColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
+  minimumInspectorColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  maximumInspectorColumnWidth?: CT.WithDefault<CT.Float, -1.0>;
+  preferredInspectorColumnWidthOrFraction?: CT.WithDefault<CT.Float, -1.0>;
+}
+
+interface NativeProps extends ViewProps {
+  // Appearance
+
+  preferredDisplayMode?: CT.WithDefault<SplitViewDisplayMode, 'automatic'>;
+  preferredSplitBehavior?: CT.WithDefault<SplitViewSplitBehavior, 'automatic'>;
+  primaryEdge?: CT.WithDefault<SplitViewPrimaryEdge, 'leading'>;
+  showSecondaryToggleButton?: CT.WithDefault<boolean, false>;
+  displayModeButtonVisibility?: CT.WithDefault<
+    SplitViewDisplayModeButtonVisibility,
+    'automatic'
+  >;
+  columnMetrics?: ColumnMetrics | undefined;
+  orientation?: CT.WithDefault<SplitViewOrientation, 'inherit'>;
+  colorScheme?: CT.WithDefault<SplitViewColorScheme, 'inherit'>;
+  primaryBackgroundStyle?: CT.WithDefault<
+    SplitViewPrimaryBackgroundStyle,
+    'default'
+  >;
+
+  // Behavior
+
+  topColumnForCollapsing?: CT.WithDefault<
+    SplitViewTopColumnForCollapsing,
+    'default'
+  >;
+
+  // Interactions
+
+  presentsWithGesture?: CT.WithDefault<boolean, true>;
+  showInspector?: CT.WithDefault<boolean, false>;
+
+  // Custom events
+
+  onCollapse?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDisplayModeWillChange?:
+    | CT.DirectEventHandler<DisplayModeWillChangeEvent>
+    | undefined;
+  onExpand?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onInspectorHide?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  showColumn: (
+    viewRef: React.ElementRef<ComponentType>,
+    column: string,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['showColumn'],
+});
+
+export default codegenNativeComponent<NativeProps>('RNSSplitHost', {});

package/codegen-specs/gamma/split/SplitScreenNativeComponent.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import type { CodegenTypes as CT, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type GenericEmptyEvent = Readonly<{}>;
+
+type SplitScreenColumnType = 'column' | 'inspector';
+
+interface NativeProps extends ViewProps {
+  // Config
+  columnType?: CT.WithDefault<SplitScreenColumnType, 'column'>;
+
+  // Events
+  onWillAppear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDidAppear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onWillDisappear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+  onDidDisappear?: CT.DirectEventHandler<GenericEmptyEvent> | undefined;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSSplitScreen', {
+  interfaceOnly: true,
+});