one 2.10.0 → 2.11.1

package/src/one.ts

@@ -1,303 +1,2 @@
-// public One namespaces. platform-specific entries keep the names and prop
-// contracts of their native frameworks; shared components live under UI.
-
-import {
-  Auth,
-  Browser as NativeBrowser,
-  Widgets,
-  LiveActivities,
-  LocalAuthentication,
-  ProtectedStore,
-  KeepAwake,
-  Print,
-  StoreReview,
-  QuickActions,
-  Location,
-  FileSystem,
-  Audio,
-  CameraView,
-  Share,
-  Open,
-  PhotoLibrary,
-  MapServices,
-  AppTracking,
-  AppIcon,
-  ScreenOrientation,
-  ScreenCapture,
-  Purchases,
-  ImageManipulator,
-  Device,
-  Crypto as NativeCrypto,
-  Localization,
-  Motion,
-  BackgroundTasks,
-  AppIntents,
-  DeviceAttestation,
-  Contacts,
-  Calendar,
-  WidgetUI,
-  VNDocumentCameraViewController,
-  DataScannerViewController,
-  CNContactViewController,
-  CNMutableContact,
-  CNContactStore,
-  MFMailComposeViewController,
-  MFMessageComposeViewController,
-  Clipboard as NativeClipboard,
-  Barometer as NativeBarometer,
-  LightSensor as NativeLightSensor,
-  Pedometer as NativePedometer,
-  Battery as NativeBattery,
-  Brightness as NativeBrightness,
-  SpeechSynthesis as NativeSpeechSynthesis,
-  AppInfo,
-  Color,
-  Database,
-  Compose,
-  Fonts,
-  DocumentPicker,
-  Haptics,
-  ImagePicker,
-  LaunchScreen,
-  MenuAction,
-  Menu as NativeMenu,
-  ContextMenu as NativeContextMenu,
-  Notifications,
-  Network as NativeNetwork,
-  SecureStore as NativeSecureStore,
-  Storage,
-  Speech as NativeSpeech,
-  Updates as NativeUpdates,
-  SplitView,
-  Swift,
-  TextInput,
-  ToolbarHost,
-  ToolbarItem,
-  UI as NativeUI,
-  ReservedRegions,
-  ZoomTransitionAlignmentRectDetector,
-  ZoomTransitionEnabler,
-  ZoomTransitionSource,
-  type ColorType,
-} from './platform'
-import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from './safe-area-context'
-
-export type OnePlatform = 'web' | 'ios' | 'android'
-
-export type OneIOS = typeof Swift & {
-  readonly MFMailComposeViewController: typeof MFMailComposeViewController
-  readonly MFMessageComposeViewController: typeof MFMessageComposeViewController
-  readonly CNContactViewController: typeof CNContactViewController
-  readonly CNMutableContact: typeof CNMutableContact
-  readonly CNContactStore: typeof CNContactStore
-  readonly DataScannerViewController: typeof DataScannerViewController
-  readonly VNDocumentCameraViewController: typeof VNDocumentCameraViewController
-  readonly WidgetUI: typeof WidgetUI
-  readonly CameraView: typeof CameraView
-  readonly Color: ColorType['ios']
-  readonly MenuAction: typeof MenuAction
-  readonly SplitView: typeof SplitView
-  readonly ToolbarHost: typeof ToolbarHost
-  // the UIBarButtonItem inside a ToolbarHost; One.iOS.ToolbarItem is SwiftUI's,
-  // inside One.iOS.Toolbar.
-  readonly BarButtonItem: typeof ToolbarItem
-  readonly ZoomTransitionAlignmentRectDetector: typeof ZoomTransitionAlignmentRectDetector
-  readonly ZoomTransitionEnabler: typeof ZoomTransitionEnabler
-  readonly ZoomTransitionSource: typeof ZoomTransitionSource
-}
-
-export type OneAndroid = typeof Compose & {
-  readonly Color: ColorType['android']
-  readonly Menu: typeof NativeMenu
-  readonly ContextMenu: typeof NativeContextMenu
-  readonly CameraView: typeof CameraView
-}
-
-export type OneSafeArea = {
-  readonly Provider: typeof SafeAreaProvider
-  readonly View: typeof SafeAreaView
-  readonly initialMetrics: typeof initialWindowMetrics
-}
-
-export type OneUI = typeof NativeUI & {
-  readonly Fonts: typeof Fonts
-  readonly SafeArea: Readonly<OneSafeArea>
-  readonly TextInput: typeof TextInput
-  readonly ReservedRegions: typeof ReservedRegions
-}
-
-export type OneNotifications = typeof Notifications
-
-export type OneAPI = {
-  readonly platform: OnePlatform
-  // a url goes to the os (a new tab on web), content to the system share
-  // sheet, and the app's settings page opens on native.
-  readonly openURL: typeof Open.openURL
-  readonly openShare: typeof Open.openShare
-  readonly openSettings: typeof Open.openSettings
-  readonly AppInfo: typeof AppInfo
-  readonly Database: typeof Database
-  readonly Widgets: typeof Widgets
-  readonly LiveActivities: typeof LiveActivities
-  readonly LocalAuthentication: typeof LocalAuthentication
-  readonly ProtectedStore: typeof ProtectedStore
-  readonly KeepAwake: typeof KeepAwake
-  readonly Print: typeof Print
-  readonly StoreReview: typeof StoreReview
-  readonly QuickActions: typeof QuickActions
-  readonly Location: typeof Location
-  readonly FileSystem: typeof FileSystem
-  readonly Audio: typeof Audio
-  readonly Share: typeof Share
-  readonly PhotoLibrary: typeof PhotoLibrary
-  readonly MapServices: typeof MapServices
-  readonly AppTracking: typeof AppTracking
-  readonly AppIcon: typeof AppIcon
-  readonly ScreenOrientation: typeof ScreenOrientation
-  readonly ScreenCapture: typeof ScreenCapture
-  readonly Purchases: typeof Purchases
-  readonly ImageManipulator: typeof ImageManipulator
-  readonly Device: typeof Device
-  readonly Crypto: typeof NativeCrypto
-  readonly Localization: typeof Localization
-  readonly Motion: typeof Motion
-  readonly BackgroundTasks: typeof BackgroundTasks
-  readonly AppIntents: typeof AppIntents
-  readonly DeviceAttestation: typeof DeviceAttestation
-  readonly Contacts: typeof Contacts
-  readonly Calendar: typeof Calendar
-  readonly iOS: Readonly<OneIOS>
-  readonly Android: Readonly<OneAndroid>
-  readonly UI: Readonly<OneUI>
-  readonly Notifications: Readonly<OneNotifications>
-  readonly Clipboard: typeof NativeClipboard
-  readonly Barometer: typeof NativeBarometer
-  readonly LightSensor: typeof NativeLightSensor
-  readonly Pedometer: typeof NativePedometer
-  readonly Battery: typeof NativeBattery
-  readonly Brightness: typeof NativeBrightness
-  readonly SpeechSynthesis: typeof NativeSpeechSynthesis
-  readonly Haptics: typeof Haptics
-  readonly LaunchScreen: typeof LaunchScreen
-  readonly Network: typeof NativeNetwork
-  readonly Auth: typeof Auth
-  readonly Browser: typeof NativeBrowser
-  readonly ImagePicker: typeof ImagePicker
-  readonly DocumentPicker: typeof DocumentPicker
-  readonly SecureStore: typeof NativeSecureStore
-  readonly Storage: typeof Storage
-  readonly Speech: typeof NativeSpeech
-  readonly Updates: typeof NativeUpdates
-}
-
-function currentPlatform(): OnePlatform {
-  const defined =
-    Reflect.get(globalThis, '__ONE_PLATFORM__') ??
-    (typeof process !== 'undefined' ? process.env.ONE_PLATFORM : undefined)
-  return defined === 'ios' || defined === 'android' ? defined : 'web'
-}
-
-const iOS: Readonly<OneIOS> = Object.freeze({
-  ...Swift,
-  VNDocumentCameraViewController,
-  DataScannerViewController,
-  CNContactViewController,
-  CNMutableContact,
-  CNContactStore,
-  MFMailComposeViewController,
-  MFMessageComposeViewController,
-  WidgetUI,
-  CameraView,
-  Color: Color.ios,
-  MenuAction,
-  SplitView,
-  ToolbarHost,
-  BarButtonItem: ToolbarItem,
-  ZoomTransitionAlignmentRectDetector,
-  ZoomTransitionEnabler,
-  ZoomTransitionSource,
-})
-
-const Android: Readonly<OneAndroid> = Object.freeze({
-  ...Compose,
-  Color: Color.android,
-  Menu: NativeMenu,
-  ContextMenu: NativeContextMenu,
-  CameraView,
-})
-
-const SafeArea: Readonly<OneSafeArea> = Object.freeze({
-  Provider: SafeAreaProvider,
-  View: SafeAreaView,
-  initialMetrics: initialWindowMetrics,
-})
-
-const UI: Readonly<OneUI> = Object.freeze({
-  ...NativeUI,
-  Fonts,
-  SafeArea,
-  TextInput,
-  ReservedRegions,
-})
-
-export const One: OneAPI = Object.freeze({
-  get platform(): OnePlatform {
-    return currentPlatform()
-  },
-  openURL: Open.openURL,
-  openShare: Open.openShare,
-  openSettings: Open.openSettings,
-  AppInfo,
-  Database,
-  Widgets,
-  LiveActivities,
-  LocalAuthentication,
-  ProtectedStore,
-  KeepAwake,
-  Print,
-  StoreReview,
-  QuickActions,
-  Location,
-  FileSystem,
-  Audio,
-  Share,
-  PhotoLibrary,
-  MapServices,
-  AppTracking,
-  AppIcon,
-  ScreenOrientation,
-  ScreenCapture,
-  Purchases,
-  ImageManipulator,
-  Device,
-  Crypto: NativeCrypto,
-  Localization,
-  Motion,
-  BackgroundTasks,
-  AppIntents,
-  DeviceAttestation,
-  Contacts,
-  Calendar,
-  iOS,
-  Android,
-  UI,
-  Notifications,
-  Clipboard: NativeClipboard,
-  Barometer: NativeBarometer,
-  LightSensor: NativeLightSensor,
-  Pedometer: NativePedometer,
-  Battery: NativeBattery,
-  Brightness: NativeBrightness,
-  SpeechSynthesis: NativeSpeechSynthesis,
-  Haptics,
-  LaunchScreen,
-  Network: NativeNetwork,
-  Auth,
-  Browser: NativeBrowser,
-  ImagePicker,
-  DocumentPicker,
-  SecureStore: NativeSecureStore,
-  Storage,
-  Speech: NativeSpeech,
-  Updates: NativeUpdates,
-})
+// keep the shared entry separate from platform suffix resolution.
+export * from './one-shared'

package/src/platform/adaptive/fixed.ts

@@ -0,0 +1,27 @@
+import type { HingeState, SizeClass } from './types'
+
+// windows without size classes or hinges (web and macOS): always regular, never a hinge
+const DEFAULT_SIZE_CLASS: SizeClass = {
+  horizontal: 'regular',
+  vertical: 'regular',
+}
+
+export function useSizeClass(): SizeClass {
+  return DEFAULT_SIZE_CLASS
+}
+
+export async function getSizeClass(): Promise<SizeClass> {
+  return DEFAULT_SIZE_CLASS
+}
+
+export function useHinge(): HingeState | null {
+  return null
+}
+
+export async function getHinge(): Promise<HingeState | null> {
+  return null
+}
+
+export function onHingeChange(_callback: (hinge: HingeState | null) => void): () => void {
+  return () => {}
+}

package/src/platform/adaptive/index.linux.ts

@@ -0,0 +1 @@
+export * from './index.macos'

package/src/platform/adaptive/index.macos.ts

@@ -0,0 +1,11 @@
+import * as ReservedRegions from './ReservedRegions.native'
+
+export type * from './types'
+export { ReservedRegions }
+export {
+  useRegions as useReservedRegions,
+  useReady as useReservedRegionsReady,
+  useSegments as useWindowSegments,
+  useSpanning,
+} from './reservedRegionsContext'
+export * from './fixed'

package/src/platform/adaptive/index.ts

@@ -1,4 +1,3 @@
-import type { HingeState, SizeClass } from './types'
 import * as ReservedRegions from './ReservedRegions'
 
 export type * from './types'
@@ -9,28 +8,4 @@ export {
   useSegments as useWindowSegments,
   useSpanning,
 } from './reservedRegionsContext'
-
-const DEFAULT_SIZE_CLASS: SizeClass = {
-  horizontal: 'regular',
-  vertical: 'regular',
-}
-
-export function useSizeClass(): SizeClass {
-  return DEFAULT_SIZE_CLASS
-}
-
-export async function getSizeClass(): Promise<SizeClass> {
-  return DEFAULT_SIZE_CLASS
-}
-
-export function useHinge(): HingeState | null {
-  return null
-}
-
-export async function getHinge(): Promise<HingeState | null> {
-  return null
-}
-
-export function onHingeChange(_callback: (hinge: HingeState | null) => void): () => void {
-  return () => {}
-}
+export * from './fixed'

package/src/platform/controlTypes.ts

@@ -0,0 +1,12 @@
+import type { ViewProps } from 'react-native'
+import type { ControlledEvent } from './controlled'
+
+export type ControlViewProps = Omit<ViewProps, 'children'>
+export type ControlledControlProps = ControlViewProps & {
+  disabled?: boolean
+  revision?: number
+}
+export type ControlChange<T extends object> = T & { revision: number }
+export type NativeControlChange<T extends object> = T & ControlledEvent
+export type NumericControlChange = NativeControlChange<{ value: number }>
+export type TextControlChange = NativeControlChange<{ text: string }>

package/src/platform/desktop/appCommandTypes.ts

@@ -0,0 +1,33 @@
+import type { SFSymbolName } from '../generated/sfSymbolNames'
+
+export type AppCommandBinding = {
+  id: string
+  /** a gpui keystroke such as cmd-shift-[, ctrl-tab or up. */
+  key: string
+  /** a gpui key context; the mac host sets only Input, while a text input has focus. */
+  context?: string | null
+}
+
+export type AppCommandMenuItem =
+  | { kind: 'action'; id: string; label: string }
+  | { kind: 'separator' }
+  | { kind: 'submenu'; label: string; items: AppCommandMenuItem[] }
+
+export type AppCommandMenu = {
+  label: string
+  items: AppCommandMenuItem[]
+}
+
+export type AppCommandConfig = {
+  bindings: AppCommandBinding[]
+  /** the first menu joins the application menu; others join a menu with the same title. */
+  menus: AppCommandMenu[]
+  /** native window toolbar; omitting it leaves the shell's toolbar in place. */
+  toolbar?: AppCommandToolbarItem[]
+}
+
+export type AppCommandToolbarItem =
+  | { kind: 'flexibleSpace' }
+  | { kind: 'action'; id: string; label: string; systemImage: SFSymbolName; badge?: number }
+
+export type AppCommandListener = (id: string) => void

package/src/platform/desktop/createAppCommands.ts

@@ -0,0 +1,40 @@
+import { DeviceEventEmitter, TurboModuleRegistry, type EventSubscription, type TurboModule } from 'react-native'
+import type { AppCommandConfig, AppCommandListener } from './appCommandTypes'
+
+interface Spec extends TurboModule {
+  configure(config: Object): void
+  setListening(listening: boolean): void
+}
+
+export function createAppCommands<Config extends AppCommandConfig = AppCommandConfig>(moduleName: string, eventName: string) {
+  const listeners = new Set<{ listener: AppCommandListener }>()
+  let subscription: EventSubscription | null = null
+  const native = () => TurboModuleRegistry.getEnforcing<Spec>(moduleName)
+
+  return {
+    configure(config: Config): void {
+      native().configure(config)
+    },
+    addListener(listener: AppCommandListener): () => void {
+      if (typeof listener !== 'function') {
+        throw new TypeError('AppCommands.addListener expects a function')
+      }
+      const entry = { listener }
+      listeners.add(entry)
+      if (!subscription) {
+        subscription = DeviceEventEmitter.addListener(eventName, (id: string) => {
+          for (const current of [...listeners]) {
+            if (listeners.has(current)) current.listener(id)
+          }
+        })
+        native().setListening(true)
+      }
+      return () => {
+        if (!listeners.delete(entry) || listeners.size > 0) return
+        subscription?.remove()
+        subscription = null
+        native().setListening(false)
+      }
+    },
+  }
+}

package/src/platform/desktop/createControls.tsx

@@ -0,0 +1,64 @@
+import type { ComponentType, ReactElement } from 'react'
+import type { ControlledEvent } from '../controlled'
+import { useControlled } from '../controlled'
+import type { ControlledControlProps, ControlChange } from '../controlTypes'
+
+export type DesktopButtonProps = ControlledControlProps & {
+  title: string
+  systemImage?: string
+  bordered?: boolean
+  onPress?: () => void
+}
+
+export function createButton<Props, NativeProps extends object>(
+  NativeButton: ComponentType<NativeProps>,
+  useNativeProps: (props: Props) => NativeProps,
+) {
+  return function Button(props: Props) {
+    return <NativeButton {...useNativeProps(props)} />
+  }
+}
+
+type Binding<Event extends ControlledEvent> = ReturnType<typeof useControlled<Event>>
+export type DesktopToggleProps = ControlledControlProps & {
+  label: string
+  isOn: boolean
+  onIsOnChange?: (event: ControlChange<{ isOn: boolean }>) => void
+}
+
+export function createToggle<Event extends ControlledEvent>(
+  render: (props: Omit<DesktopToggleProps, 'onIsOnChange'>, binding: Binding<Event>) => ReactElement,
+  isOn: (event: Event) => boolean,
+) {
+  return function Toggle({ revision = 0, onIsOnChange, ...props }: DesktopToggleProps) {
+    const binding = useControlled((event: Event) => {
+      onIsOnChange?.({ isOn: isOn(event), revision: event.revision })
+    }, revision)
+    return render(props, binding)
+  }
+}
+
+export type DesktopSegmentedControlProps = ControlledControlProps & {
+  labels: readonly string[]
+  selectedIndex: number
+  controlRole?: 'automatic' | 'tabs' | 'valueSelection'
+  onChange?: (event: ControlChange<{ selectedIndex: number }>) => void
+}
+
+export function createSegmentedControl<Event extends ControlledEvent>(
+  render: (props: Omit<DesktopSegmentedControlProps, 'onChange'>, binding: Binding<Event>) => ReactElement,
+  selectedIndex: (event: Event) => number,
+) {
+  return function SegmentedControl({ revision = 0, controlRole = 'automatic', onChange, ...props }: DesktopSegmentedControlProps) {
+    if (!Number.isInteger(props.selectedIndex) || props.selectedIndex < -1 || props.selectedIndex >= props.labels.length) {
+      throw new Error('SegmentedControl selectedIndex must be -1 or an index in labels')
+    }
+    if (controlRole !== 'automatic' && controlRole !== 'tabs' && controlRole !== 'valueSelection') {
+      throw new TypeError('SegmentedControl controlRole must be automatic, tabs or valueSelection')
+    }
+    const binding = useControlled((event: Event) => {
+      onChange?.({ selectedIndex: selectedIndex(event), revision: event.revision })
+    }, revision)
+    return render({ ...props, controlRole }, binding)
+  }
+}

package/src/platform/linux/AppCommands.linux.ts

@@ -0,0 +1,6 @@
+import { createAppCommands } from '../desktop/createAppCommands'
+import type { AppCommandConfig } from '../desktop/appCommandTypes'
+
+export type LinuxAppCommandConfig = Omit<AppCommandConfig, 'toolbar'>
+export const AppCommands = createAppCommands<LinuxAppCommandConfig>('OneLinuxAppCommands', 'oneLinuxAppCommand')
+export type OneLinuxAppCommands = typeof AppCommands

package/src/platform/linux/Button.linux.tsx

@@ -0,0 +1,15 @@
+import { useControlled } from '../controlled'
+import { createButton, type DesktopButtonProps } from '../desktop/createControls'
+import NativeButton from './OneLinuxButtonNativeComponent'
+
+export type ButtonProps = Omit<DesktopButtonProps, 'systemImage' | 'bordered'>
+
+export const Button = createButton(NativeButton, function useNativeProps({ revision = 0, onPress, ...props }: ButtonProps) {
+  const binding = useControlled(() => onPress?.(), revision)
+  return {
+    ...props,
+    revision: binding.revision,
+    acknowledgedEvent: binding.acknowledgedEvent,
+    onControlChange: ({ nativeEvent }) => binding.onNativeChange(nativeEvent),
+  }
+})

package/src/platform/linux/DropDown.linux.tsx

@@ -0,0 +1,50 @@
+import type { ControlledControlProps, ControlChange, NumericControlChange } from '../controlTypes'
+import { useControlled } from '../controlled'
+import NativeDropDown, { type SelectionEvent } from './OneLinuxDropDownNativeComponent'
+
+export type DropDownItem = Readonly<{ label: string; value: string }>
+export type DropDownProps = ControlledControlProps & ({
+  labels: readonly string[]
+  selectedIndex: number
+  onChange?: (event: ControlChange<{ selectedIndex: number }>) => void
+  items?: never
+  selection?: never
+  onSelectionChange?: never
+} | {
+  items: readonly DropDownItem[]
+  selection: string | null
+  onSelectionChange?: (event: ControlChange<{ selection: string | null }>) => void
+  labels?: never
+  selectedIndex?: never
+  onChange?: never
+})
+
+export function DropDown({ labels, selectedIndex, onChange, items, selection, onSelectionChange,
+  revision = 0, style, ...props }: DropDownProps) {
+  const nativeLabels = items === undefined ? labels! : items.map((item) => item.label)
+  const index = items === undefined ? selectedIndex! : selection === null ? -1 : items.findIndex((item) => item.value === selection)
+  if (items !== undefined) {
+    if (new Set(items.map((item) => item.value)).size !== items.length) {
+      throw new Error('DropDown item values must be unique')
+    }
+    if (selection !== null && index < 0) {
+      throw new Error('DropDown selection must be null or an item value')
+    }
+  }
+  if (!Number.isInteger(index) || index < -1 || index >= nativeLabels.length) {
+    throw new Error('DropDown selectedIndex must be -1 or an index in labels')
+  }
+  const controlled = useControlled((event: NumericControlChange | SelectionEvent) => {
+    if ('hasSelection' in event) {
+      onSelectionChange?.({ selection: event.hasSelection ? event.selection : null, revision: event.revision })
+    } else {
+      onChange?.({ selectedIndex: event.value, revision: event.revision })
+    }
+  }, revision)
+  return <NativeDropDown {...props} labels={nativeLabels} value={index}
+    itemValues={items === undefined ? [] : items.map((item) => item.value)}
+    tagged={items !== undefined} selection={selection ?? ''} hasSelection={items !== undefined && selection !== null}
+    style={style} revision={controlled.revision} acknowledgedEvent={controlled.acknowledgedEvent}
+    onControlChange={({ nativeEvent }) => controlled.onNativeChange(nativeEvent)}
+    onSelectionChange={({ nativeEvent }) => controlled.onNativeChange(nativeEvent)} />
+}

package/src/platform/linux/NavigationView.linux.tsx

@@ -0,0 +1,80 @@
+import { CommonActions, StackActions } from '@react-navigation/native'
+import { useEffect, useRef } from 'react'
+import { View } from 'react-native'
+import { useControlled } from '../controlled'
+import NativeNavigation, { type SelectEvent } from './OneLinuxNavigationNativeComponent'
+
+export function LinuxNavigationView({ state, navigation, descriptors, tabs = false }: {
+  state: any
+  navigation: any
+  descriptors: any
+  tabs?: boolean
+}) {
+  const focused = state.routes[state.index]
+  const options = descriptors[focused.key].options
+  const mode = tabs ? (options.tabBarPosition === 'left' ? 'sidebar' : 'tabs') : 'stack'
+  // tabs render once focused unless they set lazy: false, then stay mounted
+  const rendered = useRef(new Set<string>())
+  rendered.current.add(focused.key)
+  const controlled = useControlled((event: SelectEvent) => {
+    const route = state.routes[event.index]
+    if (!route || !tabs) return
+    const routeOptions = descriptors[route.key].options
+    const repeated = route.key === focused.key && routeOptions.tabBarSelectionEnabled !== false
+    const press = navigation.emit({ type: 'tabPress', target: route.key, canPreventDefault: true,
+      data: { behavior: { popToTop: repeated && routeOptions.tabBarRepeatedPressBehavior?.popToTop !== false,
+        scrollToTop: repeated && routeOptions.tabBarRepeatedPressBehavior?.scrollToTop !== false } } })
+    if (!press.defaultPrevented && route.key !== focused.key && routeOptions.tabBarSelectionEnabled !== false) {
+      navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: state.key })
+    }
+  }, 0)
+
+  useEffect(() => {
+    if (tabs) return
+    let frame: ReturnType<typeof requestAnimationFrame> | undefined
+    const unsubscribe = navigation.addListener?.('tabPress', (event: any) => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const current = navigation.getState()
+        if (navigation.isFocused() && !event.defaultPrevented && event.data?.behavior?.popToTop !== false && current.index > 0) {
+          navigation.dispatch({ ...StackActions.popToTop(), target: current.key })
+        }
+      })
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+      unsubscribe?.()
+    }
+  }, [navigation, tabs])
+
+  return (
+    <NativeNavigation
+      style={{ flex: 1 }}
+      mode={mode}
+      pageKeys={state.routes.map((route: any) => route.key)}
+      pageTitles={state.routes.map((route: any) => {
+        const routeOptions = descriptors[route.key].options
+        return (tabs && typeof routeOptions.tabBarLabel === 'string' ? routeOptions.tabBarLabel : undefined) ?? routeOptions.title ?? route.name
+      })}
+      title={typeof options.headerTitle === 'string' ? options.headerTitle : options.title ?? focused.name}
+      selectedIndex={state.index}
+      headerShown={options.headerShown !== false}
+      canGoBack={!tabs && navigation.canGoBack() && options.headerBackVisible !== false}
+      revision={controlled.revision}
+      acknowledgedEvent={controlled.acknowledgedEvent}
+      onSelect={(event) => controlled.onNativeChange(event.nativeEvent)}
+      onBack={() => navigation.goBack()}
+    >
+      {state.routes.map((route: any) => (
+        // the native view reports its header and sidebar as border, so the pages fill what is left
+        <View key={route.key} collapsable={false} style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }}>
+          {!tabs || descriptors[route.key].options.lazy === false || rendered.current.has(route.key) ? (
+            <View style={[{ flex: 1 }, descriptors[route.key].options.contentStyle]}>
+              {descriptors[route.key].render()}
+            </View>
+          ) : null}
+        </View>
+      ))}
+    </NativeNavigation>
+  )
+}