@admin-layout/gluestack-ui-mobile 8.5.7-alpha.0 → 8.5.8-alpha.0

package/src/utils/generateMobileNavigations.ts

@@ -0,0 +1,1434 @@
+import * as fs from 'fs';
+import path from 'path';
+import prettier from 'prettier';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import { exec as execCallback } from 'child_process';
+import { getSortedNavigations } from '@common-stack/client-react/lib/route/react-navigation/get-navigation-utils.js';
+import { getReplacedRouteConfig } from './getReplacedRouteConfig.js';
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const configFilePath = path.join(__dirname, '../layout.json');
+const appNavigationFileName = 'navigation.tsx';
+const mainRoutesFileName = 'main_routes.json';
+const modulesFileName = 'modules.ts';
+const stacksDirPath = 'stack/index.tsx';
+const drawerFilePath = 'drawer/index.tsx';
+const hostDrawerFilePath = 'host_drawer/index.tsx';
+const bottomFilePath = 'bottom/index.tsx';
+const hostBottomFilePath = 'host_bottom/index.tsx';
+
+type IGenerateMobileNavigationsProps = {
+    appDirPath: string;
+    modules: any;
+    initialRouteName?: string;
+    unauthenticatedComponentPath?: string;
+    customTabBarPath?: string;
+    customDrawerPath?: string;
+    customHeaderPath?: string;
+};
+
+export const readJsonFile = (filePath) => {
+    return new Promise((resolve, reject) => {
+        fs.readFile(filePath, 'utf8', (err, data) => {
+            if (err) {
+                return reject(err);
+            }
+            try {
+                const jsonData = JSON.parse(data);
+                resolve(jsonData);
+            } catch (parseErr) {
+                reject(parseErr);
+            }
+        });
+    });
+};
+
+export const getLayoutConfig = async () => {
+    const layoutConfigFileData = await readJsonFile(configFilePath);
+    return layoutConfigFileData;
+};
+
+export class GenerateMobileNavigations {
+    #layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+    #appDirPath: string;
+    #modules: any;
+    #initialRouteName: string;
+    #unauthenticatedComponentPath: string;
+    #customTabBarPath: string;
+    #customDrawerPath: string;
+    #customHeaderPath: string;
+
+    constructor({
+        appDirPath,
+        modules,
+        initialRouteName = '',
+        unauthenticatedComponentPath = null,
+        customTabBarPath = null,
+        customDrawerPath = null,
+        customHeaderPath = null,
+    }: IGenerateMobileNavigationsProps) {
+        this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+        this.#appDirPath = appDirPath;
+        this.#modules = modules;
+        this.#initialRouteName = initialRouteName;
+        this.#unauthenticatedComponentPath = unauthenticatedComponentPath;
+        this.#customTabBarPath = customTabBarPath;
+        this.#customDrawerPath = customDrawerPath;
+        this.#customHeaderPath = customHeaderPath;
+    }
+
+    async #readJsonFile(filePath) {
+        return readJsonFile(filePath);
+    }
+
+    async #getLayoutConfig() {
+        return getLayoutConfig();
+    }
+
+    async #execPromise(command) {
+        return new Promise(function (resolve, reject) {
+            execCallback(command, (error, stdout, stderr) => {
+                if (error) {
+                    return resolve(false);
+                }
+                return resolve(true);
+            });
+        });
+    }
+
+    async #renameFile(file, new_name) {
+        return new Promise((resolve) => {
+            fs.access(file, fs.constants.F_OK, (err) => {
+                if (err) {
+                    resolve(false);
+                }
+
+                return fs.rename(file, new_name, (err) => {
+                    if (err) resolve(false);
+                    resolve(true);
+                });
+            });
+        });
+    }
+
+    async #writeFile(file, content) {
+        return new Promise((resolve) => {
+            return fs.writeFile(file, content, 'utf-8', (err) => {
+                if (err) resolve(false);
+                resolve(true);
+            });
+        });
+    }
+
+    async #makeDir(dirName) {
+        return new Promise((resolve) => {
+            return fs.mkdir(dirName, { recursive: true }, (err) => {
+                if (err) resolve(false);
+                resolve(true);
+            });
+        });
+    }
+
+    async #getModulesRouteConfig({ modules }) {
+        const allFilteredRoutes = [];
+        for (const pkg of modules) {
+            const pkgPath = require.resolve(pkg);
+            const pkgDirPath = path.dirname(pkgPath);
+            const pkgFile = path.join(pkgDirPath, 'routes.json');
+            if (fs.existsSync(pkgFile)) {
+                const fileModuleJSON = await import(pkgFile, { assert: { type: 'json' } });
+                if (fileModuleJSON.default) {
+                    allFilteredRoutes.push([...fileModuleJSON.default]);
+                }
+            }
+        }
+        return allFilteredRoutes;
+    }
+
+    async #resolveImportPath(routeConfig, importPath) {
+        // Remove the '$.' part from the importPath to get the path within the JSON object
+        const path = importPath?.replace('$.', '') ?? null;
+
+        // Split the path into parts for nested property access
+        const parts = path?.split('.') ?? [];
+
+        // Traverse the routeConfig object to get the actual value
+        let value = routeConfig;
+        for (let part of parts) {
+            if (value && Object.prototype.hasOwnProperty.call(value, part)) {
+                value = value[part];
+            } else {
+                // Return null or handle missing path
+                return null;
+            }
+        }
+
+        return value;
+    }
+
+    async #generateAppRoutesJson({ appDirPath }) {
+        const parentDirPath = path.dirname(appDirPath);
+        const parentDirName = path.basename(parentDirPath);
+        const appDirName = path.basename(appDirPath);
+        // const tsFile = 'src/compute.ts';
+        // const outputDir = 'src/app';
+        const tsFile = `${parentDirName}/compute.ts`;
+        const outputDir = `${parentDirName}/${appDirName}`;
+        const tscCommand = `tsc ${tsFile} --outDir ${outputDir} --target es6 --module esnext --jsx react  --allowSyntheticDefaultImports true --moduleResolution node --esModuleInterop true --forceConsistentCasingInFileNames true  --skipLibCheck true`;
+        const mainRoutesJsFile = path.join(appDirPath, '/compute.js');
+        const mainRoutesMjsFile = path.join(appDirPath, '/compute.mjs');
+        const outputFile = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const allFilteredRoutes = [];
+        try {
+            const execResult = await this.#execPromise(tscCommand);
+            if (execResult && fs.existsSync(mainRoutesJsFile)) {
+                const jsFiledata = fs.readFileSync(mainRoutesJsFile, 'utf8');
+                const noCommentsData = jsFiledata
+                    .replace(/\/\/.*$/gm, '') // Remove single-line comments
+                    .replace(/\/\*[\s\S]*?\*\//g, ''); // Remove multi-line comments
+                const noWhitespaceJsData = noCommentsData.replace(/\s+/g, '');
+                if (noWhitespaceJsData?.length == 0) {
+                    const outPutDirName = path.dirname(outputFile);
+                    const isDirCreated = await this.#makeDir(outPutDirName);
+                    if (isDirCreated) {
+                        const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                        if (writeFileResponse) {
+                            return true;
+                        } else return false;
+                    } else return false;
+                } else {
+                    const newFilePath = mainRoutesJsFile.replace('.js', '.mjs');
+                    const renameFileResponse = await this.#renameFile(mainRoutesJsFile, newFilePath);
+                    if (renameFileResponse) {
+                        if (fs.existsSync(mainRoutesMjsFile)) {
+                            // Dynamically import the JS file assuming it exports filteredRoutes
+                            const module = await import(mainRoutesMjsFile); // file is already absolute
+                            if (module.filteredRoutes) {
+                                const newRoutes = module.filteredRoutes.map((filteredRoute) => {
+                                    const routConfig: any = Object.values(filteredRoute)[0];
+                                    const importPath = routConfig.component
+                                        .toString()
+                                        .match(/import\(['"](.*)['"]\)/)[1];
+                                    // routConfig.componentPath = `../.${importPath}`;
+                                    routConfig.componentPath = `.${importPath}.js`;
+                                    return { [routConfig.path]: routConfig };
+                                });
+                                allFilteredRoutes.push(...newRoutes);
+                                const writeFileResponse = await this.#writeFile(
+                                    outputFile,
+                                    JSON.stringify(allFilteredRoutes, null, 2),
+                                );
+
+                                if (writeFileResponse) {
+                                    fs.unlinkSync(mainRoutesMjsFile);
+                                    return true;
+                                } else return false;
+                            }
+                        } else return false;
+                    } else return false;
+                }
+            } else {
+                const outPutDirName = path.dirname(outputFile);
+                const isDirCreated = await this.#makeDir(outPutDirName);
+                if (isDirCreated) {
+                    const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                    if (writeFileResponse) {
+                        return true;
+                    } else return false;
+                } else return false;
+            }
+            // return true;
+        } catch (error) {
+            console.error(`exec error: ${error.message}`);
+            const outPutDirName = path.dirname(outputFile);
+            const isDirCreated = await this.#makeDir(outPutDirName);
+            if (isDirCreated) {
+                const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                if (writeFileResponse) {
+                    return true;
+                } else return false;
+            } else return false;
+        }
+    }
+
+    async #generateImportStatements({ modules, initialRouteName }) {
+        try {
+            const layoutSettings = this.#layoutSettings;
+            const layoutConfigFileData = await this.#getLayoutConfig();
+            const hostRouteConfig = layoutConfigFileData['host-bottom'];
+            const hostRouteKey = Object.keys(hostRouteConfig)[1];
+            const hostLayout = hostRouteConfig[hostRouteKey];
+
+            let importStatements = '';
+            let moduleNames = '';
+            let moduleRouteConfig = '';
+            let moduleNumber = 0;
+            importStatements += `import  React,{useState} from 'react';\n`;
+            importStatements += `import {Feature} from '@common-stack/client-react/lib/connector/connector.native.js';\n`;
+            importStatements += `import { useSelector, useDispatch } from 'react-redux';\n`;
+            importStatements += `import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';\n`;
+            importStatements += `import {layoutRouteConfig,getReplacedRouteConfig } from '@admin-layout/gluestack-ui-mobile';\n`;
+            importStatements += `import mainRouteConfig from './main_routes.json';\n`;
+
+            modules?.forEach((packageName) => {
+                moduleNumber++;
+                importStatements += `import module${moduleNumber} from '${packageName}';\n`;
+                // moduleNames += `${moduleName}, `;
+                moduleNames += `module${moduleNumber}, `;
+                moduleRouteConfig += `...[module${moduleNumber}?.routeConfig], `;
+            });
+
+            //const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+
+            let classStructure = `
+     const features = new Feature(
+        ${moduleNames.trim()}
+      );
+
+      const mainAppRoutes = mainRouteConfig || [];
+
+      const appRoutes = [...[mainAppRoutes],${moduleRouteConfig}]?.filter((rc)=>rc.length)??[];
+
+      const featureRouteConfig = appRoutes?.flat(1)??features?.routeConfig;
+      features.routeConfig = featureRouteConfig;
+
+      export  function useGetModules(){
+       const dispatch = useDispatch();
+       const defaultSettings = useSelector((state:any) => state.settings);
+       const initialRouteName = '${initialRouteName}';
+       const layoutSettings = ${JSON.stringify({ ...layoutSettings, hostLayout: hostLayout.key })}
+       const [appRouteConfig, setAppRouteConfig]:any = useState(null);
+
+         React.useEffect(() => {
+                  setDefalutSettings();
+          }, []);
+
+
+      const setDefalutSettings = React.useCallback(()=>{
+          const config: any = {
+              ...defaultSettings,
+              ...layoutSettings,
+          };
+          dispatch({
+            type: CHANGE_SETTINGS_ACTION,
+            payload: config,
+          });
+        },[]);
+
+       React.useEffect(() => {
+          if (defaultSettings) {
+              const settingObj: any = { ...defaultSettings };
+              const layoutType: any = settingObj.layout;
+              const {replacedConfiguredRouteConfig} = getReplacedRouteConfig({
+                layoutType: layoutType,
+                routeConfig: appRoutes,
+                layoutConfigData: layoutRouteConfig,
+                initialRouteName,
+              });
+              if(replacedConfiguredRouteConfig){
+                const moduleRouteConfigObject = Object.assign({}, ...replacedConfiguredRouteConfig?.flat(1)??[]);        
+                const replacedRouteConfig = Object.fromEntries(Object.entries(moduleRouteConfigObject));
+                const appReplacedRouteConfig = replacedRouteConfig ? Object.keys(replacedRouteConfig)?.map((k)=>({[k]:replacedRouteConfig[k]})) : [];
+
+                if (appReplacedRouteConfig) {
+                  const hostRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                  const layoutRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || !key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                  const featureRouteConfig = defaultSettings?.layout == 'host-bottom' ? hostRouteConfig:layoutRouteConfig;
+                  // features.routeConfig = featureRouteConfig;
+                  setAppRouteConfig(featureRouteConfig);
+                }
+              }
+          }
+        }, [defaultSettings]);
+
+       return {appRouteConfig};
+      }
+
+      export default features;
+    `.replace(/,(\s*)$/, ''); // Removes trailing comma
+
+            // Use Prettier to format the code
+            classStructure = prettier.format(classStructure, { parser: 'babel' });
+
+            const appFeatures = importStatements + '\n' + classStructure;
+
+            return { appFeatures };
+        } catch (err) {
+            console.error('Error:', err);
+            return false;
+        }
+    }
+
+    async #generateModulesTsFile({ appDirPath, modules, initialRouteName }) {
+        const moduleTsFile = path.join(appDirPath, `/${modulesFileName}`);
+        const imports: any = await this.#generateImportStatements({ modules, initialRouteName });
+        const { appFeatures } = imports;
+        if (appFeatures) {
+            const writeFileResponse = await this.#writeFile(moduleTsFile, appFeatures);
+            if (writeFileResponse) return true;
+            else return false;
+        }
+        return false;
+    }
+
+    async #generateStackNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const stackDirPath = path.join(appDirPath, `/${stacksDirPath}`);
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = layoutSettings?.layout || 'bottom';
+        const layoutRouteConfig = layoutConfigFileData[layoutType];
+        const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
+        const appLayout = layoutRouteConfig[layoutRouteKey];
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+
+        const { replacedNavigationRouteConfig: routeConfig } = getReplacedRouteConfig({
+            layoutType: layoutType,
+            routeConfig: allRoutes,
+            layoutConfigData: layoutConfigFileData,
+            initialRouteName: initialRouteName,
+        });
+        const keyToReplace = appLayout.key || 'bottom_tab';
+        const stackRouteConfig =
+            routeConfig
+                ?.map(
+                    (rArray) =>
+                        rArray
+                            ?.map((r) => {
+                                const route = r[Object.keys(r)[0]];
+                                const path = route.path;
+                                const isExcluded =
+                                    path === '/' ||
+                                    path.startsWith(`/${keyToReplace}`) ||
+                                    path.startsWith(`/:orgName/${keyToReplace}`) ||
+                                    path.startsWith('/host_tab') ||
+                                    path.startsWith('/:orgName/host_tab');
+                                return isExcluded ? false : route;
+                            })
+                            ?.filter((route) => route !== false) ?? [], // Filter out false values
+                )
+                ?.filter((subArray) => subArray.length > 0) ?? [];
+
+        let moduleNumber = 0;
+        let importStatements = '';
+        let moduleContent = '';
+        let moduleRender = '';
+        let stackNavigator = '';
+        let customHeaderNames = '';
+        let customHeaderPaths = '';
+        let customUnauthenticatedComponentPaths = '';
+        let customUnauthenticatedComponentNames = '';
+        const regex = /\.(tsx|ts|jsx|js)$/i;
+
+        importStatements += `import * as React from 'react';\n`;
+        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+
+        if (unauthenticatedComponentPath)
+            importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
+
+        for (const pkg of stackRouteConfig) {
+            moduleContent += `<Stack.Group>`;
+            for (const pkgRouteConfig of pkg) {
+                moduleNumber++;
+                let customHeaderName = null;
+                const customHeaderComponentPath = await this.#resolveImportPath(
+                    pkgRouteConfig,
+                    pkgRouteConfig?.customHeader?.component,
+                );
+                if (
+                    pkgRouteConfig?.customHeader &&
+                    Object.keys(pkgRouteConfig?.customHeader)?.length &&
+                    customHeaderComponentPath
+                ) {
+                    customHeaderPaths += `${customHeaderComponentPath},`;
+                    customHeaderName =
+                        `${pkgRouteConfig?.customHeader?.name ?? `CustomHeader${moduleNumber}`}` ||
+                        `CustomHeader${moduleNumber}`;
+                    customHeaderNames += `${customHeaderName},`;
+                }
+
+                let customUnauthenticatedComponentName = null;
+                const customUnauthenticatedComponentPath = await this.#resolveImportPath(
+                    pkgRouteConfig,
+                    pkgRouteConfig?.unauthenticatedComponent,
+                );
+                if (pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath) {
+                    customUnauthenticatedComponentPaths += `${customUnauthenticatedComponentPath},`;
+                    customUnauthenticatedComponentName = `UnauthenticatedComponent${moduleNumber}`;
+                    customUnauthenticatedComponentNames += `${customUnauthenticatedComponentName},`;
+                }
+
+                importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
+                const options = JSON.stringify({ ...(pkgRouteConfig?.props?.options || {}) });
+                moduleContent += `<Stack.Screen
+               key="${pkgRouteConfig.key}"
+               name="${pkgRouteConfig.name}"
+               initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
+                options={{...${options},...{${
+                    pkgRouteConfig?.customHeader &&
+                    Object.keys(pkgRouteConfig.customHeader)?.length &&
+                    customHeaderComponentPath
+                        ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                              pkgRouteConfig?.customHeader?.props ?? '',
+                          )}}  />`
+                        : ''
+                }}}}
+             >{(props:any) => <AuthWrapper 
+                       auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                       component={<Component${moduleNumber} {...props}   />}
+                       ${
+                           pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
+                               ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
+                               : unauthenticatedComponentPath
+                               ? 'unauthenticatedComponent={<UnauthenticatedComponent/>}'
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withLifeCycle
+                               ? `withLifeCycle={${JSON.stringify(pkgRouteConfig?.withLifeCycle)}}`
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withInteraction
+                               ? `withInteraction={${JSON.stringify(pkgRouteConfig?.withInteraction)}}`
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withLifeCycleInteraction
+                               ? `withLifeCycleInteraction={${JSON.stringify(
+                                     pkgRouteConfig?.withLifeCycleInteraction,
+                                 )}}`
+                               : ''
+                       }
+                        />}</Stack.Screen>`;
+            }
+            if (customHeaderPaths && customHeaderPaths?.length) {
+                const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
+                const uniqueHeaderPaths = [...new Set(customHeaderPaths.split(','))]?.filter((str) => str?.length);
+                uniqueHeaderPaths?.forEach(function (hPath, i) {
+                    const impHeaderName = uniqueHeaderNames?.[i] ?? `customHeader${i}`;
+                    importStatements += `import ${impHeaderName} from '${hPath}';\n`;
+                });
+            }
+
+            if (customUnauthenticatedComponentPaths && customUnauthenticatedComponentPaths?.length) {
+                const uniqueUnauthenticatedComponentNames = [
+                    ...new Set(customUnauthenticatedComponentNames.split(',')),
+                ]?.filter((str) => str?.length);
+                const uniqueUnauthenticatedComponentPaths = [
+                    ...new Set(customUnauthenticatedComponentPaths.split(',')),
+                ]?.filter((str) => str?.length);
+                uniqueUnauthenticatedComponentPaths?.forEach(function (unCompPath, i) {
+                    const impUnauthenticatedName =
+                        uniqueUnauthenticatedComponentNames?.[i] ?? `UnauthenticatedComponent${i}`;
+                    importStatements += `import ${impUnauthenticatedName} from '${unCompPath}';\n`;
+                });
+            }
+
+            moduleContent += `</Stack.Group>`;
+            moduleRender = `export default ({Stack,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        }
+        stackNavigator = importStatements + '\n' + moduleRender;
+        if (stackNavigator) {
+            let stackNavigation = stackNavigator;
+            stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
+            const stackDirName = path.dirname(stackDirPath);
+            const isDirCreated = await this.#makeDir(stackDirName);
+            if (isDirCreated) {
+                const writeFileResponse = await this.#writeFile(stackDirPath, stackNavigation);
+                if (writeFileResponse) return true;
+                else return false;
+            } else return false;
+        } else return false;
+    }
+
+    async #generateDrawerNavigationsFile({ drawerConfig, unauthenticatedComponentPath, drawerDirPath }) {
+        let moduleNumber = 0;
+        let importStatements = '';
+        let moduleContent = '';
+        let moduleRender = '';
+        let moduleNavigation = '';
+        let icons = '';
+        let customHeaderNames = '';
+        let customHeaderPaths = '';
+        let customUnauthenticatedComponentPaths = '';
+        let customUnauthenticatedComponentNames = '';
+        const regex = /\.(tsx|ts|jsx|js)$/i;
+
+        importStatements += `import * as React from 'react';\n`;
+        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+
+        if (unauthenticatedComponentPath)
+            importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
+
+        for (const pkgRouteConfig of drawerConfig) {
+            moduleNumber++;
+            if (pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name) {
+                icons += `${pkgRouteConfig?.icon?.name},`;
+            }
+            let customHeaderName = null;
+            const customHeaderComponentPath = await this.#resolveImportPath(
+                pkgRouteConfig,
+                pkgRouteConfig?.customHeader?.component,
+            );
+            if (
+                pkgRouteConfig?.customHeader &&
+                Object.keys(pkgRouteConfig?.customHeader)?.length &&
+                customHeaderComponentPath
+            ) {
+                customHeaderPaths += `${customHeaderComponentPath},`;
+                customHeaderName =
+                    `${pkgRouteConfig?.customHeader?.name ?? `CustomHeader${moduleNumber}`}` ||
+                    `CustomHeader${moduleNumber}`;
+                customHeaderNames += `${customHeaderName},`;
+            }
+            let customUnauthenticatedComponentName = null;
+            const customUnauthenticatedComponentPath = await this.#resolveImportPath(
+                pkgRouteConfig,
+                pkgRouteConfig?.unauthenticatedComponent,
+            );
+            if (pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath) {
+                customUnauthenticatedComponentPaths += `${customUnauthenticatedComponentPath},`;
+                customUnauthenticatedComponentName = `UnauthenticatedComponent${moduleNumber}`;
+                customUnauthenticatedComponentNames += `${customUnauthenticatedComponentName},`;
+            }
+
+            const options = JSON.stringify({ ...(pkgRouteConfig?.props?.options || {}) });
+            importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
+            moduleContent += `<Drawer.Screen
+                  key="${pkgRouteConfig.key}"
+                  name="${pkgRouteConfig.name}"
+                  //component={Component${moduleNumber}}
+                  initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
+                  options={{...${options},...{${
+                pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
+                    ? `drawerIcon: ({ color, size }: { color: any,size:any }) => <${pkgRouteConfig?.icon?.name} name="${
+                          pkgRouteConfig?.icon?.props?.name ?? 'home'
+                      }" size={${pkgRouteConfig?.icon?.props?.size ?? `size`}} color={${
+                          pkgRouteConfig?.icon?.props?.color ?? 'color'
+                      }} />`
+                    : ''
+            }
+                  ${
+                      pkgRouteConfig?.customHeader &&
+                      Object.keys(pkgRouteConfig.customHeader)?.length &&
+                      customHeaderComponentPath
+                          ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                                pkgRouteConfig?.customHeader?.props ?? '',
+                            )}}  />`
+                          : ''
+                  }}}}
+                >{(props:any) => <AuthWrapper 
+                           auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                           component={<Component${moduleNumber} {...props}   />}
+                           ${
+                               pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
+                                   ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
+                                   : unauthenticatedComponentPath
+                                   ? 'unauthenticatedComponent={<UnauthenticatedComponent/>}'
+                                   : ''
+                           }
+                           ${
+                               pkgRouteConfig?.withLifeCycle
+                                   ? `withLifeCycle={${JSON.stringify(pkgRouteConfig?.withLifeCycle)}}`
+                                   : ''
+                           }
+                           ${
+                               pkgRouteConfig?.withInteraction
+                                   ? `withInteraction={${JSON.stringify(pkgRouteConfig?.withInteraction)}}`
+                                   : ''
+                           }
+                           ${
+                               pkgRouteConfig?.withLifeCycleInteraction
+                                   ? `withLifeCycleInteraction={${JSON.stringify(
+                                         pkgRouteConfig?.withLifeCycleInteraction,
+                                     )}}`
+                                   : ''
+                           }
+                            />}</Drawer.Screen>`;
+        }
+        if (icons && icons?.length) {
+            const uniqueIcons = [...new Set(icons.split(','))].join(',');
+            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
+        }
+
+        if (customHeaderPaths && customHeaderPaths?.length) {
+            const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
+            const uniqueHeaderPaths = [...new Set(customHeaderPaths.split(','))]?.filter((str) => str?.length);
+            uniqueHeaderPaths?.forEach(function (hPath, i) {
+                const impHeaderName = uniqueHeaderNames?.[i] ?? `customHeader${i}`;
+                importStatements += `import ${impHeaderName} from '${hPath}';\n`;
+            });
+        }
+
+        if (customUnauthenticatedComponentPaths && customUnauthenticatedComponentPaths?.length) {
+            const uniqueUnauthenticatedComponentNames = [
+                ...new Set(customUnauthenticatedComponentNames.split(',')),
+            ]?.filter((str) => str?.length);
+            const uniqueUnauthenticatedComponentPaths = [
+                ...new Set(customUnauthenticatedComponentPaths.split(',')),
+            ]?.filter((str) => str?.length);
+            uniqueUnauthenticatedComponentPaths?.forEach(function (unCompPath, i) {
+                const impUnauthenticatedName =
+                    uniqueUnauthenticatedComponentNames?.[i] ?? `UnauthenticatedComponent${i}`;
+                importStatements += `import ${impUnauthenticatedName} from '${unCompPath}';\n`;
+            });
+        }
+
+        moduleRender = `export default ({Drawer,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        moduleNavigation = importStatements + '\n' + moduleRender;
+
+        const drawerNavigator = moduleNavigation;
+        if (drawerNavigator) {
+            let drawerNavigation = drawerNavigator;
+            drawerNavigation = prettier.format(drawerNavigation, { parser: 'babel' });
+            const drawerDirName = path.dirname(drawerDirPath);
+            const isDirCreated = await this.#makeDir(drawerDirName);
+            if (isDirCreated) {
+                const writeFileResponse = await this.#writeFile(drawerDirPath, drawerNavigation);
+                if (writeFileResponse) return true;
+                else return false;
+            } else return false;
+        }
+        return false;
+    }
+
+    async #generateDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
+        const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
+
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = 'side';
+        const layoutRouteConfig = layoutConfigFileData[layoutType];
+        const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
+        const appLayout = layoutRouteConfig[layoutRouteKey];
+        const hostRouteConfig = layoutConfigFileData['host-bottom'];
+        const hostRouteKey = Object.keys(hostRouteConfig)[1];
+        const hostLayout = hostRouteConfig[hostRouteKey];
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+        const { replacedNavigationRouteConfig: routeConfig } = getReplacedRouteConfig({
+            layoutType: layoutType,
+            routeConfig: allRoutes,
+            layoutConfigData: layoutConfigFileData,
+            initialRouteName: initialRouteName,
+        });
+        const keyToReplace = appLayout.key || 'bottom_tab';
+        const keyToReplaceHost = hostLayout.key || 'host_tab';
+        const moduleRouteConfigObject = Object.assign({}, ...(routeConfig?.flat(1) ?? []));
+        const configuredRoutes = await getSortedNavigations('/', moduleRouteConfigObject);
+        const layoutBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplace);
+        const hostBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplaceHost);
+
+        const drawerConfig =
+            layoutBottomTabRouteConfig?.[0]?.children?.sort((a, b) => {
+                if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                if (b?.props?.options?.priority === undefined) return -1;
+                return a?.props?.options?.priority - b?.props?.options?.priority;
+            }) ?? [];
+        const hostDrawerConfig =
+            hostBottomTabRouteConfig?.[0]?.children?.sort((a, b) => {
+                if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                if (b?.props?.options?.priority === undefined) return -1;
+                return a?.props?.options?.priority - b?.props?.options?.priority;
+            }) ?? [];
+
+        if (layoutSettings?.layout == 'side') {
+            if (drawerConfig) {
+                const drawerNavigation = await this.#generateDrawerNavigationsFile({
+                    drawerConfig: drawerConfig,
+                    unauthenticatedComponentPath,
+                    drawerDirPath: drawerDirPath,
+                });
+                if (drawerNavigation)
+                    await this.#generateDrawerNavigationsFile({
+                        drawerConfig: hostDrawerConfig,
+                        unauthenticatedComponentPath,
+                        drawerDirPath: hostDirPath,
+                    });
+                return true;
+            } else {
+                if (hostDrawerConfig) {
+                    const isDrawerGenerated = await this.#generateDrawerNavigationsFile({
+                        drawerConfig: hostDrawerConfig,
+                        unauthenticatedComponentPath,
+                        drawerDirPath: hostDirPath,
+                    });
+                    return isDrawerGenerated;
+                } else return false;
+            }
+        } else return false;
+    }
+
+    async #generateBottomTabNavigationsFile({
+        bottomTabConfig,
+        unauthenticatedComponentPath,
+        bottomDirPath,
+        mixLayout = null,
+    }) {
+        let moduleNumber = 0;
+        let importStatements = '';
+        let moduleContent = '';
+        let moduleRender = '';
+        let moduleNavigation = '';
+        let icons = '';
+        let customHeaderNames = '';
+        let customHeaderPaths = '';
+        let customUnauthenticatedComponentPaths = '';
+        let customUnauthenticatedComponentNames = '';
+
+        const regex = /\.(tsx|ts|jsx|js)$/i;
+
+        importStatements += `import * as React from 'react';\n`;
+        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+
+        if (unauthenticatedComponentPath)
+            importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
+
+        for (const pkgRouteConfig of bottomTabConfig) {
+            moduleNumber++;
+            if (pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name) {
+                icons += `${pkgRouteConfig?.icon?.name},`;
+            }
+
+            let customHeaderName = null;
+            const customHeaderComponentPath = await this.#resolveImportPath(
+                pkgRouteConfig,
+                pkgRouteConfig?.customHeader?.component,
+            );
+            if (
+                pkgRouteConfig?.customHeader &&
+                Object.keys(pkgRouteConfig?.customHeader)?.length &&
+                customHeaderComponentPath
+            ) {
+                customHeaderPaths += `${customHeaderComponentPath},`;
+                customHeaderName =
+                    `${pkgRouteConfig?.customHeader?.name ?? `CustomHeader${moduleNumber}`}` ||
+                    `CustomHeader${moduleNumber}`;
+                customHeaderNames += `${customHeaderName},`;
+            }
+
+            let customUnauthenticatedComponentName = null;
+            const customUnauthenticatedComponentPath = await this.#resolveImportPath(
+                pkgRouteConfig,
+                pkgRouteConfig?.unauthenticatedComponent,
+            );
+            if (pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath) {
+                customUnauthenticatedComponentPaths += `${customUnauthenticatedComponentPath},`;
+                customUnauthenticatedComponentName = `UnauthenticatedComponent${moduleNumber}`;
+                customUnauthenticatedComponentNames += `${customUnauthenticatedComponentName},`;
+            }
+
+            const options = JSON.stringify(
+                {
+                    ...pkgRouteConfig?.props?.options,
+                    headerShown: mixLayout ? false : pkgRouteConfig?.props?.options?.headerShown,
+                } || { headerShown: mixLayout ? false : true },
+            );
+            importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
+            moduleContent += `<Tab.Screen
+          key="${pkgRouteConfig.key}"
+          name="${pkgRouteConfig.name}"
+          //component={Component${moduleNumber}}
+          initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
+          options={{...${options},...{${
+                pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
+                    ? `tabBarIcon: ({ color }: { color: any }) => <${pkgRouteConfig?.icon?.name} name="${
+                          pkgRouteConfig?.icon?.props?.name ?? 'home'
+                      }" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${
+                          pkgRouteConfig?.icon?.props?.color ?? 'color'
+                      }} />`
+                    : ''
+            }
+           ${
+               pkgRouteConfig?.customHeader &&
+               Object.keys(pkgRouteConfig.customHeader)?.length &&
+               customHeaderComponentPath
+                   ? `,header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                         pkgRouteConfig?.customHeader?.props ?? '',
+                     )}}  />`
+                   : ''
+           }
+           }}}
+        >{(props:any) => <AuthWrapper 
+                       auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                       component={<Component${moduleNumber} {...props}   />}
+                       ${
+                           pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
+                               ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
+                               : unauthenticatedComponentPath
+                               ? 'unauthenticatedComponent={<UnauthenticatedComponent/>}'
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withLifeCycle
+                               ? `withLifeCycle={${JSON.stringify(pkgRouteConfig?.withLifeCycle)}}`
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withInteraction
+                               ? `withInteraction={${JSON.stringify(pkgRouteConfig?.withInteraction)}}`
+                               : ''
+                       }
+                       ${
+                           pkgRouteConfig?.withLifeCycleInteraction
+                               ? `withLifeCycleInteraction={${JSON.stringify(
+                                     pkgRouteConfig?.withLifeCycleInteraction,
+                                 )}}`
+                               : ''
+                       }
+                        />}
+        </Tab.Screen>`;
+        }
+
+        if (icons && icons?.length) {
+            const uniqueIcons = [...new Set(icons.split(','))].join(',');
+            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
+        }
+
+        if (customHeaderPaths && customHeaderPaths?.length) {
+            const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
+            const uniqueHeaderPaths = [...new Set(customHeaderPaths.split(','))]?.filter((str) => str?.length);
+            uniqueHeaderPaths?.forEach(function (hPath, i) {
+                const impHeaderName = uniqueHeaderNames?.[i] ?? `customHeader${i}`;
+                importStatements += `import ${impHeaderName} from '${hPath}';\n`;
+            });
+        }
+
+        if (customUnauthenticatedComponentPaths && customUnauthenticatedComponentPaths?.length) {
+            const uniqueUnauthenticatedComponentNames = [
+                ...new Set(customUnauthenticatedComponentNames.split(',')),
+            ]?.filter((str) => str?.length);
+            const uniqueUnauthenticatedComponentPaths = [
+                ...new Set(customUnauthenticatedComponentPaths.split(',')),
+            ]?.filter((str) => str?.length);
+            uniqueUnauthenticatedComponentPaths?.forEach(function (unCompPath, i) {
+                const impUnauthenticatedName =
+                    uniqueUnauthenticatedComponentNames?.[i] ?? `UnauthenticatedComponent${i}`;
+                importStatements += `import ${impUnauthenticatedName} from '${unCompPath}';\n`;
+            });
+        }
+
+        moduleRender = `export default ({Tab,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        moduleNavigation = importStatements + '\n' + moduleRender;
+        const bottomTabNavigator = moduleNavigation;
+        if (bottomTabNavigator) {
+            let bottomTabNavigation = bottomTabNavigator;
+            bottomTabNavigation = prettier.format(bottomTabNavigation, { parser: 'babel' });
+            const bottomDirName = path.dirname(bottomDirPath);
+            const isDirCreated = await this.#makeDir(bottomDirName);
+            if (isDirCreated) {
+                const writeFileResponse = await this.#writeFile(bottomDirPath, bottomTabNavigation);
+                if (writeFileResponse) return true;
+                else return false;
+            } else return false;
+        }
+        return false;
+    }
+
+    async #generateBottomTabNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const bottomDirPath = path.join(appDirPath, `/${bottomFilePath}`);
+        const hostBottomDirPath = path.join(appDirPath, `/${hostBottomFilePath}`);
+
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = layoutSettings?.layout ?? 'bottom';
+        const layoutRouteConfig = layoutConfigFileData[layoutType];
+        const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
+        const appLayout = layoutRouteConfig[layoutRouteKey];
+        const hostRouteConfig = layoutConfigFileData['host-bottom'];
+        const hostRouteKey = Object.keys(hostRouteConfig)[1];
+        const hostLayout = hostRouteConfig[hostRouteKey];
+        const mixLayoutRouteKey = Object.keys(layoutRouteConfig)?.[2] || null;
+        const mixLayout = mixLayoutRouteKey ? layoutRouteConfig[mixLayoutRouteKey] : null;
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+
+        const { replacedNavigationRouteConfig: routeConfig } = getReplacedRouteConfig({
+            layoutType: layoutType,
+            routeConfig: allRoutes,
+            layoutConfigData: layoutConfigFileData,
+            initialRouteName: initialRouteName,
+        });
+        const keyToReplace = appLayout.key || 'bottom_tab';
+        const keyToReplaceHost = hostLayout.key || 'host_tab';
+        const moduleRouteConfigObject = Object.assign({}, ...(routeConfig?.flat(1) ?? []));
+        const configuredRoutes = await getSortedNavigations('/', moduleRouteConfigObject);
+        const layoutBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplace);
+        const hostBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplaceHost);
+
+        const bottomTabConfig =
+            layoutBottomTabRouteConfig?.[0]?.children?.sort((a, b) => {
+                if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                if (b?.props?.options?.priority === undefined) return -1;
+                return a?.props?.options?.priority - b?.props?.options?.priority;
+            }) ?? [];
+        const hostBottomTabConfig =
+            hostBottomTabRouteConfig?.[0]?.children?.sort((a, b) => {
+                if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                if (b?.props?.options?.priority === undefined) return -1;
+                return a?.props?.options?.priority - b?.props?.options?.priority;
+            }) ?? [];
+        if (layoutType == 'bottom' || layoutType == 'mixSide') {
+            if (bottomTabConfig) {
+                const drawerNavigation = await this.#generateBottomTabNavigationsFile({
+                    bottomTabConfig: bottomTabConfig,
+                    unauthenticatedComponentPath,
+                    bottomDirPath: bottomDirPath,
+                    mixLayout,
+                });
+                if (drawerNavigation)
+                    await this.#generateBottomTabNavigationsFile({
+                        bottomTabConfig: hostBottomTabConfig,
+                        unauthenticatedComponentPath,
+                        bottomDirPath: hostBottomDirPath,
+                        mixLayout,
+                    });
+                return true;
+            } else {
+                if (hostBottomTabConfig) {
+                    const isHostGenerated = await this.#generateBottomTabNavigationsFile({
+                        bottomTabConfig: hostBottomTabConfig,
+                        unauthenticatedComponentPath,
+                        bottomDirPath: hostBottomDirPath,
+                        mixLayout,
+                    });
+                    return isHostGenerated;
+                } else return false;
+            }
+        } else return false;
+    }
+
+    async #generateBottomTabDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const bottomDirPath = path.join(appDirPath, `/${bottomFilePath}`);
+        const hostBottomDirPath = path.join(appDirPath, `/${hostBottomFilePath}`);
+        const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
+        const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
+
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = layoutSettings?.layout ?? 'bottom';
+        const layoutRouteConfig = layoutConfigFileData[layoutType];
+        const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
+        const appLayout = layoutRouteConfig[layoutRouteKey];
+        const hostRouteConfig = layoutConfigFileData['host-bottom'];
+        const hostRouteKey = Object.keys(hostRouteConfig)[1];
+        const hostLayout = hostRouteConfig[hostRouteKey];
+        const mixLayoutRouteKey = Object.keys(layoutRouteConfig)?.[2] || null;
+        const mixLayout = mixLayoutRouteKey ? layoutRouteConfig[mixLayoutRouteKey] : null;
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+
+        const { replacedNavigationRouteConfig: routeConfig } = getReplacedRouteConfig({
+            layoutType: layoutType,
+            routeConfig: allRoutes,
+            layoutConfigData: layoutConfigFileData,
+            initialRouteName: initialRouteName,
+        });
+        const keyToReplace = appLayout.key || 'bottom_tab';
+        const keyToReplaceHost = hostLayout.key || 'host_tab';
+        const moduleRouteConfigObject = Object.assign({}, ...(routeConfig?.flat(1) ?? []));
+        const configuredRoutes = await getSortedNavigations('/', moduleRouteConfigObject);
+        const layoutBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplace);
+        const hostBottomTabRouteConfig = configuredRoutes?.[0]?.children?.filter((r) => r?.key == keyToReplaceHost);
+
+        const bottomTabConfig =
+            layoutBottomTabRouteConfig?.[0]?.children
+                ?.filter((r) => !r?.side)
+                ?.sort((a, b) => {
+                    if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                    if (b?.props?.options?.priority === undefined) return -1;
+                    return a?.props?.options?.priority - b?.props?.options?.priority;
+                }) ?? [];
+        const hostBottomTabConfig =
+            hostBottomTabRouteConfig?.[0]?.children
+                ?.filter((r) => !r?.side)
+                ?.sort((a, b) => {
+                    if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                    if (b?.props?.options?.priority === undefined) return -1;
+                    return a?.props?.options?.priority - b?.props?.options?.priority;
+                }) ?? [];
+
+        const drawerConfig =
+            layoutBottomTabRouteConfig?.[0]?.children
+                ?.filter((r) => r?.side)
+                ?.sort((a, b) => {
+                    if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                    if (b?.props?.options?.priority === undefined) return -1;
+                    return a?.props?.options?.priority - b?.props?.options?.priority;
+                }) ?? [];
+        const hostDrawerConfig =
+            hostBottomTabRouteConfig?.[0]?.children
+                ?.filter((r) => r?.side)
+                ?.sort((a, b) => {
+                    if (a?.props?.options?.priority === undefined) return 1; // Push items with missing 'id' to the end
+                    if (b?.props?.options?.priority === undefined) return -1;
+                    return a?.props?.options?.priority - b?.props?.options?.priority;
+                }) ?? [];
+
+        if (bottomTabConfig) {
+            const drawerNavigation = await this.#generateBottomTabNavigationsFile({
+                bottomTabConfig: bottomTabConfig,
+                unauthenticatedComponentPath,
+                bottomDirPath: bottomDirPath,
+                mixLayout,
+            });
+            if (drawerNavigation)
+                await this.#generateBottomTabNavigationsFile({
+                    bottomTabConfig: hostBottomTabConfig,
+                    unauthenticatedComponentPath,
+                    bottomDirPath: hostBottomDirPath,
+                    mixLayout,
+                });
+            if (drawerConfig) {
+                const drawerNavigation = await this.#generateDrawerNavigationsFile({
+                    drawerConfig: drawerConfig,
+                    unauthenticatedComponentPath,
+                    drawerDirPath: drawerDirPath,
+                });
+                if (drawerNavigation)
+                    await this.#generateDrawerNavigationsFile({
+                        drawerConfig: hostDrawerConfig,
+                        unauthenticatedComponentPath,
+                        drawerDirPath: hostDirPath,
+                    });
+                return true;
+            } else return true;
+        } else return false;
+    }
+
+    async #generateAppNavigationFile({ appDirPath, customTabBarPath, customDrawerPath, customHeaderPath }) {
+        const navigationDirPath = path.join(appDirPath, `/${appNavigationFileName}`);
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = layoutSettings?.layout || 'bottom';
+        const layoutRouteConfig = layoutConfigFileData[layoutType];
+        const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
+        const appLayout = layoutRouteConfig[layoutRouteKey];
+
+        const initialRouteName =
+            layoutType === 'mixSide'
+                ? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
+                : appLayout?.props?.initialRouteName || 'MainStack.Home';
+        const isShowTabs = layoutType === 'mixSide' || layoutType === 'bottom' ? true : false;
+        const isShowDefalutHeader = layoutType === 'mixSide' ? true : false;
+        const defaultHeaderProps = {
+            showToggle: layoutSettings?.topLeftToggle || false,
+            right: layoutSettings?.topRightSettingToggle || false,
+        };
+        const screenOptionsTab =
+            layoutType === 'mixSide'
+                ? { ...(appLayout?.[appLayout?.key]?.props?.screenOptions ?? {}) }
+                : appLayout?.props?.screenOptions || { headerShown: true, title: 'Home', headerTitle: 'Home' };
+        const screenOptions = appLayout?.props?.screenOptions || {
+            headerShown: true,
+            title: 'Home',
+            headerTitle: 'Home',
+        };
+        let importStatements = `
+             import * as React from 'react';
+             import { navigationRef } from '@common-stack/client-react';
+             import { createNativeStackNavigator } from '@react-navigation/native-stack';`;
+        let rootComponent = '';
+        let appComponent = '';
+        let appNavigation = '';
+        if (layoutType == 'side') {
+            if (customDrawerPath) importStatements += `import CustomDrawerContent from '${customDrawerPath}';\n`;
+
+            if (customHeaderPath) importStatements += `import CustomHeader from '${customHeaderPath}';\n`;
+
+            importStatements += `import { createDrawerNavigator } from '@react-navigation/drawer';
+         import { getHeaderTitle } from '@react-navigation/elements';
+         import { useSelector } from 'react-redux';
+         import stackNavigations from './stack';
+         import drawerNavigations from './drawer';
+         import hostDrawerNavigations from './host_drawer';
+         const Stack = createNativeStackNavigator();
+         const Drawer = createDrawerNavigator();
+      `;
+            rootComponent += `
+             const RootComponent = (props:any) => { 
+                const settings = useSelector((state: any) => state.settings);
+                const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
+                 return (
+                       <Drawer.Navigator
+                       initialRouteName={${JSON.stringify(initialRouteName)}}
+                       //screenOptions={${JSON.stringify(screenOptions)}}
+                       screenOptions={({ route }) => ({ ...${JSON.stringify(screenOptions)} ,...{
+                         ${
+                             customHeaderPath
+                                 ? `header: (props:any) => {
+                          const title = getHeaderTitle(props.options, props.route.name);
+                          return <CustomHeader  {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
+                        }`
+                                 : ''
+                         }
+                         }})}
+                       ${customDrawerPath ? 'drawerContent={(props) => <CustomDrawerContent {...props} />}' : ''}
+                       >
+                      {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
+                     </Drawer.Navigator>
+                 );
+             }
+      `;
+        }
+        if (layoutType == 'bottom') {
+            if (customTabBarPath) importStatements += `import CustomTabBar from '${customTabBarPath}';\n`;
+
+            if (customHeaderPath) importStatements += `import CustomHeader from '${customHeaderPath}';\n`;
+
+            importStatements += `import {Header,Drawer as DefaultDrawer} from '@admin-layout/gluestack-ui-mobile';
+             import { getHeaderTitle } from '@react-navigation/elements';
+             import { useSelector } from 'react-redux';
+             import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+             import stackNavigations from './stack';
+             import bottomNavigations from './bottom';
+             import hostBottomNavigations from './host_bottom';
+             const Stack = createNativeStackNavigator();
+             const Tab = createBottomTabNavigator();
+         `;
+            rootComponent += `
+                const RootComponent = (props:any) => { 
+                    const settings = useSelector((state: any) => state.settings);
+                     const initialRouteName = ${JSON.stringify(initialRouteName)};
+                     let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
+                     const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
+                     const defaultHeader = {${
+                         isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
+                     }};
+                    return (
+                     <Tab.Navigator 
+                       initialRouteName={initialRouteName}
+                       screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{${
+                           customHeaderPath
+                               ? `header: (props:any) => {
+                          const title = getHeaderTitle(props.options, props.route.name);
+                          return <CustomHeader  {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
+                        }`
+                               : ''
+                       }}})}
+                       ${
+                           customTabBarPath
+                               ? 'tabBar={props => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+                               : ''
+                       }
+                     >
+                      {settings?.layout == 'host-bottom' ? hostBottomNavigations({ Tab }) : bottomNavigations({Tab})}
+                     </Tab.Navigator>
+                    );
+                }
+         `;
+        }
+        if (layoutType == 'mixSide') {
+            if (customTabBarPath) importStatements += `import CustomTabBar from '${customTabBarPath}';\n`;
+
+            if (customDrawerPath) importStatements += `import CustomDrawerContent from '${customDrawerPath}';\n`;
+
+            if (customHeaderPath) importStatements += `import CustomHeader from '${customHeaderPath}';\n`;
+
+            importStatements += `import {Header,Drawer as DefaultDrawer} from '@admin-layout/gluestack-ui-mobile';
+           import { useSelector } from 'react-redux';
+           import { MaterialIcons } from "@expo/vector-icons";
+           import { getHeaderTitle } from '@react-navigation/elements';
+           import { createDrawerNavigator } from '@react-navigation/drawer';
+           import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+           import stackNavigations from './stack';
+           import bottomNavigations from './bottom';
+           import hostBottomNavigations from './host_bottom';
+           import drawerNavigations from './drawer';
+           import hostDrawerNavigations from './host_drawer';
+           const Stack = createNativeStackNavigator();
+           const Drawer = createDrawerNavigator();
+           const Tab = createBottomTabNavigator();
+       `;
+            rootComponent += `
+                 const TabNavigator = () => {
+                   const settings = useSelector((state: any) => state.settings);
+                   const initialRouteName = ${JSON.stringify(initialRouteName)};
+                   let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
+                   const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
+                   const defaultHeader = {${
+                       isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
+                   }};
+               
+                 return (
+                 <Tab.Navigator 
+                       initialRouteName={initialRouteName}
+                       screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{headerShown: false,header:()=>null},})}
+                       ${
+                           customTabBarPath
+                               ? 'tabBar={props => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+                               : ''
+                       }
+                     >
+                     {settings?.layout == 'host-bottom' ? hostBottomNavigations({ Tab }) : bottomNavigations({Tab})}
+                     </Tab.Navigator>
+                 )
+               }
+              const RootComponent = (props:any) => { 
+                    const initialRouteName = ${JSON.stringify(initialRouteName)};
+                     const settings = useSelector((state: any) => state.settings);
+                   let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
+                   const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
+                   const defaultHeader = {${
+                       isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
+                   }};
+                  return (
+                    <Drawer.Navigator
+                       initialRouteName={${JSON.stringify(initialRouteName)}}
+                     // screenOptions={${JSON.stringify(screenOptions)}}
+                       screenOptions={({ route }) => ({ ...${JSON.stringify(
+                           screenOptions,
+                       )} ,...{headerTitle:navigationRef?.isReady() && navigationRef?.getCurrentRoute()
+                         ? navigationRef?.getCurrentOptions()?.title
+                         ? navigationRef?.getCurrentOptions()?.headerTitle 
+                         : navigationRef?.getCurrentRoute()?.route?.name 
+                         : "Home",
+                         ${
+                             customHeaderPath
+                                 ? `header: (props:any) => {
+                          const title = getHeaderTitle(props.options, props.route.name);
+                          return <CustomHeader  {...defaultHeaderProps} {...props} title={title} isMixedLayout={true} style={props.options.headerStyle} />;
+                        }`
+                                 : ''
+                         }
+                         
+                         }})}
+                         ${
+                             customDrawerPath
+                                 ? 'drawerContent={(props) => <CustomDrawerContent {...props} showDefaultRoutes={true} />}'
+                                 : ''
+                         }
+                       >
+                         <Drawer.Screen name="Layout" options={{title:"Home", drawerIcon: ({ color, size }: { color: any, size: any }) => (
+                          <MaterialIcons name="home" size={24} color={color} />
+                        ),}}
+                        component={TabNavigator} />
+                         {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
+                       </Drawer.Navigator>
+                  );
+              }
+       `;
+        }
+        appComponent += `
+         const AppNavigations = () => {
+             return (
+                 <Stack.Navigator initialRouteName="${initialRouteName}">
+                     <Stack.Screen
+                         name="MainStack"
+                         options={{ headerShown: false }}
+                         component={RootComponent}
+                     />
+                     {stackNavigations({ Stack })}
+                 </Stack.Navigator>
+             )
+         }
+ 
+         export default AppNavigations;
+     `;
+        appNavigation = importStatements + '\n' + rootComponent + '\n' + appComponent;
+        appNavigation = prettier.format(appNavigation, { parser: 'babel' });
+        const writeFileResponse = await this.#writeFile(navigationDirPath, appNavigation);
+        if (writeFileResponse) return true;
+        else return false;
+    }
+
+    async #setLayoutAndGenerateNavigation() {
+        const appDirPath = this.#appDirPath;
+        const modules = this.#modules;
+        const initialRouteName = this.#initialRouteName;
+        const unauthenticatedComponentPath = this.#unauthenticatedComponentPath;
+        const customTabBarPath = this.#customTabBarPath;
+        const customDrawerPath = this.#customDrawerPath;
+        const customHeaderPath = this.#customHeaderPath;
+
+        const layoutSettings = this.#layoutSettings;
+        const layoutConfigFileData = await this.#getLayoutConfig();
+        const layoutType = layoutSettings?.layout || 'bottom';
+        const isAppRoutesGenerated = await this.#generateAppRoutesJson({ appDirPath });
+        if (isAppRoutesGenerated) {
+            const isModuleTsFileGenerated = await this.#generateModulesTsFile({
+                appDirPath,
+                modules,
+                initialRouteName,
+            });
+            if (isModuleTsFileGenerated) {
+                const isStackCreated = await this.#generateStackNavigations({
+                    appDirPath,
+                    modules,
+                    initialRouteName,
+                    unauthenticatedComponentPath,
+                });
+                if (isStackCreated) {
+                    if (layoutType == 'side') {
+                        const isDrawerGenerated = await this.#generateDrawerNavigations({
+                            appDirPath,
+                            modules,
+                            initialRouteName,
+                            unauthenticatedComponentPath,
+                        });
+                        if (isDrawerGenerated) {
+                            const appNavigationGenerated = await this.#generateAppNavigationFile({
+                                appDirPath,
+                                customTabBarPath,
+                                customDrawerPath,
+                                customHeaderPath,
+                            });
+                            if (appNavigationGenerated) return appNavigationGenerated;
+                            else return true;
+                        } else return false;
+                    } else if (layoutType == 'bottom' || layoutType == 'host-bottom') {
+                        const isBottomTabGenerated = await this.#generateBottomTabNavigations({
+                            appDirPath,
+                            modules,
+                            initialRouteName,
+                            unauthenticatedComponentPath,
+                        });
+                        if (isBottomTabGenerated) {
+                            const appNavigationGenerated = await this.#generateAppNavigationFile({
+                                appDirPath,
+                                customTabBarPath,
+                                customDrawerPath,
+                                customHeaderPath,
+                            });
+                            if (appNavigationGenerated) return appNavigationGenerated;
+                            else return true;
+                        } else return false;
+                    } else {
+                        const isBottomTabDrawerGenerated = await this.#generateBottomTabDrawerNavigations({
+                            appDirPath,
+                            modules,
+                            initialRouteName,
+                            unauthenticatedComponentPath,
+                        });
+                        if (isBottomTabDrawerGenerated) {
+                            const appNavigationGenerated = await this.#generateAppNavigationFile({
+                                appDirPath,
+                                customTabBarPath,
+                                customDrawerPath,
+                                customHeaderPath,
+                            });
+                            if (appNavigationGenerated) return appNavigationGenerated;
+                            else return true;
+                        } else return false;
+                    }
+                } else return false;
+            } else return false;
+        } else return false;
+    }
+
+    async generateAppNavigations() {
+        return this.#setLayoutAndGenerateNavigation();
+    }
+}