@granite-js/react-native 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @granite-js/react-native
 
+## 0.1.12
+
+### Patch Changes
+
+- bc69cc7: Add useRouterBackHandler Hook, Add BackButton Component.
+- d1e6585: fix module resolutions
+- 1e99fe1: support initialScheme, support host
+- Updated dependencies [d1e6585]
+- Updated dependencies [1e99fe1]
+  - @granite-js/cli@0.1.12
+  - @granite-js/image@0.1.12
+  - @granite-js/jest@0.1.12
+  - @granite-js/lottie@0.1.12
+  - @granite-js/mpack@0.1.12
+  - @granite-js/native@0.1.12
+  - @granite-js/plugin-core@0.1.12
+  - @granite-js/style-utils@0.1.12
+
 ## 0.1.11
 
 ### Patch Changes

package/cli.d.ts

@@ -1 +1 @@
-export { initialize } from '@granite-js/cli';
+export * from './dist/cli';

package/config.d.ts

@@ -1,2 +1 @@
-export * from '@granite-js/plugin-core';
-export { Config as MpackConfig } from '@granite-js/mpack';
+export * from './dist/config';

package/dist/app/AppRoot.d.ts

@@ -1 +1 @@
-export declare function AppRoot({ appName, context, container: Container, initialProps, router }: AppRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router }: AppRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/app/Granite.d.ts

@@ -19,6 +19,11 @@ export interface GraniteProps {
      * Configuration object to be passed to the router.
      */
     router?: RouterProps;
+    /**
+     * @description
+     * The initial scheme of the app.
+     */
+    initialScheme?: string;
 }
 /**
  * @public
@@ -55,7 +60,7 @@ export interface GraniteProps {
  * ```
  */
 export declare const Granite: {
-    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
+    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
     registerHostApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName }: Pick<GraniteProps, "appName">): (initialProps: InitialProps) => JSX.Element;
     readonly appName: string;
 };

package/dist/cli.d.mts

@@ -0,0 +1,3 @@
+export { initialize } from '@granite-js/cli';
+import '@granite-js/plugin-core';
+import '@granite-js/jest';

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export { initialize } from '@granite-js/cli';

package/dist/cli.js

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/cli.ts
+var cli_exports = {};
+__export(cli_exports, {
+  initialize: () => import_cli.initialize
+});
+module.exports = __toCommonJS(cli_exports);
+var import_cli = require("@granite-js/cli");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  initialize
+});

package/dist/cli.mjs

@@ -0,0 +1,5 @@
+// src/cli.ts
+import { initialize } from "@granite-js/cli";
+export {
+  initialize
+};

package/dist/config.d.mts

@@ -0,0 +1 @@
+export { defineConfig } from '@granite-js/plugin-core';

package/dist/config.d.ts

@@ -0,0 +1 @@
+export { defineConfig } from '@granite-js/plugin-core';

package/dist/config.js

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/config.ts
+var config_exports = {};
+__export(config_exports, {
+  defineConfig: () => import_plugin_core.defineConfig
+});
+module.exports = __toCommonJS(config_exports);
+var import_plugin_core = require("@granite-js/plugin-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineConfig
+});

package/dist/config.mjs

@@ -0,0 +1,5 @@
+// src/config.ts
+import { defineConfig } from "@granite-js/plugin-core";
+export {
+  defineConfig
+};

package/dist/index.d.ts

@@ -17,5 +17,6 @@ export * from './event';
 export * from './video';
 export * from './status-bar';
 export * from './blur';
+export { BackButton, useRouterBackHandler } from './router';
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/dist/jest.d.mts

@@ -0,0 +1 @@
+export { config, setup } from '@granite-js/jest';

package/dist/{jest/index.js → jest.js}

@@ -17,13 +17,13 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/jest/index.ts
-var index_exports = {};
-__export(index_exports, {
+// src/jest.ts
+var jest_exports = {};
+__export(jest_exports, {
   config: () => import_jest.config,
   setup: () => import_jest.setup
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(jest_exports);
 var import_jest = require("@granite-js/jest");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/jest.mjs

@@ -0,0 +1,6 @@
+// src/jest.ts
+import { setup, config } from "@granite-js/jest";
+export {
+  config,
+  setup
+};

package/dist/router/Router.d.ts

@@ -55,5 +55,5 @@ type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>,
  * }
  * ```
  */
-export declare function Router({ prefix, context, canGoBack, onBack, container: Container, initialProps, navigationContainerRef, defaultScreenOption, screenContainer, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
+export declare function Router({ prefix, context, container: Container, initialProps, initialScheme, navigationContainerRef, defaultScreenOption, screenContainer, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
 export {};

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

@@ -3,5 +3,46 @@ interface BackButtonProps extends TouchableOpacityProps {
     tintColor?: string;
     onPress?: () => void;
 }
+/**
+ * @public
+ * @category UI
+ * @name BackButton
+ * @description
+ * A back button component. This component is primarily used to implement functionality for returning to the previous screen in navigation headers or custom screen tops. If no `onPress` handler is set, it won't perform any action.
+ *
+ * @param {string} [props.tintColor] - The color of the button icon. You can use CSS color strings.
+ * @param {() => void} [props.onPress] - A function to execute when the button is pressed. For example, you can add a function to return to the previous screen.
+ *
+ * @returns {ReactElement} Returns a back button component.
+ * @example
+ *
+ * ### Example of directly passing a handler to a back button and setting a function to close the view
+ *
+ * ```tsx
+ * import { createNavigationContainerRef, useNavigation } from '@granite-js/native/@react-navigation/native';
+ * import { BackButton, useRouterBackHandler } from '@granite-js/react-native';
+ * import { useEffect } from 'react';
+ *
+ * const navigationContainerRef = createNavigationContainerRef();
+ *
+ * function MyBackButton() {
+ *   const navigation = useNavigation();
+ *
+ *   const { handler } = useRouterBackHandler({
+ *     navigationContainerRef,
+ *     onClose: () => {
+ *       // close the view
+ *     },
+ *   });
+ *
+ *   useEffect(() => {
+ *     navigation.setOptions({
+ *       headerLeft: () => <BackButton onPress={handler} />,
+ *     });
+ *   }, [handler, navigation]);
+ *
+ *   return <></>;
+ * }
+ */
 declare function BackButton({ tintColor, onPress }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
 export { BackButton };

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

@@ -0,0 +1,57 @@
+import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
+/**
+ * @public
+ * @name useRouterBackHandler
+ * @category Screen Control
+ * @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 {() => 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.
+ *
+ * @example
+ *
+ * ### Example of directly passing a handler to a back button and setting a function to close the view
+ *
+ * ```tsx
+ * import { createNavigationContainerRef, useNavigation } from '@granite-js/native/@react-navigation/native';
+ * import { BackButton, useRouterBackHandler } from '@granite-js/react-native';
+ * import { useEffect } from 'react';
+ *
+ * const navigationContainerRef = createNavigationContainerRef();
+ *
+ * function MyBackButton() {
+ *   const navigation = useNavigation();
+ *
+ *   const { handler } = useRouterBackHandler({
+ *     navigationContainerRef,
+ *     onClose: () => {
+ *       // close the view
+ *     },
+ *   });
+ *
+ *   useEffect(() => {
+ *     navigation.setOptions({
+ *       headerLeft: () => <BackButton onPress={handler} />,
+ *     });
+ *   }, [handler, navigation]);
+ *
+ *   return <></>;
+ * }
+ */
+export declare function useRouterBackHandler({ navigationContainerRef, onClose, }: {
+    navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+    onClose?: () => void;
+}): {
+    handler: () => void;
+};
+export declare function useInternalRouterBackHandler({ navigationContainerRef, onClose, }: {
+    navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+    onClose?: () => void;
+}): {
+    handler: () => void;
+    canGoBack: boolean;
+    onBack: () => void;
+};

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

@@ -1 +1,4 @@
-export declare function useInitialRouteName(prefix: string): string | undefined;
+export declare function useInitialRouteName({ prefix, initialScheme }: {
+    prefix: string;
+    initialScheme: string;
+}): string | undefined;

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

@@ -2,10 +2,11 @@ import { type ComponentType, type PropsWithChildren } from 'react';
 import { RequireContext } from '../types/RequireContext';
 export interface RouterControlsConfig {
     prefix: string;
+    initialScheme: string;
     context: RequireContext;
     screenContainer?: ComponentType<PropsWithChildren<any>>;
 }
-export declare function useRouterControls({ prefix, context, screenContainer: ScreenContainer }: RouterControlsConfig): {
+export declare function useRouterControls({ prefix, context, screenContainer: ScreenContainer, initialScheme, }: RouterControlsConfig): {
     Screens: import("react/jsx-runtime").JSX.Element[];
     linkingOptions: import("@react-navigation/native").LinkingOptions<{}>;
 };

package/dist/router/index.d.ts

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

package/dist/router/types/screen-option.d.ts

@@ -1,4 +1,4 @@
 import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
 export declare const DEFAULT_BACKGROUND_COLOR = "#ffffff";
-export declare const DEFAULT_HEADER_TINT_COLOR = "#333d4b";
+export declare const DEFAULT_HEADER_TINT_COLOR = "#191f28";
 export declare const BASE_STACK_NAVIGATOR_STYLE: NativeStackNavigationOptions;

package/dist/types/global.d.ts

@@ -2,13 +2,8 @@ export interface GraniteGlobal {
     app: {
         name: string;
         scheme: string;
+        host: string;
     };
 }
 declare global {
-    var window: {
-        __granite: GraniteGlobal;
-    };
-    var global: {
-        __granite: GraniteGlobal;
-    };
 }

package/dist/utils/getSchemePrefix.d.ts

@@ -0,0 +1,5 @@
+export declare function getSchemePrefix({ scheme, appName, host }: {
+    scheme: string;
+    appName: string;
+    host: string;
+}): string;

package/jest.d.ts

@@ -1 +1 @@
-export * from './dist/jest';
+export * from './dist/jest';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -27,17 +27,35 @@
       "types": "./src/constant-bridges.ts",
       "default": "./src/constant-bridges.ts"
     },
-    "./jest": {
-      "types": "./dist/jest/index.d.ts",
-      "default": "./dist/jest/index.js"
+    "./config": {
+      "import": {
+        "types": "./dist/config.d.mts",
+        "default": "./dist/config.mjs"
+      },
+      "require": {
+        "types": "./dist/config.d.ts",
+        "default": "./dist/config.js"
+      }
     },
     "./cli": {
-      "types": "./cli.d.ts",
-      "default": "./cli.js"
+      "import": {
+        "types": "./dist/cli.d.mts",
+        "default": "./dist/cli.mjs"
+      },
+      "require": {
+        "types": "./dist/cli.d.ts",
+        "default": "./dist/cli.js"
+      }
     },
-    "./config": {
-      "types": "./config.d.ts",
-      "default": "./config.js"
+    "./jest": {
+      "import": {
+        "types": "./dist/jest.d.mts",
+        "default": "./dist/jest.mjs"
+      },
+      "require": {
+        "types": "./dist/jest.d.ts",
+        "default": "./dist/jest.js"
+      }
     },
     "./types": {
       "types": "./dist/types/global.d.ts"
@@ -56,7 +74,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.11",
+    "@granite-js/native": "0.1.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -82,13 +100,13 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.11",
-    "@granite-js/image": "0.1.11",
-    "@granite-js/jest": "0.1.11",
-    "@granite-js/lottie": "0.1.11",
-    "@granite-js/mpack": "0.1.11",
-    "@granite-js/plugin-core": "0.1.11",
-    "@granite-js/style-utils": "0.1.11",
+    "@granite-js/cli": "0.1.12",
+    "@granite-js/image": "0.1.12",
+    "@granite-js/jest": "0.1.12",
+    "@granite-js/lottie": "0.1.12",
+    "@granite-js/mpack": "0.1.12",
+    "@granite-js/plugin-core": "0.1.12",
+    "@granite-js/style-utils": "0.1.12",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/app/AppRoot.tsx

@@ -1,10 +1,11 @@
 import { SafeAreaProvider } from '@granite-js/native/react-native-safe-area-context';
 import type { ComponentType, PropsWithChildren } from 'react';
-import type { GraniteProps } from './Granite';
 import type { InitialProps } from '../initial-props';
+import { Router } from '../router';
 import { BackEventProvider, useBackEventState } from '../use-back-event';
 import { App } from './App';
-import { Router } from '../router';
+import type { GraniteProps } from './Granite';
+import { getSchemePrefix } from '../utils/getSchemePrefix';
 
 /**
  * @internal
@@ -12,12 +13,17 @@ import { Router } from '../router';
 interface AppRootProps extends GraniteProps {
   container: ComponentType<PropsWithChildren<InitialProps>>;
   initialProps: InitialProps;
+  initialScheme: string;
 }
 
-export function AppRoot({ appName, context, container: Container, initialProps, router }: AppRootProps) {
+export function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router }: AppRootProps) {
   const backEventState = useBackEventState();
-  const scheme = global.__granite.app.scheme;
-  const baseScheme = `${scheme}://${appName}`;
+
+  const prefix = getSchemePrefix({
+    appName,
+    scheme: global.__granite.app.scheme,
+    host: global.__granite.app.host,
+  });
 
   return (
     <App {...initialProps}>
@@ -26,10 +32,9 @@ export function AppRoot({ appName, context, container: Container, initialProps,
           <Router
             context={context}
             initialProps={initialProps}
+            initialScheme={initialScheme}
             container={Container}
-            canGoBack={!backEventState.hasBackEvent}
-            onBack={backEventState.onBack}
-            prefix={baseScheme}
+            prefix={prefix}
             {...router}
           />
         </BackEventProvider>

package/src/app/Granite.tsx

@@ -5,6 +5,7 @@ import type { InitialProps } from '../initial-props';
 import type { RouterProps, RequireContext } from '../router';
 import { AppRoot } from './AppRoot';
 import { HostAppRoot } from './HostAppRoot';
+import { getSchemeUri } from '../constant-bridges';
 
 export interface GraniteProps {
   /**
@@ -24,6 +25,12 @@ export interface GraniteProps {
    * Configuration object to be passed to the router.
    */
   router?: RouterProps;
+
+  /**
+   * @description
+   * The initial scheme of the app.
+   */
+  initialScheme?: string;
 }
 
 const createApp = () => {
@@ -40,7 +47,7 @@ const createApp = () => {
   return {
     registerApp(
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
-      { appName, context, router }: GraniteProps
+      { appName, context, router, initialScheme }: GraniteProps
     ): (initialProps: InitialProps) => JSX.Element {
       if (appName === ENTRY_BUNDLE_NAME) {
         throw new Error(`Reserved app name 'shared' cannot be used`);
@@ -51,6 +58,7 @@ const createApp = () => {
           <AppRoot
             container={AppContainer}
             initialProps={initialProps}
+            initialScheme={initialScheme ?? getSchemeUri()}
             appName={appName}
             context={context}
             router={router}

package/src/cli.ts

@@ -0,0 +1 @@
+export { initialize } from '@granite-js/cli';

package/src/config.ts

@@ -0,0 +1 @@
+export { defineConfig } from '@granite-js/plugin-core';

package/src/index.ts

@@ -20,5 +20,7 @@ export * from './video';
 export * from './status-bar';
 export * from './blur';
 
+export { BackButton, useRouterBackHandler } from './router';
+
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/src/router/Router.tsx

@@ -1,3 +1,4 @@
+import { HeaderBackButtonProps } from '@granite-js/native/@react-navigation/elements';
 import {
   createNavigationContainerRef,
   NavigationContainer,
@@ -8,9 +9,11 @@ import {
 import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
 import { ComponentProps, ComponentType, Fragment, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
 import { InitialProps } from '..';
+import { closeView } from '../native-modules';
+import { BackButton } from './components/BackButton';
 import { CanGoBackGuard } from './components/CanGoBackGuard';
-import { RouterBackButton, RouterBackButtonProps } from './components/RouterBackButton';
 import { StackNavigator } from './components/StackNavigator';
+import { useInternalRouterBackHandler } from './components/useRouterBackHandler';
 import { useInitialRouteName } from './hooks/useInitialRouteName';
 import { useRouterControls } from './hooks/useRouterControls';
 import { RequireContext } from './types';
@@ -52,6 +55,7 @@ export interface InternalRouterProps {
    */
   container: ComponentType<PropsWithChildren<InitialProps>>;
   initialProps: InitialProps;
+  initialScheme: string;
 }
 
 export type RouterProps = StackNavigatorProps & NavigationContainerProps;
@@ -117,10 +121,9 @@ export function Router({
   // Internal props
   prefix,
   context,
-  canGoBack = true,
-  onBack,
   container: Container = Fragment,
   initialProps,
+  initialScheme,
   // Public props (NavigationContainer)
   navigationContainerRef,
   defaultScreenOption,
@@ -128,16 +131,24 @@ export function Router({
   // Public props (StackNavigator)
   ...navigationContainerProps
 }: InternalRouterProps & RouterProps): ReactElement {
-  const initialRouteName = useInitialRouteName(prefix);
-  const { Screens, linkingOptions } = useRouterControls({ prefix, context, screenContainer });
+  const initialRouteName = useInitialRouteName({ prefix, initialScheme });
+  const { Screens, linkingOptions } = useRouterControls({
+    prefix,
+    context,
+    screenContainer,
+    initialScheme,
+  });
 
   const ref = useMemo(() => navigationContainerRef ?? createNavigationContainerRef<any>(), [navigationContainerRef]);
 
+  const { handler, canGoBack, onBack } = useInternalRouterBackHandler({
+    navigationContainerRef: ref,
+    onClose: closeView,
+  });
+
   const headerLeft = useCallback(
-    (backButtonProps: Omit<RouterBackButtonProps, 'navigationContainerRef'>) => (
-      <RouterBackButton {...backButtonProps} onBack={onBack} canGoBack={canGoBack} navigationContainerRef={ref} />
-    ),
-    [onBack, canGoBack, ref]
+    (backButtonProps: HeaderBackButtonProps) => <BackButton {...backButtonProps} onPress={handler} />,
+    [handler]
   );
 
   const screenOptions = useCallback(

package/src/router/components/BackButton.tsx

@@ -5,10 +5,49 @@ interface BackButtonProps extends TouchableOpacityProps {
   tintColor?: string;
   onPress?: () => void;
 }
-
-const DEFAULT_COLOR = '#191f28'; // grey900
+/**
+ * @public
+ * @category UI
+ * @name BackButton
+ * @description
+ * A back button component. This component is primarily used to implement functionality for returning to the previous screen in navigation headers or custom screen tops. If no `onPress` handler is set, it won't perform any action.
+ *
+ * @param {string} [props.tintColor] - The color of the button icon. You can use CSS color strings.
+ * @param {() => void} [props.onPress] - A function to execute when the button is pressed. For example, you can add a function to return to the previous screen.
+ *
+ * @returns {ReactElement} Returns a back button component.
+ * @example
+ *
+ * ### Example of directly passing a handler to a back button and setting a function to close the view
+ *
+ * ```tsx
+ * import { createNavigationContainerRef, useNavigation } from '@granite-js/native/@react-navigation/native';
+ * import { BackButton, useRouterBackHandler } from '@granite-js/react-native';
+ * import { useEffect } from 'react';
+ *
+ * const navigationContainerRef = createNavigationContainerRef();
+ *
+ * function MyBackButton() {
+ *   const navigation = useNavigation();
+ *
+ *   const { handler } = useRouterBackHandler({
+ *     navigationContainerRef,
+ *     onClose: () => {
+ *       // close the view
+ *     },
+ *   });
+ *
+ *   useEffect(() => {
+ *     navigation.setOptions({
+ *       headerLeft: () => <BackButton onPress={handler} />,
+ *     });
+ *   }, [handler, navigation]);
+ *
+ *   return <></>;
+ * }
+ */
 function BackButton({ tintColor, onPress }: BackButtonProps) {
-  return <NavbarBackButton onPress={onPress} color={tintColor ?? DEFAULT_COLOR} />;
+  return <NavbarBackButton onPress={onPress} color={tintColor} />;
 }
 
 function NavbarBackButton({ onPress, color }: { onPress?: () => void; color?: string }) {

package/src/router/components/useRouterBackHandler.tsx

@@ -0,0 +1,91 @@
+import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
+import { useCallback, useMemo } from 'react';
+import { useBackEventState } from '../../use-back-event';
+
+/**
+ * @public
+ * @name useRouterBackHandler
+ * @category Screen Control
+ * @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 {() => 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.
+ *
+ * @example
+ *
+ * ### Example of directly passing a handler to a back button and setting a function to close the view
+ *
+ * ```tsx
+ * import { createNavigationContainerRef, useNavigation } from '@granite-js/native/@react-navigation/native';
+ * import { BackButton, useRouterBackHandler } from '@granite-js/react-native';
+ * import { useEffect } from 'react';
+ *
+ * const navigationContainerRef = createNavigationContainerRef();
+ *
+ * function MyBackButton() {
+ *   const navigation = useNavigation();
+ *
+ *   const { handler } = useRouterBackHandler({
+ *     navigationContainerRef,
+ *     onClose: () => {
+ *       // close the view
+ *     },
+ *   });
+ *
+ *   useEffect(() => {
+ *     navigation.setOptions({
+ *       headerLeft: () => <BackButton onPress={handler} />,
+ *     });
+ *   }, [handler, navigation]);
+ *
+ *   return <></>;
+ * }
+ */
+export function useRouterBackHandler({
+  navigationContainerRef,
+  onClose,
+}: {
+  navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+  onClose?: () => void;
+}) {
+  const { handler } = useInternalRouterBackHandler({ navigationContainerRef, onClose });
+
+  return { handler };
+}
+
+export function useInternalRouterBackHandler({
+  navigationContainerRef,
+  onClose,
+}: {
+  navigationContainerRef: NavigationContainerRefWithCurrent<any>;
+  onClose?: () => void;
+}) {
+  const { onBack, hasBackEvent } = useBackEventState();
+  const canGoBack = !hasBackEvent;
+
+  const handler = useCallback(() => {
+    onBack?.();
+
+    if (!canGoBack) {
+      return;
+    }
+
+    if (navigationContainerRef.canGoBack()) {
+      navigationContainerRef.goBack();
+    } else {
+      onClose?.();
+    }
+  }, [canGoBack, onClose, navigationContainerRef, onBack]);
+
+  return useMemo(
+    () => ({
+      handler,
+      canGoBack,
+      onBack,
+    }),
+    [canGoBack, handler, onBack]
+  );
+}

package/src/router/hooks/useInitialRouteName.tsx

@@ -1,21 +1,15 @@
 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];
+export function useInitialRouteName({ prefix, initialScheme }: { prefix: string; initialScheme: string }) {
+  const pathname = removeTrailingSlash(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.
-   */
+function removeTrailingSlash(scheme: string) {
   if (Platform.OS === 'android') {
-    return scheme?.replaceAll(/\/+$/g, '');
+    return scheme.replaceAll(/\/+$/g, '');
   }
 
   return scheme;

package/src/router/hooks/useRouterControls.tsx

@@ -1,6 +1,5 @@
 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';
@@ -13,11 +12,17 @@ type NavigationContainerProps = ComponentProps<typeof NavigationContainer>;
 
 export interface RouterControlsConfig {
   prefix: string;
+  initialScheme: string;
   context: RequireContext;
   screenContainer?: ComponentType<PropsWithChildren<any>>;
 }
 
-export function useRouterControls({ prefix, context, screenContainer: ScreenContainer }: RouterControlsConfig) {
+export function useRouterControls({
+  prefix,
+  context,
+  screenContainer: ScreenContainer,
+  initialScheme,
+}: RouterControlsConfig) {
   const routeScreens = useMemo(() => getRouteScreens(context), [context]);
 
   const registerScreens = useMemo(() => {
@@ -56,17 +61,15 @@ export function useRouterControls({ prefix, context, screenContainer: ScreenCont
         screens: getScreenPathMapConfig(registerScreens),
       },
       async getInitialURL() {
-        const initialURL = getSchemeUri();
-
-        if (initialURL == null) {
+        if (initialScheme == null) {
           return;
         }
 
         /** @NOTE Korean paths need to be decoded. */
-        return decodeURI(initialURL);
+        return decodeURI(initialScheme);
       },
     };
-  }, [prefix, registerScreens]);
+  }, [initialScheme, prefix, registerScreens]);
 
   return { Screens, linkingOptions };
 }

package/src/router/index.ts

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

package/src/router/types/screen-option.ts

@@ -2,7 +2,7 @@ import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigati
 import { Platform } from 'react-native';
 
 export const DEFAULT_BACKGROUND_COLOR = '#ffffff';
-export const DEFAULT_HEADER_TINT_COLOR = '#333d4b';
+export const DEFAULT_HEADER_TINT_COLOR = '#191f28';
 export const BASE_STACK_NAVIGATOR_STYLE: NativeStackNavigationOptions = {
   contentStyle: {
     backgroundColor: DEFAULT_BACKGROUND_COLOR,

package/src/types/global.ts

@@ -6,6 +6,7 @@ export interface GraniteGlobal {
   app: {
     name: string;
     scheme: string;
+    host: string;
   };
 }
 
@@ -15,7 +16,4 @@ declare global {
 
   // @internal
   var Page: ComponentType<any>;
-
-  var window: { __granite: GraniteGlobal };
-  var global: { __granite: GraniteGlobal };
 }

package/src/utils/getSchemePrefix.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { getSchemePrefix } from './getSchemePrefix';
+
+describe('getSchemePrefix', () => {
+  it('should return correct URL when host is empty', () => {
+    const result = getSchemePrefix({
+      scheme: 'myapp',
+      appName: 'testapp',
+      host: '',
+    });
+
+    expect(result).toBe('myapp://testapp');
+  });
+
+  it('should return correct URL when host is provided', () => {
+    const result = getSchemePrefix({
+      scheme: 'myapp',
+      appName: 'testapp',
+      host: 'super',
+    });
+
+    expect(result).toBe('myapp://super/testapp');
+  });
+
+  it('should handle different schemes', () => {
+    const result = getSchemePrefix({
+      scheme: 'https',
+      appName: 'webapp',
+      host: 'myhost',
+    });
+
+    expect(result).toBe('https://myhost/webapp');
+  });
+
+  it('should handle different app names', () => {
+    const result = getSchemePrefix({
+      scheme: 'myapp',
+      appName: 'production-app',
+      host: 'myhost',
+    });
+
+    expect(result).toBe('myapp://myhost/production-app');
+  });
+});

package/src/utils/getSchemePrefix.ts

@@ -0,0 +1,5 @@
+export function getSchemePrefix({ scheme, appName, host }: { scheme: string; appName: string; host: string }) {
+  const base = host.length > 0 ? `${scheme}://${host}/` : `${scheme}://`;
+
+  return new URL(`${base}${appName}`).toString();
+}

package/cli.js

@@ -1,4 +0,0 @@
-const { initialize } = require('@granite-js/cli');
-module.exports = {
-  initialize,
-};

package/config.js

@@ -1,5 +0,0 @@
-const { defineConfig } = require('@granite-js/plugin-core');
-
-module.exports = {
-  defineConfig,
-};

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

@@ -1,9 +0,0 @@
-import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
-export type RouterBackButtonProps = {
-    onPress?: () => void;
-    tintColor?: string;
-    canGoBack?: boolean;
-    onBack?: () => void;
-    navigationContainerRef: NavigationContainerRefWithCurrent<any>;
-};
-export declare function RouterBackButton({ tintColor, canGoBack, onBack, navigationContainerRef }: RouterBackButtonProps): import("react/jsx-runtime").JSX.Element;

package/src/router/components/RouterBackButton.tsx

@@ -1,32 +0,0 @@
-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();
-        }
-      }}
-    />
-  );
-}