@granite-js/react-native 0.1.23-next.7 → 0.1.23-next.9

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 0.1.23-next.9
+
+### Patch Changes
+
+- tollback
+- Updated dependencies
+  - @granite-js/plugin-core@0.1.23-next.9
+  - @granite-js/style-utils@0.1.23-next.9
+  - @granite-js/lottie@0.1.23-next.9
+  - @granite-js/native@0.1.23-next.9
+  - @granite-js/image@0.1.23-next.9
+  - @granite-js/mpack@0.1.23-next.9
+  - @granite-js/jest@0.1.23-next.9
+  - @granite-js/cli@0.1.23-next.9
+
+## 0.1.23-next.8
+
+### Patch Changes
+
+- router
+- Updated dependencies
+  - @granite-js/plugin-core@0.1.23-next.8
+  - @granite-js/style-utils@0.1.23-next.8
+  - @granite-js/lottie@0.1.23-next.8
+  - @granite-js/native@0.1.23-next.8
+  - @granite-js/image@0.1.23-next.8
+  - @granite-js/mpack@0.1.23-next.8
+  - @granite-js/jest@0.1.23-next.8
+  - @granite-js/cli@0.1.23-next.8
+
 ## 0.1.23-next.7
 
 ### Patch Changes

package/dist/router/Router.d.ts

@@ -8,7 +8,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
@@ -26,7 +26,6 @@ interface StackNavigatorProps {
     screenContainer?: ComponentType<PropsWithChildren<any>>;
 }
 type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>, 'ref' | 'documentTitle' | 'fallback' | 'onReady' | 'onUnhandledAction' | 'onStateChange'>;
-export declare const navigationRef: NavigationContainerRefWithCurrent<never>;
 /**
  * @category Components
  * @kind function
@@ -38,7 +37,7 @@ export declare const navigationRef: NavigationContainerRefWithCurrent<never>;
  *
  * @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.

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

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

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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.23-next.7",
+  "version": "0.1.23-next.9",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -86,7 +86,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.23-next.7",
+    "@granite-js/native": "0.1.23-next.9",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -105,20 +105,20 @@
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "@granite-js/native": "0.1.23-next.7",
+    "@granite-js/native": "0.1.23-next.9",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.23-next.7",
-    "@granite-js/image": "0.1.23-next.7",
-    "@granite-js/jest": "0.1.23-next.7",
-    "@granite-js/lottie": "0.1.23-next.7",
-    "@granite-js/mpack": "0.1.23-next.7",
-    "@granite-js/plugin-core": "0.1.23-next.7",
-    "@granite-js/style-utils": "0.1.23-next.7",
+    "@granite-js/cli": "0.1.23-next.9",
+    "@granite-js/image": "0.1.23-next.9",
+    "@granite-js/jest": "0.1.23-next.9",
+    "@granite-js/lottie": "0.1.23-next.9",
+    "@granite-js/mpack": "0.1.23-next.9",
+    "@granite-js/plugin-core": "0.1.23-next.9",
+    "@granite-js/style-utils": "0.1.23-next.9",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/router/Router.tsx

@@ -7,7 +7,7 @@ import {
   RouteProp,
 } from '@granite-js/native/@react-navigation/native';
 import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
-import { ComponentProps, ComponentType, Fragment, PropsWithChildren, ReactElement, useCallback, useState } from 'react';
+import { ComponentProps, ComponentType, Fragment, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
 import { InitialProps } from '..';
 import { closeView } from '../native-modules';
 import { BackButton } from './components/BackButton';
@@ -67,7 +67,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
@@ -89,8 +89,6 @@ type NavigationContainerProps = Pick<
   'ref' | 'documentTitle' | 'fallback' | 'onReady' | 'onUnhandledAction' | 'onStateChange'
 >;
 
-export const navigationRef = createNavigationContainerRef<never>();
-
 /**
  * @category Components
  * @kind function
@@ -102,7 +100,7 @@ export const navigationRef = createNavigationContainerRef<never>();
  *
  * @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.
@@ -143,8 +141,10 @@ export function Router({
     initialScheme,
   });
 
+  const ref = useMemo(() => navigationContainerRef ?? createNavigationContainerRef<never>(), [navigationContainerRef]);
+
   const { handler, canGoBack, onBack } = useInternalRouterBackHandler({
-    navigationContainerRef: navigationRef,
+    navigationContainerRef: ref,
     onClose: closeView,
   });
 
@@ -163,23 +163,9 @@ export function Router({
     [canGoBack, defaultScreenOption, headerLeft]
   );
 
-  const [isInitialScreen, setIsInitialScreen] = useState(true);
-
   return (
-    <NavigationContainer
-      onStateChange={(state) => {
-        setIsInitialScreen(state ? state?.index === 0 : true);
-      }}
-      ref={navigationRef}
-      {...navigationContainerProps}
-      linking={linkingOptions}
-    >
-      <CanGoBackGuard
-        canGoBack={canGoBack}
-        isInitialScreen={isInitialScreen}
-        onBack={onBack}
-        setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
-      >
+    <NavigationContainer ref={ref} {...navigationContainerProps} linking={linkingOptions}>
+      <CanGoBackGuard canGoBack={canGoBack} onBack={onBack} setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}>
         <Container {...initialProps}>
           <StackNavigator.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
             {Screens}

package/src/router/components/CanGoBackGuard.tsx

@@ -1,19 +1,20 @@
 import { ReactNode, useEffect } from 'react';
 import { BackHandler } from 'react-native';
+import { useIsInitialScreen } from '../hooks/useIsInitialScreen';
 
 export function CanGoBackGuard({
   children,
   canGoBack,
   onBack,
-  isInitialScreen,
   setIosSwipeGestureEnabled,
 }: {
   canGoBack: boolean;
-  isInitialScreen: boolean;
   children: ReactNode;
   onBack?: () => void;
   setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
 }) {
+  const isInitialScreen = useIsInitialScreen();
+
   const shouldBlockGoingBack = !canGoBack;
 
   useEffect(() => {

package/src/router/components/useRouterBackHandler.tsx

@@ -9,7 +9,7 @@ import { useBackEventContext } from '../../use-back-event';
  * @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.