react-nitro-navigation 0.0.0-stage → 0.0.1-alpha.7

package/src/NativeStackHost.ts

@@ -0,0 +1,14 @@
+import { registerView, viewPropsSetters, type ViewProps } from 'react-nitro-renderer'
+import type { NavigationStack } from './specs/NavigationStack.nitro'
+
+interface NativeStackHostProps extends ViewProps {
+  stack: NavigationStack
+}
+
+declare module 'react-nitro-renderer' {
+  interface ViewDefinitionMap {
+    NavigationStack: { view: NavigationStack; props: NativeStackHostProps }
+  }
+}
+
+export const NativeStackHost = registerView('NavigationStack', (props) => props.stack, viewPropsSetters)

package/src/StackNavigationOptions.ts

@@ -0,0 +1,7 @@
+import type { createStackNavigator } from './createStackNavigator'
+
+/** Screen options accepted by {@link createStackNavigator}. */
+export interface StackNavigationOptions {
+  /** The native navigation bar title. Defaults to the route name. */
+  title?: string
+}

package/src/StackNavigationProp.ts

@@ -0,0 +1,8 @@
+import type { NavigationProp, ParamListBase } from '@react-navigation/core'
+import type { StackActionHelpers, StackNavigationState } from '@react-navigation/routers'
+import type { StackNavigationOptions } from './StackNavigationOptions'
+
+/** Navigation commands exposed to screens in a Nitro stack. */
+export type StackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = NavigationProp<
+  ParamList, RouteName, undefined, StackNavigationState<ParamList>, StackNavigationOptions, {}
+> & StackActionHelpers<ParamList>

package/src/StackScreen.tsx

@@ -0,0 +1,19 @@
+import { useState, type ReactNode } from 'react'
+import { ViewControllerContext } from 'react-nitro-renderer'
+import { NativeScreenHost } from './NativeScreenHost'
+import { NavigationScreen } from './specs/NavigationScreen.nitro'
+
+export function StackScreen({ children, title }: { children: ReactNode; title: string }) {
+  const [screen] = useState(() => new NavigationScreen())
+  return (
+    <ViewControllerContext.Provider value={screen.viewController}>
+      <NativeScreenHost
+        screen={screen}
+        title={title}
+        layout={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
+      >
+        {children}
+      </NativeScreenHost>
+    </ViewControllerContext.Provider>
+  )
+}

package/src/createStackNavigator.tsx

@@ -0,0 +1,67 @@
+import {
+  createNavigatorFactory,
+  useNavigationBuilder,
+  type DefaultNavigatorOptions,
+  type ParamListBase,
+  type TypedNavigator,
+} from '@react-navigation/core'
+import { StackActions, StackRouter, type StackActionHelpers, type StackNavigationState, type StackRouterOptions } from '@react-navigation/routers'
+import { useLayoutEffect, useState } from 'react'
+import { useRootContext } from 'react-nitro-renderer'
+import { NativeStackHost } from './NativeStackHost'
+import { StackScreen } from './StackScreen'
+import { NavigationStack } from './specs/NavigationStack.nitro'
+import type { StackNavigationOptions } from './StackNavigationOptions'
+import type { StackNavigationProp } from './StackNavigationProp'
+
+type NavigatorProps = DefaultNavigatorOptions<
+  ParamListBase, undefined, StackNavigationState<ParamListBase>,
+  StackNavigationOptions, {}, StackNavigationProp<ParamListBase>
+> & StackRouterOptions
+
+function StackNavigator(props: NavigatorProps) {
+  const { state, navigation, descriptors, render } = useNavigationBuilder<
+    StackNavigationState<ParamListBase>, StackRouterOptions,
+    StackActionHelpers<ParamListBase>, StackNavigationOptions, {}
+  >(StackRouter, props)
+  const parent = useRootContext()
+  const [stack] = useState(() => new NavigationStack())
+
+  useLayoutEffect(() => {
+    stack.attachTo(parent)
+    const subscription = stack.addOnPopListener((count) => {
+      const action = StackActions.pop(count)
+      navigation.dispatch({ ...action, target: state.key })
+    })
+    return () => {
+      subscription.remove()
+      stack.removeFromParent()
+    }
+  }, [stack, parent, navigation, state.key])
+
+  const screens = state.routes.map((route) => {
+    const descriptor = descriptors[route.key]
+    if (descriptor === undefined) {
+      throw new Error(`Missing descriptor for ${route.name}`)
+    }
+    const title = descriptor.options.title ?? route.name
+    const element = descriptor.render()
+    return <StackScreen key={route.key} title={title}>{element}</StackScreen>
+  })
+  const content = <NativeStackHost stack={stack} layout={{ flex: 1 }}>{screens}</NativeStackHost>
+  return render(content)
+}
+
+type StackTypeBag<ParamList extends ParamListBase> = {
+  ParamList: ParamList
+  NavigatorID: undefined
+  State: StackNavigationState<ParamList>
+  ScreenOptions: StackNavigationOptions
+  EventMap: {}
+  NavigationList: { [RouteName in keyof ParamList]: StackNavigationProp<ParamList, RouteName> }
+  Navigator: typeof StackNavigator
+}
+
+/** Creates a minimal UIKit stack navigator backed by React Navigation's router. */
+export const createStackNavigator: <ParamList extends ParamListBase>() => TypedNavigator<StackTypeBag<ParamList>> =
+  createNavigatorFactory(StackNavigator)

package/src/index.ts

@@ -0,0 +1,4 @@
+export { BaseNavigationContainer as NavigationContainer, useNavigation, useRoute } from '@react-navigation/core'
+export { createStackNavigator } from './createStackNavigator'
+export type { StackNavigationOptions } from './StackNavigationOptions'
+export type { StackNavigationProp } from './StackNavigationProp'

package/src/specs/NavigationScreen.nitro.ts

@@ -0,0 +1,17 @@
+import { iOS } from 'nitro-core'
+import type { View, ViewController } from 'react-nitro-renderer/hybrids'
+
+export * from '#nitro/NavigationScreen'
+
+/** A React host view whose native placement is managed by the stack controller. */
+@iOS({
+  language: 'swift',
+  implementation: { className: 'HybridNavigationScreen' },
+})
+export declare class NavigationScreen extends View {
+  public constructor()
+  /** The controller hosting this screen's children. */
+  readonly viewController: ViewController
+  /** The native navigation bar title. */
+  title: string | undefined
+}

package/src/specs/NavigationStack.nitro.ts

@@ -0,0 +1,20 @@
+import { iOS } from 'nitro-core'
+import type { View, ViewController } from 'react-nitro-renderer/hybrids'
+import type { ListenerSubscription } from 'react-nitro-renderer'
+
+export * from '#nitro/NavigationStack'
+
+/** Native host for the screens rendered by the stack navigator. */
+@iOS({
+  language: 'swift',
+  implementation: { className: 'HybridNavigationStack' },
+})
+export declare class NavigationStack extends View {
+  public constructor()
+  /** Embeds the stack controller in its enclosing screen controller. */
+  attachTo(parent: ViewController): void
+  /** Removes the stack controller from its parent. */
+  removeFromParent(): void
+  /** Observes the number of screens removed by a completed native back action. */
+  addOnPopListener(listener: (count: number) => void): ListenerSubscription
+}