@granite-js/react-native 0.0.0-dev-20250725013859

package/src/router/Router.tsx

@@ -0,0 +1,164 @@
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+  NavigationContainerRefWithCurrent,
+  ParamListBase,
+  RouteProp,
+} from '@granite-js/native/@react-navigation/native';
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+import { ComponentProps, ComponentType, Fragment, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
+import { InitialProps } from '..';
+import { CanGoBackGuard } from './components/CanGoBackGuard';
+import { RouterBackButton, RouterBackButtonProps } from './components/RouterBackButton';
+import { StackNavigator } from './components/StackNavigator';
+import { useInitialRouteName } from './hooks/useInitialRouteName';
+import { useRouterControls } from './hooks/useRouterControls';
+import { RequireContext } from './types';
+import { BASE_STACK_NAVIGATOR_STYLE } from './types/screen-option';
+
+/**
+ * @internal
+ */
+export interface InternalRouterProps {
+  /**
+   * @name context
+   * @description
+   * Object containing screen information used for file-based routing.
+   */
+  context: RequireContext;
+  /**
+   * @name prefix
+   * @description
+   * Prefix to use when the scheme is executed. For example, to enter 'scheme://my-service/intro', you need to set 'scheme://my-service' as the prefix.
+   */
+  prefix: string;
+  /**
+   * @name canGoBack
+   * @description
+   * Whether navigation back is possible. Default is true, and when set to true, you can use the back gesture or back button from @react-navigation/native.
+   * @default true
+   */
+  canGoBack?: boolean;
+  /**
+   * @name onBack
+   * @description
+   * Callback function called when navigating back.
+   */
+  onBack?: () => void;
+  /**
+   * @name container
+   * @description
+   * Container component that wraps the Navigator from @react-navigation/native.
+   */
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export type RouterProps = StackNavigatorProps & NavigationContainerProps;
+
+interface StackNavigatorProps {
+  /**
+   * @name navigationContainerRef
+   * @description
+   * You can create and pass a NavigationContainerRef from @react-navigation/native externally. This allows external control of the router.
+   */
+  navigationContainerRef?: NavigationContainerRefWithCurrent<any>;
+  /**
+   * @name defaultScreenOption
+   * @description
+   * Default options for screens. You can set options to be applied commonly to screens, such as title or headerStyle.
+   */
+  defaultScreenOption?:
+    | NativeStackNavigationOptions
+    | ((props: { route: RouteProp<ParamListBase>; navigation: any }) => NativeStackNavigationOptions);
+  /**
+   * @name screenContainer
+   * @description
+   * Container component that wraps each Screen component.
+   */
+  screenContainer?: ComponentType<PropsWithChildren<any>>;
+}
+
+type NavigationContainerProps = Pick<
+  ComponentProps<typeof NavigationContainer>,
+  'ref' | 'documentTitle' | 'fallback' | 'onReady' | 'onUnhandledAction' | 'onStateChange'
+>;
+
+/**
+ * @category Components
+ * @kind function
+ * @name Router
+ * @description
+ * Router component for page navigation in React Native environment.
+ * Automatically assigns appropriate paths to screens based on file naming rules in pages/*.
+ * Using this component, you can manage screens in a way similar to Next.js's file-based routing.
+ *
+ * @param {string} prefix Prefix to use when the scheme is executed. For example, to enter 'scheme://my-service/intro', you need to set 'scheme://my-service' as the prefix.
+ * @param {RequireContext} context Object containing information about screens for file-based routing.
+ * @param {NavigationContainerRefWithCurrent<any>} [navigationContainerRef] You can create and pass a NavigationContainerRef from @react-navigation/native externally. This allows external control of the router.
+ * @param {NativeStackNavigationOptions | ((props: { route: RouteProp<ParamListBase>; navigation: any }) => NativeStackNavigationOptions)} [defaultScreenOption] Default options for screens. You can set options to be applied commonly to screens, such as title or headerStyle.
+ * @param {boolean} [canGoBack=true] Whether navigation back is possible. Default is true, and when set to true, you can use the back gesture or back button from @react-navigation/native.
+ * @param {() => void} [onBack] Callback function called when the user presses the back button or uses the back gesture. For example, you can set it to log when the user presses the back button.
+ * @param {ComponentType<{ children: ReactNode }>} [container=Fragment] Container component that wraps the Navigator from @react-navigation/native.
+ * @param {NavigationContainerProps} [navigationContainerProps] - You can set props to be passed to NavigationContainer from @react-navigation/native.
+ *
+ * @returns {ReactElement} - Returns the router component.
+ * @example
+ * ```tsx
+ * import { Router } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * function App() {
+ *  return <Router context={context} prefix={'scheme://testbench'} />;
+ * }
+ * ```
+ */
+export function Router({
+  // Internal props
+  prefix,
+  context,
+  canGoBack = true,
+  onBack,
+  container: Container = Fragment,
+  initialProps,
+  // Public props (NavigationContainer)
+  navigationContainerRef,
+  defaultScreenOption,
+  screenContainer,
+  // Public props (StackNavigator)
+  ...navigationContainerProps
+}: InternalRouterProps & RouterProps): ReactElement {
+  const initialRouteName = useInitialRouteName(prefix);
+  const { Screens, linkingOptions } = useRouterControls({ prefix, context, screenContainer });
+
+  const ref = useMemo(() => navigationContainerRef ?? createNavigationContainerRef<any>(), [navigationContainerRef]);
+
+  const headerLeft = useCallback(
+    (backButtonProps: Omit<RouterBackButtonProps, 'navigationContainerRef'>) => (
+      <RouterBackButton {...backButtonProps} onBack={onBack} canGoBack={canGoBack} navigationContainerRef={ref} />
+    ),
+    [onBack, canGoBack, ref]
+  );
+
+  const screenOptions = useCallback(
+    (screenProps: any) => ({
+      ...BASE_STACK_NAVIGATOR_STYLE,
+      gestureEnabled: canGoBack,
+      headerLeft,
+      ...(typeof defaultScreenOption === 'function' ? defaultScreenOption(screenProps) : defaultScreenOption),
+    }),
+    [canGoBack, defaultScreenOption, headerLeft]
+  );
+
+  return (
+    <NavigationContainer ref={ref} {...navigationContainerProps} linking={linkingOptions}>
+      <CanGoBackGuard canGoBack={canGoBack} onBack={onBack}>
+        <Container {...initialProps}>
+          <StackNavigator.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
+            {Screens}
+          </StackNavigator.Navigator>
+        </Container>
+      </CanGoBackGuard>
+    </NavigationContainer>
+  );
+}

package/src/router/components/BackButton.tsx

@@ -0,0 +1,58 @@
+import { SvgXml } from '@granite-js/native/react-native-svg';
+import { Platform, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+interface BackButtonProps extends TouchableOpacityProps {
+  tintColor?: string;
+  onPress?: () => void;
+}
+
+const DEFAULT_COLOR = '#191f28'; // grey900
+function BackButton({ tintColor, onPress }: BackButtonProps) {
+  return <NavbarBackButton onPress={onPress} color={tintColor ?? DEFAULT_COLOR} />;
+}
+
+function NavbarBackButton({ onPress, color }: { onPress?: () => void; color?: string }) {
+  return (
+    <TouchableOpacity
+      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+      style={{ width: 24, height: 24 }}
+      onPress={onPress}
+      accessible={true}
+      accessibilityLabel="Go back"
+      accessibilityRole="button"
+    >
+      <View style={{ width: 24, height: 24 }}>
+        <SvgXml
+          width={24}
+          height={24}
+          xml={BACK_BUTTON_XML.replace(/fill="#[0-9a-fA-F]{6}"/g, `fill="${color}"`)}
+          style={{
+            marginLeft: BACK_BUTTON_MARGIN,
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const ANDROID_BACK_BUTTON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="line-icon">
+<path fill="#B0B8C1" fill-rule="evenodd" d="M20.966 10.8H6.93l5.451-5.451a1.2 1.2 0 10-1.697-1.697l-7.5 7.5c-.003.002-.004.006-.007.009a1.2 1.2 0 00-.252 1.298c.06.143.145.27.252.38l.007.01 7.5 7.5c.235.234.542.35.848.35a1.2 1.2 0 00.849-2.048L6.931 13.2h14.036a1.2 1.2 0 100-2.4"/>
+</svg>`;
+
+const IOS_BACK_BUTTON = `<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="m20.8 20.7c-.3 0-.6-.1-.8-.4l-7.5-7.5c-.5-.5-.5-1.2 0-1.7l7.5-7.5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-6.8 6.7 6.7 6.7c.5.5.5 1.2 0 1.7-.2.2-.5.3-.8.3z" fill="#b0b8c1"/>
+</svg>`;
+
+const BACK_BUTTON_XML = Platform.select<string>({
+  android: ANDROID_BACK_BUTTON,
+  ios: IOS_BACK_BUTTON,
+  default: IOS_BACK_BUTTON,
+});
+
+const BACK_BUTTON_MARGIN = Platform.select<number>({
+  android: -4,
+  ios: -12,
+  default: -12,
+});
+
+export { BackButton };

package/src/router/components/CanGoBackGuard.tsx

@@ -0,0 +1,31 @@
+import { ReactNode, useEffect } from 'react';
+import { BackHandler } from 'react-native';
+
+export function CanGoBackGuard({
+  children,
+  canGoBack,
+  onBack,
+}: {
+  canGoBack: boolean;
+  children: ReactNode;
+  onBack?: () => void;
+}) {
+  const shouldBlockGoingBack = !canGoBack;
+
+  useEffect(() => {
+    if (shouldBlockGoingBack) {
+      const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+        onBack?.();
+        return true;
+      });
+
+      return () => {
+        subscription.remove();
+      };
+    }
+
+    return;
+  }, [shouldBlockGoingBack, onBack]);
+
+  return <>{children}</>;
+}

package/src/router/components/RouterBackButton.tsx

@@ -0,0 +1,32 @@
+import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
+import { BackButton } from './BackButton';
+import { closeView } from '../../native-modules';
+
+export type RouterBackButtonProps = {
+  onPress?: () => void;
+  tintColor?: string;
+  canGoBack?: boolean;
+  onBack?: () => void;
+  navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+};
+
+export function RouterBackButton({ tintColor, canGoBack, onBack, navigationContainerRef }: RouterBackButtonProps) {
+  return (
+    <BackButton
+      tintColor={tintColor}
+      onPress={() => {
+        onBack?.();
+
+        if (!canGoBack) {
+          return;
+        }
+
+        if (navigationContainerRef.canGoBack()) {
+          navigationContainerRef.goBack();
+        } else {
+          closeView();
+        }
+      }}
+    />
+  );
+}

package/src/router/components/StackNavigator.tsx

@@ -0,0 +1,12 @@
+import { createNativeStackNavigator } from '@granite-js/native/@react-navigation/native-stack';
+
+function createStackNavigator() {
+  const Stack = createNativeStackNavigator();
+
+  return {
+    Navigator: Stack.Navigator,
+    Screen: Stack.Screen,
+  };
+}
+
+export const StackNavigator = createStackNavigator();

package/src/router/constants.ts

@@ -0,0 +1,3 @@
+export const RESERVED_KEYWORDS = ['_layout'];
+
+export const RESERVED_PATHS = ['/_404'];

package/src/router/createRoute.test-d.ts

@@ -0,0 +1,52 @@
+import { assertType, describe, it } from 'vitest';
+import { createRoute, useParams } from './createRoute';
+
+declare module './createRoute' {
+  interface RegisterScreen {
+    '/test': {
+      id: string;
+      name: string;
+    };
+  }
+}
+
+describe('createRoute', () => {
+  const Route = createRoute('/test', {
+    component: () => null,
+    validateParams: (params) => params as { id: string; name: string },
+  });
+
+  it('useParams', () => {
+    assertType<{
+      id: string;
+      name: string;
+    }>(Route.useParams());
+
+    assertType<Readonly<object | undefined>>(useParams({ strict: false }));
+
+    // @ts-expect-error - Type error should occur when strict is false
+    assertType<{ id: string; name: string }>(useParams({ strict: false }));
+
+    assertType<{
+      id: string;
+      name: string;
+    }>(useParams({ from: '/test', strict: true }));
+
+    assertType<{
+      id: string;
+      name: string;
+    }>(useParams({ from: '/test' }));
+
+    // @ts-expect-error Type error should occur when no options
+    assertType(useParams());
+
+    // @ts-expect-error Type error should occur when empty object
+    assertType(useParams({}));
+
+    // @ts-expect-error Type error should occur when path is not registered
+    assertType(useParams({ from: '/abcdefg' }));
+
+    // @ts-expect-error Type error should occur since 'from' and 'strict: false' are conflicting options
+    assertType(useParams({ from: '/test', strict: false }));
+  });
+});

package/src/router/createRoute.ts

@@ -0,0 +1,161 @@
+import {
+  type ParamListBase,
+  useNavigation as useNavigationNative,
+  useRoute,
+} from '@granite-js/native/@react-navigation/native';
+import { NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
+import { useMemo } from 'react';
+import { RESERVED_PATHS } from './constants';
+import { defaultParserParams } from './utils/defaultParserParams';
+
+export interface RouteOptions<T extends Readonly<object | undefined>> {
+  parserParams?: (params: Record<string, unknown>) => Record<string, unknown>;
+  validateParams?: (params: Readonly<object | undefined>) => T;
+  component: React.FC<any>;
+}
+
+export type NavigationProps = NativeStackNavigationProp<
+  // @ts-expect-error - override type
+  keyof RegisterScreen extends never ? ParamListBase : RegisterScreen
+>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface RegisterScreen {}
+
+export function useNavigation() {
+  return useNavigationNative<NavigationProps>();
+}
+
+export type RouteHooksOptions<TScreen extends keyof RegisterScreen> =
+  | {
+      from: TScreen;
+      strict?: true;
+    }
+  | {
+      strict: false;
+      from?: never;
+    };
+
+export const routeMap = new Map<
+  keyof RegisterScreen,
+  { options: Omit<RouteOptions<any>, 'component'>; component: React.FC<any> }
+>();
+
+export function useMatchOptions<TScreen extends keyof RegisterScreen>(options: RouteHooksOptions<TScreen>) {
+  const route = useRoute();
+  const from = 'from' in options ? options.from : (route.name as TScreen);
+  const strict = 'from' in options ? true : options.strict;
+
+  if (strict && from !== route.name) {
+    throw new Error(`Cannot access parameters from route '${from}' in current route '${route.name}'`);
+  }
+
+  return useMemo(() => {
+    if (!from) {
+      return null;
+    }
+
+    if (!(routeMap.has(from) || RESERVED_PATHS.includes(from))) {
+      throw new Error(`Route '${from}' is not registered`);
+    }
+
+    const routeOptions = routeMap.get(from);
+    return {
+      ...routeOptions?.options,
+      parserParams: routeOptions?.options.parserParams ?? defaultParserParams,
+    };
+  }, [from]);
+}
+
+export function useParams<TScreen extends keyof RegisterScreen>(options: {
+  from: TScreen;
+  strict?: true;
+}): RegisterScreen[TScreen];
+export function useParams(options: { strict: false }): Readonly<object | undefined>;
+
+/**
+ * @public
+ * @category Screen Control
+ * @name useParams
+ * @description
+ *
+ * `useParams` is a hook that retrieves parameters from a specified route.
+ * Using this hook, you can easily access parameters of the current route.
+ * With the `validateParams` option, you can validate parameter structure and transform types,
+ * reducing runtime errors and writing safer code.
+ *
+ * @param {RouteHooksOptions<TScreen>} options Object containing information about the route to retrieve.
+ * @param {string} [options.from] Route path to retrieve parameters from. If not specified, retrieves parameters from the current route. Must be specified when strict mode is true.
+ * @param {boolean} [options.strict] Strict mode setting. When set to true, throws an error if the specified route doesn't match the current route. When set to false, skips validateParams validation and returns parameters of the current screen as is.
+ *
+ * @example
+ * ### Retrieving Route Parameters
+ *
+ *
+ * ::: code-group
+ *
+ * ```tsx [pages/examples/use-params.tsx]
+ * import React from 'react';
+ * import { Text } from 'react-native';
+ * import { createRoute, useParams } from '@granite-js/react-native';
+ *
+ * export const Route = createRoute('/examples/use-params', {
+ *   validateParams: (params) => params as { id: string },
+ *   component: UseParamsExample,
+ * });
+ *
+ * function UseParamsExample() {
+ *   // First method: Using the useParams method of the route object
+ *   const params = Route.useParams();
+ *
+ *   // Second method: Using the useParams hook directly
+ *   const params2 = useParams({ from: '/examples/use-params' });
+ *
+ *   // Third method: Using with strict mode set to false
+ *   // When strict is false, retrieves parameters from the current route
+ *   // and skips validation even if validateParams is defined
+ *   const params3 = useParams({ strict: false }) as { id: string };
+ *
+ *   return (
+ *     <>
+ *       <Text>{params.id}</Text>
+ *       <Text>{params2.id}</Text>
+ *       <Text>{params3.id}</Text>
+ *     </>
+ *   );
+ * }
+ * ```
+ * :::
+ */
+export function useParams<TScreen extends keyof RegisterScreen>(
+  options: RouteHooksOptions<TScreen>
+): TScreen extends keyof RegisterScreen ? RegisterScreen[TScreen] : Readonly<object | undefined> {
+  const routeOptions = useMatchOptions(options);
+  const route = useRoute();
+
+  const params = useMemo(() => {
+    if (!routeOptions) {
+      return (route.params ?? {}) as Readonly<object | undefined>;
+    }
+
+    const parsedParams = routeOptions.parserParams(route.params as Record<string, string>);
+    return options.strict && routeOptions.validateParams ? routeOptions.validateParams(parsedParams) : parsedParams;
+  }, [routeOptions, route.params, options.strict]);
+
+  return params;
+}
+
+export const createRoute = <T extends Readonly<object | undefined>>(
+  path: keyof RegisterScreen,
+  options: RouteOptions<T>
+) => {
+  const { component, ...restOptions } = options;
+  routeMap.set(path, { options: restOptions, component });
+
+  const _path = path as keyof RegisterScreen;
+  return {
+    _path,
+    useNavigation,
+    useParams: () => useParams({ from: _path, strict: true }) as T,
+  };
+};

package/src/router/hooks/useInitialRouteName.tsx

@@ -0,0 +1,22 @@
+import { Platform } from 'react-native';
+import { getSchemeUri } from '../../native-modules';
+
+export function useInitialRouteName(prefix: string) {
+  const initialScheme = getInitialScheme();
+  const pathname = initialScheme?.slice(prefix.length).split('?')[0];
+  const shouldUseIndex = initialScheme == null || pathname?.length === 0;
+
+  return shouldUseIndex ? '/' : pathname;
+}
+function getInitialScheme() {
+  const scheme = getSchemeUri();
+
+  /**
+   * Removes trailing '/' on Android.
+   */
+  if (Platform.OS === 'android') {
+    return scheme?.replaceAll(/\/+$/g, '');
+  }
+
+  return scheme;
+}

package/src/router/hooks/useIsInitialScreen.ts

@@ -0,0 +1,7 @@
+import { useNavigationState } from '@granite-js/native/@react-navigation/native';
+
+export function useIsInitialScreen() {
+  const index = useNavigationState((state) => state?.index ?? 0);
+
+  return index === 0;
+}

package/src/router/hooks/useRouterControls.tsx

@@ -0,0 +1,72 @@
+import { NavigationContainer } from '@granite-js/native/@react-navigation/native';
+import { useMemo, type ComponentProps, type ComponentType, type PropsWithChildren } from 'react';
+import { getSchemeUri } from '../../native-modules';
+import { StackNavigator } from '../components/StackNavigator';
+import { RESERVED_KEYWORDS } from '../constants';
+import { RequireContext } from '../types/RequireContext';
+import { getRouteScreens, getScreenPathMapConfig } from '../utils';
+import { createParentRouteScreenMap } from '../utils/createParentRouteScreenMap';
+import { mergeParentLayoutScreen } from '../utils/mergeParentLayoutScreen';
+import { getFileNameFromPath } from '../utils/path';
+
+type NavigationContainerProps = ComponentProps<typeof NavigationContainer>;
+
+export interface RouterControlsConfig {
+  prefix: string;
+  context: RequireContext;
+  screenContainer?: ComponentType<PropsWithChildren<any>>;
+}
+
+export function useRouterControls({ prefix, context, screenContainer: ScreenContainer }: RouterControlsConfig) {
+  const routeScreens = useMemo(() => getRouteScreens(context), [context]);
+
+  const registerScreens = useMemo(() => {
+    return routeScreens.filter(
+      (screen) => !RESERVED_KEYWORDS.includes(getFileNameFromPath(screen.path, { withExtension: false }))
+    );
+  }, [routeScreens]);
+
+  const layoutScreenMap = useMemo(() => createParentRouteScreenMap(routeScreens, '_layout'), [routeScreens]);
+
+  const Screens = useMemo(() => {
+    return registerScreens.map((routeScreen) => {
+      const Layout = mergeParentLayoutScreen(layoutScreenMap, routeScreen.path);
+
+      const Component = function Component() {
+        const element = (
+          <Layout>
+            <routeScreen.component />
+          </Layout>
+        );
+
+        return ScreenContainer == null ? element : <ScreenContainer>{element}</ScreenContainer>;
+      };
+
+      const routePath = routeScreen.path;
+      const screenOptions = routeScreen.component?.screenOptions ?? {};
+
+      return <StackNavigator.Screen key={routePath} name={routePath} component={Component} options={screenOptions} />;
+    });
+  }, [registerScreens, layoutScreenMap, ScreenContainer]);
+
+  const linkingOptions: NavigationContainerProps['linking'] = useMemo(() => {
+    return {
+      prefixes: [prefix],
+      config: {
+        screens: getScreenPathMapConfig(registerScreens),
+      },
+      async getInitialURL() {
+        const initialURL = getSchemeUri();
+
+        if (initialURL == null) {
+          return;
+        }
+
+        /** @NOTE Korean paths need to be decoded. */
+        return decodeURI(initialURL);
+      },
+    };
+  }, [prefix, registerScreens]);
+
+  return { Screens, linkingOptions };
+}

package/src/router/index.ts

@@ -0,0 +1,3 @@
+export * from './Router';
+export { getRouteScreens, getScreenPathMapConfig, defaultParserParams } from './utils';
+export * from './types';

package/src/router/types/RequireContext.ts

@@ -0,0 +1,7 @@
+export interface RequireContext {
+  keys(): string[];
+  (id: string): any;
+  <T>(id: string): T;
+  resolve(id: string): string;
+  id: string;
+}

package/src/router/types/RouteScreen.ts

@@ -0,0 +1,17 @@
+import { Screen } from './Screen';
+
+/**
+ * @name RouteScreen
+ */
+export interface RouteScreen {
+  /**
+   * @name path
+   * @description Path information (e.g. "/", "/list", "/list/:id", etc.)
+   */
+  path: string;
+  /**
+   * @name component
+   * @description Screen component
+   */
+  component: Screen;
+}

package/src/router/types/Screen.tsx

@@ -0,0 +1,24 @@
+import type { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+import type { ComponentType } from 'react';
+
+/**
+ * @name Screen
+ * @description A Screen that serves as a unit of navigation
+ * @example
+ *
+ * ```ts
+ * function Page() {
+ *  // ...
+ * }
+ *
+ * Page.screenOptions = {
+ *   // ...
+ * }
+ * ```
+ */
+export type Screen = ComponentType & GraniteScreenOptions;
+
+interface GraniteScreenOptions {
+  /** @description Add this when customization is needed for NativeStack Screen's screenOptions */
+  screenOptions?: NativeStackNavigationOptions;
+}

package/src/router/types/index.ts

@@ -0,0 +1,3 @@
+export * from './RequireContext';
+export * from './RouteScreen';
+export * from './Screen';