@rdyl/react-native-navigator-connect 0.1.3

package/README.md

@@ -0,0 +1,10 @@
+## Installation
+
+```
+$ npm install @rdyl/react-native-connect
+//or
+$ yarn add @rdyl/react-native-connect
+```
+
+## Getting started
+

package/dist/hooks.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigator = void 0;
+const react_1 = require("react");
+const native_1 = require("@react-navigation/native");
+const useNavigator = () => {
+    const navigation = (0, native_1.useNavigation)();
+    const route = (0, native_1.useRoute)();
+    const option = (0, react_1.useMemo)(() => {
+        // @ts-ignore
+        const opt = global === null || global === void 0 ? void 0 : global.$findNavigatorOption(route.name);
+        if (opt) {
+            return opt.option;
+        }
+    }, [route.name]);
+    const push = (0, react_1.useCallback)((name, params) => {
+        navigation.dispatch(native_1.CommonActions.navigate({
+            name,
+            params,
+        }));
+    }, [navigation]);
+    const back = (0, react_1.useCallback)(() => {
+        if (navigation.canGoBack()) {
+            navigation.dispatch(native_1.CommonActions.goBack());
+        }
+    }, [navigation]);
+    const redirect = (0, react_1.useCallback)((name, params) => {
+        // @ts-ignore
+        const opt = global.$findNavigatorOption(name);
+        if (opt) {
+            if (opt.type === "tab") {
+                navigation.dispatch(native_1.TabActions.jumpTo(name, params));
+            }
+            else {
+                navigation.dispatch(native_1.StackActions.replace(name, params));
+            }
+        }
+    }, [navigation]);
+    const setParams = (0, react_1.useCallback)((params = {}) => {
+        navigation.dispatch(Object.assign(Object.assign({}, native_1.CommonActions.setParams(params)), { source: route.key }));
+    }, [navigation, route]);
+    return Object.assign(Object.assign({}, route), { option,
+        push,
+        back,
+        redirect,
+        setParams });
+};
+exports.useNavigator = useNavigator;

package/dist/index.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const native_1 = require("@react-navigation/native");
+const stack_1 = require("@react-navigation/stack");
+const bottom_tabs_1 = require("@react-navigation/bottom-tabs");
+const Tab = (0, bottom_tabs_1.createBottomTabNavigator)();
+const Stack = (0, stack_1.createStackNavigator)();
+const NavigatorConnect = ({ afterEach, stack = {}, tabs = {}, }) => {
+    const navigatorRef = (0, native_1.useNavigationContainerRef)();
+    const [routeName, setRouteName] = (0, react_1.useState)("");
+    const findNavigatorOption = (0, react_1.useCallback)((name) => {
+        const tab = ((tabs === null || tabs === void 0 ? void 0 : tabs.items) || []).find(ele => ele.name === name);
+        if (tab) {
+            return {
+                type: "tab",
+                option: tab,
+            };
+        }
+        const item = ((stack === null || stack === void 0 ? void 0 : stack.items) || []).find(ele => ele.name === name);
+        if (item) {
+            return {
+                type: "stack",
+                option: item,
+            };
+        }
+        return null;
+    }, []);
+    const option = (0, react_1.useMemo)(() => {
+        const opt = findNavigatorOption(routeName);
+        if (opt) {
+            return opt.option;
+        }
+    }, [findNavigatorOption, routeName]);
+    const initialTabName = (0, react_1.useMemo)(() => {
+        const { initial, items = [] } = tabs;
+        if (initial) {
+            return initial;
+        }
+        if (items[0]) {
+            return items[0].name;
+        }
+    }, [tabs]);
+    const initialStackName = (0, react_1.useMemo)(() => {
+        const { initial, items = [] } = stack;
+        if (initial) {
+            return initial;
+        }
+        if (items[0]) {
+            return items[0].name;
+        }
+    }, [tabs]);
+    const TabsNavigator = (0, react_1.useMemo)(() => {
+        return () => (react_1.default.createElement(Tab.Navigator, { initialRouteName: initialTabName }, ((tabs === null || tabs === void 0 ? void 0 : tabs.items) || []).map(ele => {
+            const { component, name, meta: { title = "", tabBarIcon } = {}, } = ele;
+            return (react_1.default.createElement(Tab.Screen, { options: {
+                    headerShown: false,
+                    tabBarLabel: title,
+                    tabBarIcon,
+                    tabBarActiveTintColor: "#333",
+                }, key: name, name: name, component: component }));
+        })));
+    }, [tabs]);
+    (0, react_1.useEffect)(() => {
+        if (option && afterEach) {
+            afterEach(option);
+        }
+    }, [afterEach, option]);
+    (0, react_1.useEffect)(() => {
+        const callback = ({ data }) => {
+            var _a;
+            if (data.action.payload) {
+                const { name } = (_a = data.action) === null || _a === void 0 ? void 0 : _a.payload;
+                setRouteName(name);
+            }
+        };
+        navigatorRef.addListener("__unsafe_action__", callback);
+        return () => navigatorRef.removeListener("__unsafe_action__", callback);
+    }, [navigatorRef.isReady]);
+    (0, react_1.useEffect)(() => {
+        // @ts-ignore
+        global.$findNavigatorOption = findNavigatorOption;
+    }, [findNavigatorOption]);
+    return (react_1.default.createElement(native_1.NavigationContainer, { ref: navigatorRef },
+        react_1.default.createElement(Stack.Navigator, { initialRouteName: initialStackName },
+            react_1.default.createElement(Stack.Screen, { key: "tabs", name: "tabs", options: {
+                    headerShown: false,
+                }, component: TabsNavigator }),
+            ((stack === null || stack === void 0 ? void 0 : stack.items) || []).map(({ component, name }) => (react_1.default.createElement(Stack.Screen, { options: {
+                    headerShown: false,
+                }, key: name, name: name, component: component }))))));
+};
+__exportStar(require("./hooks"), exports);
+exports.default = NavigatorConnect;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@rdyl/react-native-navigator-connect",
+  "version": "0.1.3",
+  "main": "./dist/index.js",
+  "types": "./types/index.d.ts",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "types",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && copyfiles -u 1 src/**/*.d.ts types"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-native": "^0.73.0",
+    "copyfiles": "^2.4.1",
+    "react": "^18.3.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+
+  },
+  "dependencies": {
+    "@react-navigation/bottom-tabs": "^7.0.3",
+    "@react-navigation/native": "^7.0.2",
+    "@react-navigation/stack": "^7.0.2"
+  }
+}

package/types/hooks.d.ts

@@ -0,0 +1,11 @@
+export declare const useNavigator: () => {
+    option: any;
+    push: (name: string, params?: QueryParams) => void;
+    back: () => void;
+    redirect: (name: string, params?: QueryParams) => void;
+    setParams: (params?: QueryParams) => void;
+    key: string;
+    name: string;
+    path?: string;
+    params?: Readonly<object | undefined>;
+};

package/types/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+declare const NavigatorConnect: FC<NavigatorConnectProps>;
+export * from "./hooks";
+export interface NavigatorConnectProps {
+    stack?: NavigatorStack;
+    tabs?: NavigatorTabs;
+    afterEach?(to: NavigatorOption): void;
+}
+export default NavigatorConnect;

package/types/type.d.ts

@@ -0,0 +1,33 @@
+/** @Navigator */
+interface NavigatorOptionMeta {
+  title?: string;
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+}
+
+interface NavigatorOption {
+  name: string;
+  path: string;
+  meta?: NavigatorOptionMeta;
+  isPublic?: boolean;
+  component: React.ComponentType<any>;
+}
+
+interface NavigatorStack {
+  items?: NavigatorOption[];
+  initial?: string;
+}
+
+interface NavigatorTabs extends NavigatorStack {
+  name?: string;
+}
+
+type FindNavigatorOptionType = {
+  type: "tab" | "stack";
+  option: NavigatorOption;
+} | null;
+
+type QueryParams = Record<string, unknown>;