fix: Fixed an issue where stack nav actions were throwing errors

Author: artalat

package.json

@@ -29,7 +29,7 @@
     "fix:lint": "eslint src bluebase --ext=ts,tsx --fix .",
     "fix:md": "remark . -o",
     "test": "run-s build test:*",
-    "test:only": "jest --coverage",
+    "test:only": "jest --coverage --runInBand",
     "test:lint": "npm run lint",
     "test:prettier": "prettier \"src/**/*.ts\" --list-different",
     "test:md": "remark . -f",
@@ -79,6 +79,7 @@
     "@react-navigation/native-stack": "^5.0.5",
     "@react-navigation/stack": "^5.9.0",
     "expo": "^38.0.0",
+    "lodash.get": "^4.4.2",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
@@ -102,6 +103,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/enzyme-async-helpers": "^0.9.1",
     "@types/jest": "^26.0.8",
+    "@types/lodash.get": "^4.4.6",
     "@types/react": "~16.9.41",
     "@types/react-dom": "^16.9.5",
     "@types/react-native": "~0.62.13",

src/helpers/__tests__/navigationToActionObject.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import { execAction, navigationToActionObject } from '../navigationToActionObject';
 
 import { NavigationActionsObject } from '@bluebase/components';
@@ -26,7 +27,7 @@ const route = {
 	isTransitioning: false,
 	key: 'kjdkj',
 	name: 'Home',
-	params: { foo: 'bar' },
+	params: { foo: 'bar', __path_url__: '/' },
 	path: '/',
 	routes: [
 		{
@@ -72,10 +73,13 @@ describe('navigationToActionObject', () => {
 			navigate: () => ({}),
 			router: {},
 			state: {},
+			dispatch: jest.fn(),
 		};
 		const result = navigationToActionObject(nav as any, route);
 		result.push('');
 		expect(result.push).toBeTruthy();
+		result.pop();
+		expect(result.pop).toBeTruthy();
 		result.replace('');
 		expect(result.replace).toBeTruthy();
 	});

src/helpers/navigationToActionObject.ts

@@ -5,28 +5,34 @@ import {
 	NavitionActionRouteNamePayload,
 } from '@bluebase/components';
 
-const noop = (..._params: any[]) => {
-	return null;
-};
+import { StackActions } from '@react-navigation/native';
 
 /**
  * Convert a react-navigation's navigation prop to NavigationActionsObject
  * @param navigation
  */
 export const navigationToActionObject = (navigation: any, state: any): NavigationActionsObject => {
-	const {
-		navigate,
-		push = noop,
-		pop = noop,
-		replace = noop,
-		goBack,
-		setParams,
-	} = navigation as any;
+	const { navigate, goBack, setParams, dispatch } = navigation as any;
+
+	const push = (routeName: string, params: any) => {
+		const pushAction = StackActions.push(routeName, params);
+		dispatch(pushAction);
+	};
+
+	const pop = () => {
+		const pushAction = StackActions.pop();
+		dispatch(pushAction);
+	};
+
+	const replace = (routeName: string, params: any) => {
+		const pushAction = StackActions.replace(routeName, params);
+		dispatch(pushAction);
+	};
 
 	const otherParams: any = { ...state.params };
 
 	// Extract internal variables
-	const url = `/${otherParams.__path_url__}`;
+	const url = otherParams.__path_url__ ? `/${otherParams.__path_url__}` : undefined;
 	const search = otherParams.__path_search__;
 
 	// Delete internal flags

src/helpers/preparePaths.ts

@@ -3,6 +3,7 @@ import { NavigatorProps, RouteConfig } from '@bluebase/components';
 
 import { ScreenProps } from '../types';
 import { createNavigatorScreenComponent } from './createNavigatorScreenComponent';
+import get from 'lodash.get';
 import { getNavigatorFn } from './getNavigatorFn';
 
 export interface PreparedNavigatorProps extends NavigatorProps {
@@ -29,16 +30,20 @@ export const preparePaths = (
 
 	// If routes prop is a thunk, resolve it.
 	// Then map it to have new paths
-	const routes = resolveThunk(navigator.routes || [], screenProps).map((r: RouteConfig) => {
-		// Do we have a navigator here? If yes then recurcively prepare its paths as well
-		const resolvedNavigator = r.navigator ? preparePaths(r.navigator, screenProps, BB) : undefined;
-
-		// Do we have a screen here? If yes then resolve the screen component
-		const component = createNavigatorScreenComponent(r, BB);
-
-		// Return the final object
-		return { ...r, navigator: resolvedNavigator, component };
-	});
+	const routes = resolveThunk(get(navigator, 'routes', [] as RouteConfig[]), screenProps).map(
+		(r: RouteConfig) => {
+			// Do we have a navigator here? If yes then recurcively prepare its paths as well
+			const resolvedNavigator = r.navigator
+				? preparePaths(r.navigator, screenProps, BB)
+				: undefined;
+
+			// Do we have a screen here? If yes then resolve the screen component
+			const component = createNavigatorScreenComponent(r, BB);
+
+			// Return the final object
+			return { ...r, navigator: resolvedNavigator, component };
+		}
+	);
 
 	// Merge and return incoming navigator with newer routes
 	return { ...navigator, NavigatorComponent, routes };

yarn.lock

@@ -2622,6 +2622,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.get@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.get/-/lodash.get-4.4.6.tgz#0c7ac56243dae0f9f09ab6f75b29471e2e777240"
+  integrity sha512-E6zzjR3GtNig8UJG/yodBeJeIOtgPkMgsLjDU3CbgCAPC++vJ0eCMnJhVpRZb/ENqEFlov1+3K9TKtY4UdWKtQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.161"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.161.tgz#a21ca0777dabc6e4f44f3d07f37b765f54188b18"
+  integrity sha512-EP6O3Jkr7bXvZZSZYlsgt5DIjiGr0dXP1/jVEwVLTFgg0d+3lWVQkRavYVQszV7dYUwvg0B8R0MBDpcmXg7XIA==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"