@granite-js/react-native 0.1.33 → 1.0.0

package/dist/image/Image.d.ts

@@ -0,0 +1,77 @@
+import { GraniteImageProps, OnErrorEvent, OnLoadEndEvent, OnLoadStartEvent } from '@granite-js/native/react-native-fast-image';
+import { NativeSyntheticEvent } from 'react-native';
+type Source = {
+    uri?: string;
+    headers?: Record<string, string>;
+    priority?: 'low' | 'normal' | 'high';
+    cache?: 'immutable' | 'web' | 'cacheOnly';
+};
+export interface ImageProps extends Omit<GraniteImageProps, 'source' | 'onError'> {
+    source?: Source;
+    onLoadStart?: (event: NativeSyntheticEvent<OnLoadStartEvent> | Readonly<{
+        type: 'svg';
+    }>) => void;
+    onLoadEnd?: (event: NativeSyntheticEvent<OnLoadEndEvent> | Readonly<{
+        type: 'svg';
+    }>) => void;
+    onError?: (event: NativeSyntheticEvent<OnErrorEvent> | Readonly<{
+        type: 'svg';
+    }>) => void;
+}
+/**
+ * @public
+ * @category UI
+ * @name Image
+ * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+ * @param {object} [props.source] - An object containing information about the image resource to load.
+ * @param {string} [props.source.uri] - The URI address representing the image resource to load.
+ * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+ * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+ * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+ * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+ *
+ * @example
+ * ### Example: Loading and rendering an image
+ *
+ * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+ *
+ * ```tsx
+ * import { Image } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * export function ImageExample() {
+ *   return (
+ *     <View>
+ *       <Image
+ *         source={{ uri: 'my-image-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *
+ *       <Image
+ *         source={{ uri: 'my-svg-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element | null;
+export { Image };

package/dist/image/SvgImage.d.ts

@@ -0,0 +1,47 @@
+import { type StyleProp } from 'react-native';
+import type { DimensionValue } from './types';
+export interface SvgImageProps {
+    url: string;
+    width?: DimensionValue;
+    height?: DimensionValue;
+    style?: StyleProp<any>;
+    testID?: string;
+    onLoadStart?: (event: object) => void;
+    onLoadEnd?: (event: object) => void;
+    onError?: () => void;
+}
+/**
+ * @name SvgImage
+ * @category Components
+ * @description The `SvgImage` component loads and renders SVG images from a given external URL.
+ * @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
+ *
+ * @param {object} props - The `props` object passed to the component.
+ * @param {string} props.url - The URI address of the SVG image to load.
+ * @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
+ * @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
+ * @param {object} props.style - Sets the style of the image component.
+ * @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
+ * @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
+ * @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
+ *
+ * @example
+ * ```tsx
+ * import { SvgImage } from './SvgImage';
+ * import { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <View>
+ *       <SvgImage
+ *         url="https://example.com/icon.svg"
+ *         width={100}
+ *         height={100}
+ *         onError={() => console.log('An error occurred while loading the SVG')}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function SvgImage({ url, width, height, style, testID, onLoadStart: _onLoadStart, onLoadEnd: _onLoadEnd, onError: _onError, }: SvgImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/image/index.d.ts

@@ -0,0 +1 @@
+export { Image, type ImageProps } from './Image';

package/dist/image/types.d.ts

@@ -0,0 +1,3 @@
+import type { Animated } from 'react-native';
+export type DimensionValue = string | number | 'auto' | `${number}%` | Animated.AnimatedNode | null;
+export type NumberValue = number | string;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import './types/global';
 export { Granite, useInitialSearchParams, useInitialProps } from './app';
 export * from '@granite-js/style-utils';
-export * from '@granite-js/image';
-export * from '@granite-js/lottie';
+export { type GraniteImageSource, type GraniteImageStatic, type ResizeMode, type CachePolicy, type Priority, type OnLoadEvent, type OnProgressEvent, } from '@granite-js/native/react-native-fast-image';
+export * from './image';
+export * from './lottie';
 export * from './dev-entrypoint';
 export * from './native-modules/natives';
 export * from './visibility';
@@ -16,7 +17,7 @@ export * from './router/hooks/useIsInitialScreen';
 export * from './event';
 export * from './video';
 export * from './status-bar';
-export * from './blur';
+export * from '@granite-js/blur-view';
 export { BackButton, useRouterBackHandler } from './router';
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/dist/intersection-observer/IOFlatList.d.ts

@@ -1,4 +1,4 @@
-import { RefAttributes } from 'react';
+import React, { RefAttributes } from 'react';
 import { FlatList, FlatListProps } from 'react-native';
 import { IOComponentProps } from './withIO';
 export type IOFlatListController = FlatList;
@@ -51,5 +51,5 @@ export type IOFlatListProps<ItemT = any> = IOComponentProps & FlatListProps<Item
  * ```
  */
 declare const IOFlatList: typeof IOFlatListFunction;
-declare function IOFlatListFunction<ItemT = any>(props: IOFlatListProps<ItemT> & RefAttributes<IOFlatListController>): JSX.Element;
+declare function IOFlatListFunction<ItemT = any>(props: IOFlatListProps<ItemT> & RefAttributes<IOFlatListController>): React.JSX.Element;
 export default IOFlatList;

package/dist/lottie/Lottie.d.ts

@@ -0,0 +1,22 @@
+import LottieView, { type AnimationObject } from '@granite-js/native/lottie-react-native';
+import type { ComponentProps } from 'react';
+type LottieViewProps = ComponentProps<typeof LottieView>;
+type BaseProps = Omit<LottieViewProps, 'source'> & {
+    /**
+     * Height is required to prevent layout shifting.
+     */
+    height: number | '100%';
+    width?: number | '100%';
+    maxWidth?: number;
+};
+export type RemoteLottieProps = BaseProps & {
+    src: string;
+};
+export type AnimationObjectLottieProps = BaseProps & {
+    animationObject: AnimationObject;
+};
+export declare function Lottie({ width, maxWidth, height, src, autoPlay, speed, style, onAnimationFailure, ...props }: RemoteLottieProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Lottie {
+    var AnimationObject: ({ width, maxWidth, height, animationObject, autoPlay, speed, style, onAnimationFailure, ...props }: AnimationObjectLottieProps) => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/lottie/ensureSafeLottie.d.ts

@@ -0,0 +1,3 @@
+import type { AnimationObject } from '@granite-js/native/lottie-react-native';
+export declare function hasFonts(animationData: AnimationObject): boolean;
+export declare function ensureSafeLottie(animationData: AnimationObject): AnimationObject;

package/dist/lottie/index.d.ts

@@ -0,0 +1 @@
+export { Lottie, type RemoteLottieProps, type AnimationObjectLottieProps } from './Lottie';

package/dist/lottie/useFetchResource.d.ts

@@ -0,0 +1,2 @@
+import type { AnimationObject } from '@granite-js/native/lottie-react-native';
+export declare function useFetchResource(src: string, onAnimationFailure?: (error: string) => void): AnimationObject | null;

package/dist/native-modules/index.d.ts

@@ -1,3 +1,2 @@
 /** Bridges API */
 export * from './natives';
-export { GraniteCoreModule } from './core/GraniteCoreModule';

package/dist/native-modules/natives/GraniteBrownfieldModule.brick.d.ts

@@ -0,0 +1,14 @@
+import { BrickModuleSpec } from 'brick-module';
+import { CodegenTypes } from 'react-native';
+interface GraniteBrownfieldModuleSpec extends BrickModuleSpec {
+    readonly moduleName: 'GraniteBrownfieldModule';
+    readonly onVisibilityChanged: CodegenTypes.EventEmitter<{
+        visible: boolean;
+    }>;
+    getConstants(): {
+        schemeUri: string;
+    };
+    closeView(): Promise<void>;
+}
+export declare const GraniteModule: GraniteBrownfieldModuleSpec;
+export {};

package/dist/router/Router.d.ts

@@ -1,6 +1,7 @@
 import { NavigationContainer, NavigationContainerRefWithCurrent, ParamListBase, RouteProp } from '@granite-js/native/@react-navigation/native';
 import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
 import { ComponentProps, ComponentType, PropsWithChildren, ReactElement } from 'react';
+import type { ErrorComponent } from './types';
 export type RouterProps = StackNavigatorProps & NavigationContainerProps;
 interface StackNavigatorProps {
     /**
@@ -8,7 +9,7 @@ interface StackNavigatorProps {
      * @description
      * You can create and pass a NavigationContainerRef from @react-navigation/native externally. This allows external control of the router.
      */
-    navigationContainerRef?: NavigationContainerRefWithCurrent<any>;
+    navigationContainerRef?: NavigationContainerRefWithCurrent<never>;
     /**
      * @name defaultScreenOption
      * @description
@@ -24,6 +25,12 @@ interface StackNavigatorProps {
      * Container component that wraps each Screen component.
      */
     screenContainer?: ComponentType<PropsWithChildren<any>>;
+    /**
+     * @name defaultErrorComponent
+     * @description
+     * Error boundary component used when a route does not provide its own error component.
+     */
+    defaultErrorComponent?: ErrorComponent;
 }
 type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>, 'ref' | 'documentTitle' | 'fallback' | 'onReady' | 'onUnhandledAction' | 'onStateChange' | 'initialState'>;
 /**
@@ -37,11 +44,12 @@ type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>,
  *
  * @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 {NavigationContainerRefWithCurrent<never>} [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 {ComponentType<{ error: unknown; reset: () => void }>} [defaultErrorComponent] Default error component for screens without a route-specific error component.
  * @param {NavigationContainerProps} [navigationContainerProps] - You can set props to be passed to NavigationContainer from @react-navigation/native.
  *
  * @returns {ReactElement} - Returns the router component.
@@ -55,5 +63,5 @@ type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>,
  * }
  * ```
  */
-export declare function Router({ prefix, context, container: Container, initialProps, initialScheme, navigationContainerRef, defaultScreenOption, screenContainer, setIosSwipeGestureEnabled, getInitialUrl, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
+export declare function Router({ prefix, context, container: Container, initialProps, initialScheme, navigationContainerRef, defaultScreenOption, screenContainer, defaultErrorComponent, setIosSwipeGestureEnabled, getInitialUrl, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
 export {};

package/dist/router/components/CanGoBackGuard.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
-export declare function CanGoBackGuard({ children, canGoBack, onBack, setIosSwipeGestureEnabled, }: {
+export declare function CanGoBackGuard({ children, canGoBack, onBack, isInitialScreen, setIosSwipeGestureEnabled, }: {
     canGoBack: boolean;
+    isInitialScreen: boolean;
     children: ReactNode;
     onBack?: () => void;
     setIosSwipeGestureEnabled?: ({ isEnabled }: {

package/dist/router/components/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ReactNode } from 'react';
+import type { ErrorComponent } from '../types';
+interface ErrorBoundaryProps {
+    fallback: ErrorComponent;
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: unknown | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): ErrorBoundaryState;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    private reset;
+}
+export {};

package/dist/router/components/StackNavigator.d.ts

@@ -1,54 +1,51 @@
 export declare const StackNavigator: {
-    Navigator: import("react").ComponentType<Omit<import("@react-navigation/routers").DefaultRouterOptions<string> & {
-        id?: string;
+    Navigator: import("react").ComponentType<Omit<import("@react-navigation/native-stack").NativeStackNavigatorProps, "children" | "id" | "initialRouteName" | "layout" | "screenListeners" | "screenOptions" | "screenLayout" | "UNSTABLE_router" | "UNSTABLE_routeNamesChangeBehavior"> & import("@react-navigation/routers").DefaultRouterOptions<string> & ({
         children: React.ReactNode;
+        layout?: ((props: {
+            state: import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>;
+            navigation: import("@react-navigation/core").NavigationHelpers<import("@react-navigation/routers").ParamListBase, {}>;
+            descriptors: Record<string, import("@react-navigation/core").Descriptor<import("@react-navigation/native-stack").NativeStackNavigationOptions, import("@react-navigation/core").NavigationProp<import("@react-navigation/routers").ParamListBase, string, string | undefined, import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>, import("@react-navigation/native-stack").NativeStackNavigationOptions, import("@react-navigation/native-stack").NativeStackNavigationEventMap>, import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>>>;
+            children: React.ReactNode;
+        }) => React.ReactElement) | undefined;
         screenListeners?: Partial<{
-            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart">;
-            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd">;
-            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus">;
-            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur">;
-            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state">;
-            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove">;
+            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart", unknown>;
+            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd", unknown>;
+            gestureCancel: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "gestureCancel", unknown>;
+            sheetDetentChange: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "sheetDetentChange", unknown>;
+            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus", unknown>;
+            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur", unknown>;
+            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state", unknown>;
+            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove", true>;
         }> | ((props: {
             route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
-            navigation: any;
+            navigation: import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/routers").ParamListBase, string, string | undefined>;
         }) => Partial<{
-            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart">;
-            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd">;
-            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus">;
-            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur">;
-            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state">;
-            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove">;
+            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart", unknown>;
+            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd", unknown>;
+            gestureCancel: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "gestureCancel", unknown>;
+            sheetDetentChange: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "sheetDetentChange", unknown>;
+            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus", unknown>;
+            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur", unknown>;
+            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state", unknown>;
+            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove", true>;
         }>) | undefined;
         screenOptions?: import("@react-navigation/native-stack").NativeStackNavigationOptions | ((props: {
             route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
-            navigation: any;
+            navigation: import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/routers").ParamListBase, string, string | undefined>;
+            theme: ReactNavigation.Theme;
         }) => import("@react-navigation/native-stack").NativeStackNavigationOptions) | undefined;
-    } & import("@react-navigation/routers").StackRouterOptions, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
-        id?: string;
-        children: React.ReactNode;
-        screenListeners?: Partial<{
-            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart">;
-            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd">;
-            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus">;
-            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur">;
-            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state">;
-            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove">;
-        }> | ((props: {
-            route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
-            navigation: any;
-        }) => Partial<{
-            transitionStart: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionStart">;
-            transitionEnd: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "transitionEnd">;
-            focus: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "focus">;
-            blur: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "blur">;
-            state: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "state">;
-            beforeRemove: import("@react-navigation/core").EventListenerCallback<import("@react-navigation/native-stack").NativeStackNavigationEventMap & import("@react-navigation/core").EventMapCore<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>>, "beforeRemove">;
-        }>) | undefined;
-        screenOptions?: import("@react-navigation/native-stack").NativeStackNavigationOptions | ((props: {
-            route: import("@react-navigation/core").RouteProp<import("@react-navigation/routers").ParamListBase, string>;
-            navigation: any;
-        }) => import("@react-navigation/native-stack").NativeStackNavigationOptions) | undefined;
-    }>;
-    Screen: <RouteName extends string>(_: import("@react-navigation/core").RouteConfig<import("@react-navigation/routers").ParamListBase, RouteName, import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>, import("@react-navigation/native-stack").NativeStackNavigationOptions, import("@react-navigation/native-stack").NativeStackNavigationEventMap>) => null;
+        screenLayout?: ((props: import("@react-navigation/core").ScreenLayoutArgs<import("@react-navigation/routers").ParamListBase, string, import("@react-navigation/native-stack").NativeStackNavigationOptions, import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/routers").ParamListBase, string, string | undefined>>) => React.ReactElement) | undefined;
+        UNSTABLE_router?: (<Action extends Readonly<{
+            type: string;
+            payload?: object;
+            source?: string;
+            target?: string;
+        }>>(original: import("@react-navigation/routers").Router<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>, Action>) => Partial<import("@react-navigation/routers").Router<import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>, Action>>) | undefined;
+        UNSTABLE_routeNamesChangeBehavior?: "firstMatch" | "lastUnhandled";
+    } & ({
+        id?: undefined;
+    } | {
+        id: string;
+    }))>;
+    Screen: <RouteName extends string>(_: import("@react-navigation/core").RouteConfig<import("@react-navigation/routers").ParamListBase, RouteName, import("@react-navigation/routers").StackNavigationState<import("@react-navigation/routers").ParamListBase>, import("@react-navigation/native-stack").NativeStackNavigationOptions, import("@react-navigation/native-stack").NativeStackNavigationEventMap, import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/routers").ParamListBase, string, string | undefined>>) => null;
 };

package/dist/router/components/useRouterBackHandler.d.ts

@@ -6,7 +6,7 @@ import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-nav
  * @description
  * A hook that provides a handler for handling back navigation actions. This can be used when you need to close a view directly when the back button is pressed in modals or independent screens where there's no navigation stack. This hook uses `NavigationContainerRef` from `@react-navigation/native` to navigate to the previous screen if there's a remaining navigation stack, or executes the user-defined `onClose` function if the stack is empty.
  *
- * @param {NavigationContainerRefWithCurrent<any>} navigationContainerRef - A `NavigationContainerRef` that can reference the current navigation state. Used when executing back navigation actions.
+ * @param {NavigationContainerRefWithCurrent<never>} navigationContainerRef - A `NavigationContainerRef` that can reference the current navigation state. Used when executing back navigation actions.
  * @param {() => void} [onClose] - A function to execute when the navigation stack is empty. For example, you can pass a function that closes a React Native View.
  *
  * @returns {{ handler: () => void }} A handler function that can be used in back buttons or similar components.
@@ -42,13 +42,13 @@ import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-nav
  * }
  */
 export declare function useRouterBackHandler({ navigationContainerRef, onClose, }: {
-    navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+    navigationContainerRef: NavigationContainerRefWithCurrent<never>;
     onClose?: () => void;
 }): {
     handler: () => void;
 };
 export declare function useInternalRouterBackHandler({ navigationContainerRef, onClose, }: {
-    navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+    navigationContainerRef: NavigationContainerRefWithCurrent<never>;
     onClose?: () => void;
 }): {
     handler: () => void;

package/dist/router/createRoute.d.ts

@@ -1,12 +1,14 @@
 import { type ParamListBase } from '@granite-js/native/@react-navigation/native';
 import { NativeStackNavigationOptions, NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
 import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { ErrorComponent } from './types';
 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) | StandardSchemaV1<any, T>;
     component: React.FC<any>;
+    errorComponent?: ErrorComponent;
     screenOptions?: NativeStackNavigationOptions | ((context: {
         params: T;
     }) => NativeStackNavigationOptions);
@@ -25,8 +27,9 @@ export type RouteHooksOptions<TScreen extends keyof RegisterScreen> = {
     from?: never;
 };
 export declare const routeMap: Map<keyof RegisterScreenInput, {
-    options: Omit<RouteOptions<any>, "component" | "screenOptions">;
+    options: Omit<RouteOptions<any>, "component" | "screenOptions" | "errorComponent">;
     component: React.FC<any>;
+    errorComponent?: ErrorComponent;
     screenOptions?: NativeStackNavigationOptions | ((context: {
         params: any;
     }) => NativeStackNavigationOptions);

package/dist/router/hooks/useRouterControls.d.ts

@@ -1,13 +1,14 @@
 import { type ComponentType, type PropsWithChildren } from 'react';
-import { RequireContext } from '../types/RequireContext';
+import type { ErrorComponent, RequireContext } from '../types';
 export interface RouterControlsConfig {
     prefix: string;
     initialScheme: string;
     context: RequireContext;
     getInitialUrl?: (initialScheme: string) => string | undefined | Promise<string | undefined>;
     screenContainer?: ComponentType<PropsWithChildren<any>>;
+    defaultErrorComponent?: ErrorComponent;
 }
-export declare function useRouterControls({ prefix, context, screenContainer: ScreenContainer, getInitialUrl, initialScheme, }: RouterControlsConfig): {
+export declare function useRouterControls({ prefix, context, screenContainer: ScreenContainer, getInitialUrl, initialScheme, defaultErrorComponent, }: RouterControlsConfig): {
     Screens: import("react/jsx-runtime").JSX.Element[];
     linkingOptions: import("@react-navigation/native").LinkingOptions<{}>;
 };

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

@@ -0,0 +1,6 @@
+import type { ComponentType } from 'react';
+export interface ErrorComponentProps {
+    error: unknown;
+    reset: () => void;
+}
+export type ErrorComponent = ComponentType<ErrorComponentProps>;

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

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

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

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

package/dist/status-bar/utils.d.ts

@@ -1,3 +1,3 @@
+import { ColorSchemeName } from 'react-native';
 import type { StatusBarStyle } from './types';
-import type { ColorPreference } from '../initial-props';
-export declare function toStatusBarContentStyle(statusBarStyle?: StatusBarStyle, colorPreference?: ColorPreference): 'light-content' | 'dark-content';
+export declare function toStatusBarContentStyle(statusBarStyle?: StatusBarStyle, colorPreference?: ColorSchemeName): 'light-content' | 'dark-content';

package/dist/video/Video.d.ts

@@ -1,8 +1,9 @@
-import type { default as VideoRef } from '@granite-js/native/react-native-video';
+import { type VideoRef } from '@granite-js/video';
 import { ComponentProps } from 'react';
 import { Animated } from 'react-native';
-import * as instance from './instance';
-declare const AnimatedRNVideo: Animated.AnimatedComponent<import("react").ComponentType<instance.VideoNativeProps>>;
+declare const AnimatedRNVideo: Animated.AnimatedComponent<import("react").ForwardRefExoticComponent<import("@granite-js/video").VideoProps & import("react").RefAttributes<VideoRef>> & {
+    isAvailable: boolean;
+}>;
 type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
 /**
  * @public
@@ -11,13 +12,8 @@ type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
  * @description
  * The Video component implements audio focus control logic to prevent the sandbox app from stopping music playing in other apps. It automatically plays or pauses based on the app's state. For example, when the app transitions to the background, the video automatically pauses.
  *
- * ::: warning
- * The Video component uses [react-native-video version (6.0.0-alpha.6)](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6). Therefore, some types or features may not be compatible with the latest version.
- * :::
- *
  * @property {boolean} [isAvailable] Value to check if the `Video` component can be used. You can check this value to determine if the user can render the video or if video functionality is unavailable due to environmental constraints (e.g., network connection issues, unsupported devices). If this value is `false`, you should handle it by not rendering the video or providing alternative content.
  *
- * @param {VideoProperties} [props] Properties provided by [`react-native-video`](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6).
  * @param {string} [props.source.uri] Source of the video to play. Can be set to a file path or URL.
  * @param {boolean} [props.muted=false] Controls the mute state of the video. If `true`, the video's audio is muted; if `false`, the audio plays. Default is `false`.
  * @param {boolean} [props.paused=false] Property to control video playback. If `true`, the video is paused; if `false`, the video plays. Default is `false`, and it autoplays.
@@ -26,11 +22,6 @@ type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
  *
  * @returns {JSX.Element} Returns a JSX element that renders the video. Uses `Animated` to provide smooth animation effects during video playback.
  *
- * @see [react-native-video] https://github.com/react-native-video/react-native-video
- * For detailed properties of the video component, please refer to the official documentation.
- * @see [react-native-video-6.0.0] https://github.com/TheWidlarzGroup/react-native-video/releases/tag/v6.0.0
- * This is the source code of the version currently installed in the sandbox app.
- *
  * @example
  *
  * ### Video Autoplay Example
@@ -58,11 +49,7 @@ type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
  * }
  * ```
  */
-declare const VideoImpl: import("react").ForwardRefExoticComponent<Omit<import("react-native-video").VideoProperties, "onAudioFocusChanged"> & {
-    onAudioFocusChanged?: (event: {
-        hasAudioFocus: boolean;
-    }) => void;
-} & import("react").RefAttributes<VideoRef>>;
+declare const VideoImpl: import("react").ForwardRefExoticComponent<Omit<Animated.AnimatedProps<import("@granite-js/video").VideoProps & import("react").RefAttributes<VideoRef>>, "ref"> & import("react").RefAttributes<VideoRef>>;
 export declare const Video: typeof VideoImpl & {
     isAvailable: boolean;
 };