@granite-js/react-native 0.1.29 → 0.1.31

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @granite-js/react-native
 
+## 0.1.31
+
+### Patch Changes
+
+- 0ff9b13: feat(router): screenOptions in Route
+- 37ae3f3: feat(router): supports standard schema
+- Updated dependencies [0ff9b13]
+- Updated dependencies [9bf8b50]
+- Updated dependencies [e957833]
+- Updated dependencies [37ae3f3]
+  - @granite-js/native@0.1.31
+  - @granite-js/plugin-core@0.1.31
+  - @granite-js/mpack@0.1.31
+  - @granite-js/image@0.1.31
+  - @granite-js/jest@0.1.31
+  - @granite-js/lottie@0.1.31
+  - @granite-js/style-utils@0.1.31
+  - @granite-js/cli@0.1.31
+
+## 0.1.30
+
+### Patch Changes
+
+- Updated dependencies [9e9ea71]
+  - @granite-js/mpack@0.1.30
+  - @granite-js/cli@0.1.30
+  - @granite-js/image@0.1.30
+  - @granite-js/jest@0.1.30
+  - @granite-js/lottie@0.1.30
+  - @granite-js/native@0.1.30
+  - @granite-js/plugin-core@0.1.30
+  - @granite-js/style-utils@0.1.30
+
 ## 0.1.29
 
 ### Patch Changes

package/dist/router/createRoute.d.ts

@@ -1,14 +1,21 @@
 import { type ParamListBase } from '@granite-js/native/@react-navigation/native';
-import { NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
+import { NativeStackNavigationOptions, NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 import { defaultParserParams } from './utils/defaultParserParams';
+import { type InferOutput, type InferInput } from './utils/standardSchema';
 export interface RouteOptions<T extends Readonly<object | undefined>> {
     parserParams?: (params: Record<string, unknown>) => Record<string, unknown>;
-    validateParams?: (params: Readonly<object | undefined>) => T;
+    validateParams?: ((params: Readonly<object | undefined>) => T) | StandardSchemaV1<any, T>;
     component: React.FC<any>;
+    screenOptions?: NativeStackNavigationOptions | ((context: {
+        params: T;
+    }) => NativeStackNavigationOptions);
+}
+export interface RegisterScreenInput {
 }
-export type NavigationProps = NativeStackNavigationProp<keyof RegisterScreen extends never ? ParamListBase : RegisterScreen>;
 export interface RegisterScreen {
 }
+export type NavigationProps = NativeStackNavigationProp<keyof RegisterScreenInput extends never ? ParamListBase : RegisterScreenInput>;
 export declare function useNavigation(): NavigationProps;
 export type RouteHooksOptions<TScreen extends keyof RegisterScreen> = {
     from: TScreen;
@@ -17,13 +24,16 @@ export type RouteHooksOptions<TScreen extends keyof RegisterScreen> = {
     strict: false;
     from?: never;
 };
-export declare const routeMap: Map<"/test", {
-    options: Omit<RouteOptions<any>, "component">;
+export declare const routeMap: Map<keyof RegisterScreenInput, {
+    options: Omit<RouteOptions<any>, "component" | "screenOptions">;
     component: React.FC<any>;
+    screenOptions?: NativeStackNavigationOptions | ((context: {
+        params: any;
+    }) => NativeStackNavigationOptions);
 }>;
 export declare function useMatchOptions<TScreen extends keyof RegisterScreen>(options: RouteHooksOptions<TScreen>): {
     parserParams: ((params: Record<string, unknown>) => Record<string, unknown>) | typeof defaultParserParams;
-    validateParams?: ((params: Readonly<object | undefined>) => any) | undefined;
+    validateParams?: StandardSchemaV1<any, any> | ((params: Readonly<object | undefined>) => any) | undefined;
 } | null;
 export declare function useParams<TScreen extends keyof RegisterScreen>(options: {
     from: TScreen;
@@ -32,8 +42,19 @@ export declare function useParams<TScreen extends keyof RegisterScreen>(options:
 export declare function useParams(options: {
     strict: false;
 }): Readonly<object | undefined>;
-export declare const createRoute: <T extends Readonly<object | undefined>>(path: keyof RegisterScreen, options: RouteOptions<T>) => {
-    _path: "/test";
+export declare function createRoute<TSchema extends StandardSchemaV1<any, any>>(path: keyof RegisterScreenInput, options: Omit<RouteOptions<any>, 'validateParams'> & {
+    validateParams: TSchema;
+}): {
+    _path: keyof RegisterScreenInput;
+    useNavigation: typeof useNavigation;
+    useParams: () => InferOutput<TSchema>;
+    _inputType?: InferInput<TSchema>;
+    _outputType?: InferOutput<TSchema>;
+};
+export declare function createRoute<T extends Readonly<object | undefined>>(path: keyof RegisterScreenInput, options: RouteOptions<T>): {
+    _path: keyof RegisterScreenInput;
     useNavigation: typeof useNavigation;
     useParams: () => T;
+    _inputType?: T;
+    _outputType?: T;
 };

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

@@ -1,9 +1,35 @@
 declare module './createRoute' {
+    interface RegisterScreenInput {
+        '/test': {
+            id: string;
+            name: string;
+        };
+        '/test-schema': {
+            id: string;
+            count: number;
+        };
+        '/test-transform': {
+            id: string;
+        };
+        '/test-with-defaults': {
+            animation?: boolean;
+        };
+    }
     interface RegisterScreen {
         '/test': {
             id: string;
             name: string;
         };
+        '/test-schema': {
+            id: string;
+            count: number;
+        };
+        '/test-transform': {
+            id: number;
+        };
+        '/test-with-defaults': {
+            animation: boolean;
+        };
     }
 }
 export {};

package/dist/router/types/RouteScreen.d.ts

@@ -1,3 +1,4 @@
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
 import { Screen } from './Screen';
 /**
  * @name RouteScreen
@@ -13,4 +14,9 @@ export interface RouteScreen {
      * @description Screen component
      */
     component: Screen;
+    /**
+     * @name screenOptions
+     * @description Screen options for React Navigation (can be static or a function that receives route params)
+     */
+    screenOptions?: NativeStackNavigationOptions;
 }

package/dist/router/utils/standardSchema.d.ts

@@ -0,0 +1,13 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+/**
+ * Type guard to check if a value is a StandardSchema v1 compliant schema
+ */
+export declare function isStandardSchema(value: unknown): value is StandardSchemaV1;
+/**
+ * Infer the output type from a StandardSchema
+ */
+export type InferOutput<TSchema> = TSchema extends StandardSchemaV1<any, infer Output> ? Output : never;
+/**
+ * Infer the input type from a StandardSchema
+ */
+export type InferInput<TSchema> = TSchema extends StandardSchemaV1<infer Input, any> ? Input : never;

package/dist/router/utils/validateRouteParams.d.ts

@@ -0,0 +1,10 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+/**
+ * Validates route parameters using either a StandardSchema or a validation function.
+ *
+ * @param validateParams - The validation schema or function to apply
+ * @param parsedParams - The parsed parameters to validate
+ * @returns The validated parameters
+ * @throws Error if validation fails or async validation is attempted
+ */
+export declare function validateRouteParams(validateParams: ((params: Readonly<object | undefined>) => any) | StandardSchemaV1<any, any>, parsedParams: Readonly<object | undefined>): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.29",
+    "@granite-js/native": "0.1.31",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -108,7 +108,8 @@
     "react-native": "0.72.6",
     "tsup": "^8.5.0",
     "typescript": "5.8.3",
-    "vitest": "^2.1.8"
+    "vitest": "^2.1.8",
+    "zod": "^4.1.12"
   },
   "peerDependencies": {
     "@granite-js/native": "*",
@@ -117,13 +118,14 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.29",
-    "@granite-js/image": "0.1.29",
-    "@granite-js/jest": "0.1.29",
-    "@granite-js/lottie": "0.1.29",
-    "@granite-js/mpack": "0.1.29",
-    "@granite-js/plugin-core": "0.1.29",
-    "@granite-js/style-utils": "0.1.29",
+    "@granite-js/cli": "0.1.31",
+    "@granite-js/image": "0.1.31",
+    "@granite-js/jest": "0.1.31",
+    "@granite-js/lottie": "0.1.31",
+    "@granite-js/mpack": "0.1.31",
+    "@granite-js/plugin-core": "0.1.31",
+    "@granite-js/style-utils": "0.1.31",
+    "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"
   },

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

@@ -1,12 +1,40 @@
 import { assertType, describe, it } from 'vitest';
-import { createRoute, useParams } from './createRoute';
+import { z } from 'zod';
+import { createRoute, useNavigation, useParams } from './createRoute';
 
 declare module './createRoute' {
+  interface RegisterScreenInput {
+    '/test': {
+      id: string;
+      name: string;
+    };
+    '/test-schema': {
+      id: string;
+      count: number;
+    };
+    '/test-transform': {
+      id: string;
+    };
+    '/test-with-defaults': {
+      animation?: boolean;
+    };
+  }
+
   interface RegisterScreen {
     '/test': {
       id: string;
       name: string;
     };
+    '/test-schema': {
+      id: string;
+      count: number;
+    };
+    '/test-transform': {
+      id: number;
+    };
+    '/test-with-defaults': {
+      animation: boolean;
+    };
   }
 }
 
@@ -50,3 +78,70 @@ describe('createRoute', () => {
     assertType(useParams({ from: '/test', strict: false }));
   });
 });
+
+describe('createRoute with StandardSchema', () => {
+  it('should infer correct type from StandardSchema', () => {
+    const RouteWithSchema = createRoute('/test-schema', {
+      component: () => null,
+      validateParams: z.object({
+        id: z.string(),
+        count: z.number(),
+      }),
+    });
+
+    assertType<{
+      id: string;
+      count: number;
+    }>(RouteWithSchema.useParams());
+  });
+
+  it('should infer output type from transformation', () => {
+    const RouteWithTransform = createRoute('/test-transform', {
+      component: () => null,
+      validateParams: z.object({
+        id: z.string().transform((v) => parseInt(v)),
+      }),
+    });
+
+    // Should be number (output), not string (input)
+    assertType<{
+      id: number;
+    }>(RouteWithTransform.useParams());
+  });
+
+  it('should work with useParams hook', () => {
+    createRoute('/test-schema', {
+      component: () => null,
+      validateParams: z.object({
+        id: z.string(),
+        count: z.number(),
+      }),
+    });
+
+    assertType<{
+      id: string;
+      count: number;
+    }>(useParams({ from: '/test-schema' }));
+  });
+
+  it('should separate input and output types with defaults', () => {
+    const RouteWithDefaults = createRoute('/test-with-defaults', {
+      component: () => null,
+      validateParams: z.object({
+        animation: z.boolean().default(true),
+      }),
+    });
+
+    // useParams returns output type (required)
+    assertType<{ animation: boolean }>(RouteWithDefaults.useParams());
+
+    // navigation.navigate should accept input type (optional)
+    const navigation = useNavigation();
+
+    // Should accept with animation parameter
+    navigation.navigate('/test-with-defaults', { animation: false });
+
+    // Should accept without animation parameter (default will be used)
+    navigation.navigate('/test-with-defaults', {});
+  });
+});

package/src/router/createRoute.ts

@@ -3,25 +3,35 @@ import {
   useNavigation as useNavigationNative,
   useRoute,
 } from '@granite-js/native/@react-navigation/native';
-import { NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
+import {
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+} from '@granite-js/native/@react-navigation/native-stack';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 import { useMemo } from 'react';
 import { RESERVED_PATHS } from './constants';
 import { defaultParserParams } from './utils/defaultParserParams';
+import { type InferOutput, type InferInput } from './utils/standardSchema';
+import { validateRouteParams } from './utils/validateRouteParams';
 
 export interface RouteOptions<T extends Readonly<object | undefined>> {
   parserParams?: (params: Record<string, unknown>) => Record<string, unknown>;
-  validateParams?: (params: Readonly<object | undefined>) => T;
+  validateParams?: ((params: Readonly<object | undefined>) => T) | StandardSchemaV1<any, T>;
   component: React.FC<any>;
+  screenOptions?: NativeStackNavigationOptions | ((context: { params: T }) => NativeStackNavigationOptions);
 }
 
-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 RegisterScreenInput {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface RegisterScreen {}
 
+export type NavigationProps = NativeStackNavigationProp<
+  // @ts-expect-error - override type
+  keyof RegisterScreenInput extends never ? ParamListBase : RegisterScreenInput
+>;
+
 export function useNavigation() {
   return useNavigationNative<NavigationProps>();
 }
@@ -37,8 +47,12 @@ export type RouteHooksOptions<TScreen extends keyof RegisterScreen> =
     };
 
 export const routeMap = new Map<
-  keyof RegisterScreen,
-  { options: Omit<RouteOptions<any>, 'component'>; component: React.FC<any> }
+  keyof RegisterScreenInput,
+  {
+    options: Omit<RouteOptions<any>, 'component' | 'screenOptions'>;
+    component: React.FC<any>;
+    screenOptions?: NativeStackNavigationOptions | ((context: { params: any }) => NativeStackNavigationOptions);
+  }
 >();
 
 export function useMatchOptions<TScreen extends keyof RegisterScreen>(options: RouteHooksOptions<TScreen>) {
@@ -140,23 +154,56 @@ export function useParams<TScreen extends keyof RegisterScreen>(
     }
 
     const parsedParams = routeOptions.parserParams(route.params as Record<string, string>);
-    return isStrict && routeOptions.validateParams ? routeOptions.validateParams(parsedParams) : parsedParams;
+
+    if (!isStrict || !routeOptions.validateParams) {
+      return parsedParams;
+    }
+
+    return validateRouteParams(routeOptions.validateParams, parsedParams);
   }, [routeOptions, route.params, isStrict]);
 
   return params;
 }
 
-export const createRoute = <T extends Readonly<object | undefined>>(
-  path: keyof RegisterScreen,
+// Overload 1: StandardSchema pattern
+export function createRoute<TSchema extends StandardSchemaV1<any, any>>(
+  path: keyof RegisterScreenInput,
+  options: Omit<RouteOptions<any>, 'validateParams'> & {
+    validateParams: TSchema;
+  }
+): {
+  _path: keyof RegisterScreenInput;
+  useNavigation: typeof useNavigation;
+  useParams: () => InferOutput<TSchema>;
+  _inputType?: InferInput<TSchema>;
+  _outputType?: InferOutput<TSchema>;
+};
+
+// Overload 2: Function pattern
+export function createRoute<T extends Readonly<object | undefined>>(
+  path: keyof RegisterScreenInput,
   options: RouteOptions<T>
-) => {
-  const { component, ...restOptions } = options;
-  routeMap.set(path, { options: restOptions, component });
+): {
+  _path: keyof RegisterScreenInput;
+  useNavigation: typeof useNavigation;
+  useParams: () => T;
+  _inputType?: T;
+  _outputType?: T;
+};
+
+// Implementation
+export function createRoute(path: keyof RegisterScreenInput, options: RouteOptions<any>) {
+  const { component, screenOptions, ...restOptions } = options;
+  routeMap.set(path, {
+    options: restOptions,
+    component,
+    screenOptions: screenOptions,
+  });
 
-  const _path = path as keyof RegisterScreen;
+  const _path = path as keyof RegisterScreenInput;
   return {
     _path,
     useNavigation,
-    useParams: () => useParams({ from: _path, strict: true }) as T,
+    useParams: () => useParams({ from: _path as keyof RegisterScreen, strict: true }),
   };
-};
+}

package/src/router/hooks/useRouterControls.tsx

@@ -50,9 +50,9 @@ export function useRouterControls({
       };
 
       const routePath = routeScreen.path;
-      const screenOptions = routeScreen.component?.screenOptions ?? {};
+      const options = routeScreen.screenOptions ?? {};
 
-      return <StackNavigator.Screen key={routePath} name={routePath} component={Component} options={screenOptions} />;
+      return <StackNavigator.Screen key={routePath} name={routePath} component={Component} options={options} />;
     });
   }, [registerScreens, layoutScreenMap, ScreenContainer]);
 

package/src/router/types/RouteScreen.ts

@@ -1,3 +1,4 @@
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
 import { Screen } from './Screen';
 
 /**
@@ -14,4 +15,9 @@ export interface RouteScreen {
    * @description Screen component
    */
   component: Screen;
+  /**
+   * @name screenOptions
+   * @description Screen options for React Navigation (can be static or a function that receives route params)
+   */
+  screenOptions?: NativeStackNavigationOptions;
 }

package/src/router/utils/screen.tsx

@@ -1,6 +1,7 @@
 import { getRoutePath } from './path';
 import { routeMap } from '../createRoute';
 import { RequireContext, RouteScreen } from '../types';
+import { validateRouteParams } from './validateRouteParams';
 
 /**
  * @kind function
@@ -33,9 +34,37 @@ export function getRouteScreens(context: RequireContext): RouteScreen[] {
       throw new Error(`Page component not found in ${key}.`);
     }
 
+    // Retrieve route configuration from routeMap
+    const routeMapEntry = routeMap.get(context(key)?.Route?._path);
+
+    // Get screenOptions from routeMap or component (routeMap takes priority)
+    const rawScreenOptions = routeMapEntry?.screenOptions ?? component.screenOptions;
+
+    // If screenOptions is a function, wrap it to apply parserParams and validateParams
+    const screenOptions =
+      typeof rawScreenOptions === 'function'
+        ? ({ route }: { route: { params?: Record<string, unknown> }; navigation: unknown }) => {
+            const rawParams = route.params ?? {};
+            const parserParams = routeMapEntry?.options?.parserParams;
+            const validateParams = routeMapEntry?.options?.validateParams;
+
+            // Apply parserParams if available
+            const parsedParams = parserParams ? parserParams(rawParams) : rawParams;
+
+            // Apply validateParams if available
+            try {
+              const validatedParams = validateParams ? validateRouteParams(validateParams, parsedParams) : parsedParams;
+              return rawScreenOptions({ params: validatedParams });
+            } catch {
+              return rawScreenOptions({ params: { _error: true } });
+            }
+          }
+        : rawScreenOptions;
+
     return {
       path,
       component,
+      screenOptions,
     };
   });
 

package/src/router/utils/standardSchema.ts

@@ -0,0 +1,18 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+
+/**
+ * Type guard to check if a value is a StandardSchema v1 compliant schema
+ */
+export function isStandardSchema(value: unknown): value is StandardSchemaV1 {
+  return typeof value === 'object' && value !== null && '~standard' in value;
+}
+
+/**
+ * Infer the output type from a StandardSchema
+ */
+export type InferOutput<TSchema> = TSchema extends StandardSchemaV1<any, infer Output> ? Output : never;
+
+/**
+ * Infer the input type from a StandardSchema
+ */
+export type InferInput<TSchema> = TSchema extends StandardSchemaV1<infer Input, any> ? Input : never;

package/src/router/utils/validateRouteParams.ts

@@ -0,0 +1,40 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import { isStandardSchema } from './standardSchema';
+
+/**
+ * Validates route parameters using either a StandardSchema or a validation function.
+ *
+ * @param validateParams - The validation schema or function to apply
+ * @param parsedParams - The parsed parameters to validate
+ * @returns The validated parameters
+ * @throws Error if validation fails or async validation is attempted
+ */
+export function validateRouteParams(
+  validateParams: ((params: Readonly<object | undefined>) => any) | StandardSchemaV1<any, any>,
+  parsedParams: Readonly<object | undefined>
+): any {
+  // Check if validateParams is a StandardSchema
+  if (isStandardSchema(validateParams)) {
+    const result = validateParams['~standard'].validate(parsedParams);
+
+    // Handle async results
+    if (result instanceof Promise) {
+      throw new Error('Async validation is not supported');
+    }
+
+    // Handle validation failures
+    if ('issues' in result && result.issues) {
+      const messages = result.issues.map((i) => i.message).join(', ');
+      throw new Error(`Parameter validation failed: ${messages}`);
+    }
+
+    return result.value;
+  }
+
+  // Function pattern
+  if (typeof validateParams === 'function') {
+    return validateParams(parsedParams);
+  }
+
+  return parsedParams;
+}

package/src/scroll-view-inertial-background/ScrollViewInertialBackground.tsx

@@ -96,4 +96,4 @@ function HiddenView({ style, pointerEvents = 'none', ...props }: ComponentProps<
  * Gradient value for BottomCTA. Set as a fixed value to avoid peerDeps.
  */
 const GRADIENT_HEIGHT = 37;
-const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+const DEFAULT_BACKGROUND_COLOR = 'transparent';