@admin-layout/gluestack-ui-mobile 9.0.2-alpha.4 → 9.0.4-alpha.102

package/src/utils/generateMobileNavigations.ts

@@ -5,28 +5,25 @@ 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 { performCopyOperations } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.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 appNavigationFileName = 'navigation.js';
 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';
+const stacksDirPath = 'stack/index.js';
+const drawerFilePath = 'drawer/index.js';
+const hostDrawerFilePath = 'host_drawer/index.js';
+const bottomFilePath = 'bottom/index.js';
+const hostBottomFilePath = 'host_bottom/index.js';
+const mainRoutesJsFileName = 'mainRoutes.js';
+const mainAppFileName = 'index.js';
 
 type IGenerateMobileNavigationsProps = {
-    appDirPath: string;
-    modules: any;
-    initialRouteName?: string;
-    unauthenticatedComponentPath?: string;
-    customTabBarPath?: string;
-    customDrawerPath?: string;
-    customHeaderPath?: string;
+    configFilePath: any;
 };
 
 export const readJsonFile = (filePath) => {
@@ -66,32 +63,46 @@ export const getLayoutConfig = async () => {
 };
 
 export class GenerateMobileNavigations {
-    #layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
-    #appDirPath: string;
+    #configFileData: any = {};
+    #configFilePath: any;
+    #appPath: string = 'app';
+    #isDefaultPackagePathMobileRoot: boolean;
+    #mobileStackPath: string = 'mobile-stack-react';
+    //#layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+    #appDirPath: any;
     #modules: any;
+    #initialRouteNameRootStack: string;
     #initialRouteName: string;
     #unauthenticatedComponentPath: string;
     #customTabBarPath: string;
     #customDrawerPath: string;
     #customHeaderPath: string;
+    #i18Options: any;
+    #iconsRepository: string;
+
+    constructor({ configFilePath }: IGenerateMobileNavigationsProps) {
+        this.#configFilePath = configFilePath;
+        const config = this.#readConfigFile(configFilePath);
+        this.#configFileData = config;
+        // this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+        this.#appPath = config?.commonPaths?.appPath ?? 'app';
+        this.#isDefaultPackagePathMobileRoot = config?.mobileConfig?.isDefaultPackagePathMobileRoot ?? false;
+        this.#iconsRepository = config?.iconsRepository ?? '';
+        this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
+        this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
+        this.#modules = config?.modules ?? [];
+        this.#initialRouteName = config?.mobileConfig?.initialRouteName ?? '';
+        this.#initialRouteNameRootStack = config?.mobileConfig?.initialRouteNameRootStack ?? 'MainStack';
+        this.#unauthenticatedComponentPath = config?.mobileConfig?.unauthenticatedComponentPath ?? '';
+        this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
+        this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
+        this.#customHeaderPath = config?.mobileConfig?.customHeaderPath ?? '';
+        this.#i18Options = config?.i18n ?? {};
+    }
 
-    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;
+    #readConfigFile(configFilePath: any) {
+        const jsonData = fs.readFileSync(configFilePath, 'utf-8');
+        return JSON.parse(jsonData);
     }
 
     async #readJsonFile(filePath) {
@@ -148,10 +159,20 @@ export class GenerateMobileNavigations {
 
     async #getModulesRouteConfig({ modules }) {
         const allFilteredRoutes = [];
+        let pkgFile;
         for (const pkg of modules) {
-            const pkgPath = require.resolve(pkg);
-            const pkgDirPath = path.dirname(pkgPath);
-            const pkgFile = path.join(pkgDirPath, 'routes.json');
+            if (this.#isDefaultPackagePathMobileRoot) {
+                const pkgRootFilePath = path.join(
+                    path.join(path.dirname(this.#configFilePath), 'node_modules/lib'),
+                    pkg,
+                );
+                pkgFile = path.join(pkgRootFilePath, 'routes.json');
+            } else {
+                const pkgPath = require.resolve(pkg);
+                const pkgDirPath = path.dirname(pkgPath);
+                pkgFile = path.join(pkgDirPath, 'routes.json');
+            }
+
             if (fs.existsSync(pkgFile)) {
                 const fileModuleJSON: any = await readJsonFile(pkgFile);
                 if (fileModuleJSON) {
@@ -187,14 +208,16 @@ export class GenerateMobileNavigations {
         return value;
     }
 
-    async #generateAppRoutesJson({ appDirPath }) {
-        const parentDirPath = path.dirname(appDirPath);
+    async #generateAppRoutesJson() {
+        const appDirPath = this.#appDirPath;
+        const parentDirPath = path.dirname(this.#configFileData?.mobileConfig?.computeFilePath ?? this.#configFilePath);
         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 outputDir = `${parentDirName}/${appDirName}`;
+        const outputDir = `${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');
@@ -210,13 +233,12 @@ export class GenerateMobileNavigations {
                 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;
+                    try {
+                        await this.#makeDir(outPutDirName);
+                        await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                    } catch (error) {
+                        console.log('Error directory/file create', error);
+                    }
                 } else {
                     const newFilePath = mainRoutesJsFile.replace('.js', '.mjs');
                     const renameFileResponse = await this.#renameFile(mainRoutesJsFile, newFilePath);
@@ -236,46 +258,45 @@ export class GenerateMobileNavigations {
                                         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;
+                                try {
+                                    const writeFileResponse = await this.#writeFile(
+                                        outputFile,
+                                        JSON.stringify(allFilteredRoutes, null, 2),
+                                    );
+
+                                    if (writeFileResponse) fs.unlinkSync(mainRoutesMjsFile);
+                                } catch (error) {
+                                    console.log('Error creating main routes file', error);
+                                }
                             }
-                        } 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;
+                try {
+                    await this.#makeDir(outPutDirName);
+                    await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                } catch (error) {
+                    console.log('Error creating main routes file', error);
+                }
             }
             // 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;
+            try {
+                await this.#makeDir(outPutDirName);
+                await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+            } catch (error) {
+                console.log('Error creating main routes file', error);
+            }
         }
     }
 
     async #generateImportStatements({ modules, initialRouteName }) {
         try {
-            const layoutSettings = this.#layoutSettings;
+            const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
             const layoutConfigFileData = await this.#getLayoutConfig();
             const hostRouteConfig = layoutConfigFileData['host-bottom'];
             const hostRouteKey = Object.keys(hostRouteConfig)[1];
@@ -393,10 +414,228 @@ export class GenerateMobileNavigations {
         return false;
     }
 
+    async #generateMainRoutesFile({ initialRouteName, i18Options }) {
+        try {
+            const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+            const layoutConfigFileData = await this.#getLayoutConfig();
+            const hostRouteConfig = layoutConfigFileData['host-bottom'];
+            const hostRouteKey = Object.keys(hostRouteConfig)[1];
+            const hostLayout = hostRouteConfig[hostRouteKey];
+
+            let importStatements = '';
+            importStatements += `import  React from 'react';\n`;
+            importStatements += `import { InversifyProvider, PluginArea } from '@common-stack/client-react';\n`;
+            importStatements += `import { useSelector, useDispatch } from 'react-redux';\n`;
+            importStatements += `import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';\n`;
+            importStatements += `import {layoutRouteConfig,getReplacedRouteConfig,ErrorBoundary,NavigationContainerComponent,ApplicationErrorHandler,Box,Spinner,} from '@admin-layout/gluestack-ui-mobile';\n`;
+            importStatements += `import mainRouteConfig from './main_routes.json';\n`;
+            importStatements += `import features from './mobile-stack-react/modules.js';\n`;
+            importStatements += `import AppNavigations from './navigation';\n`;
+            importStatements += `import {loadContext} from './mobile-stack-react/load-context.mobile.js';\n`;
+
+            let classStructure = `
+
+            const mainAppRoutes = mainRouteConfig || [];
+
+            const appRoutes = [...[mainAppRoutes],features?.routeConfig];
+
+            const featureRouteConfig = appRoutes?.flat(1)??features?.routeConfig;
+            features.routeConfig = featureRouteConfig;
+            let appConfiguredRoutes = features?.getConfiguredRoutes2("/");
+
+            const DefaultProvider = ({children}) => <>{children}</>
+
+            export  function MainRoute({ container,externalProvider: ExternalProvider = DefaultProvider,externalProviderProps={},linking = {} }){
+            const dispatch = useDispatch();
+            const defaultSettings = useSelector((state) => state.settings);
+            const initialRouteName = '${initialRouteName}';
+            const layoutSettings = ${JSON.stringify({ ...layoutSettings, hostLayout: hostLayout.key })}
+            const [mainFeatures, setMainFeatures] = React.useState(null);
+
+                React.useEffect(() => {
+                        setDefalutSettings();
+                }, []);
+
+
+            const setDefalutSettings = React.useCallback(()=>{
+                const config = {
+                    ...defaultSettings,
+                    ...layoutSettings,
+                };
+                dispatch({
+                    type: CHANGE_SETTINGS_ACTION,
+                    payload: config,
+                });
+                },[]);
+
+            React.useEffect(() => {
+                if (defaultSettings) {
+                    const settingObj = { ...defaultSettings };
+                    const layoutType = 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.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (key.startsWith("//" + layoutSettings.hostLayout) || key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                                    const layoutRouteConfig = appReplacedRouteConfig.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (!key.startsWith("//" + layoutSettings.hostLayout) && !key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                        // 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;
+                        setMainFeatures(features);
+                        }
+                    }
+                }
+                }, [defaultSettings]);
+
+                    const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
+
+                    if (!mainFeatures || mainFeatures?.routeConfig?.length == 0) return loadingComponent();
+
+                    const plugins = mainFeatures?.getComponentFillPlugins();
+                    const configuredRoutes = mainFeatures?.getConfiguredRoutes2('/');
+                    appConfiguredRoutes = configuredRoutes;
+
+                        return (
+                            <InversifyProvider container={container} modules={mainFeatures}>
+                                {mainFeatures?.getWrappedRoot(
+                                    <ErrorBoundary>
+                                        <NavigationContainerComponent configurableRoutes={configuredRoutes} independent={true} linking={linking}>
+                                        <ExternalProvider {...externalProviderProps}>
+                                        <AppNavigations />
+                                        </ExternalProvider>
+                                        <PluginArea />
+                                        <ApplicationErrorHandler plugins={plugins} />
+                                        </NavigationContainerComponent>
+                                    </ErrorBoundary>,
+                                )}
+                            </InversifyProvider>
+                        );
+            }
+
+            export { loadContext,appConfiguredRoutes };
+
+            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);
+        }
+    }
+
+    async #generateMainRoutes({ appDirPath, i18Options, initialRouteName }) {
+        const mainRoutesFile = path.join(appDirPath, `/${mainRoutesJsFileName}`);
+        const imports: any = await this.#generateMainRoutesFile({ initialRouteName, i18Options });
+        const { appFeatures } = imports;
+        try {
+            await this.#writeFile(mainRoutesFile, appFeatures);
+        } catch (err) {
+            console.error('Error generating main routes:', err);
+        }
+    }
+
+    async #generateAppFile({ initialRouteName, i18Options }) {
+        try {
+            let importStatements = '';
+            importStatements += `import 'reflect-metadata';\n`;
+            importStatements += `import  React from 'react';\n`;
+            importStatements += `import { SlotFillProvider } from '@common-stack/components-pro';\n`;
+            importStatements += `import { ApolloProvider } from '@apollo/client';\n`;
+            importStatements += `import { Provider } from 'react-redux';\n`;
+            importStatements += `import { PersistGate } from 'redux-persist/integration/react';\n`;
+            importStatements += `import { SafeAreaProvider } from 'react-native-safe-area-context';\n`;
+            importStatements += `import {GluestackUIProvider,config,i18next,reactI18Next} from '@admin-layout/gluestack-ui-mobile';\n`;
+            importStatements += `import { enableScreens } from 'react-native-screens';\n`;
+            importStatements += `import {MainRoute,loadContext,appConfiguredRoutes} from './mainRoutes.js'\n`;
+
+            let classStructure = `
+            enableScreens(true);
+            const { I18nextProvider } = reactI18Next;
+            i18next.options ={...i18next?.options??{},...${JSON.stringify(i18Options)}};
+
+             const DefaultProvider = ({children}) => <>{children}</>
+
+           function App({externalProvider = DefaultProvider,externalProviderProps={},linking = {}}){
+            const {store,persistor,container,apolloClient: client} = loadContext();
+            
+
+                return (
+                  <SlotFillProvider>
+                   <ApolloProvider client={client}>
+                    <Provider store={store}>
+                     <PersistGate persistor={persistor}>
+                     <I18nextProvider i18n={i18next}>
+                     <SafeAreaProvider>
+                     <GluestackUIProvider config={config}>
+                      <MainRoute container={container} externalProvider={externalProvider} linking={linking} externalProviderProps={externalProviderProps}  />
+                     </GluestackUIProvider>
+                     </SafeAreaProvider>
+                    </I18nextProvider>
+                     </PersistGate>
+                    </Provider>
+                    </ApolloProvider>
+                   </SlotFillProvider>
+                );
+      }
+
+      export const configuredRoutes = appConfiguredRoutes;
+      export default App;
+    `.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);
+        }
+    }
+
+    async #generateApp({ appDirPath, i18Options, initialRouteName }) {
+        const mainRoutesFile = path.join(appDirPath, `/${mainAppFileName}`);
+        const imports: any = await this.#generateAppFile({ initialRouteName, i18Options });
+        const { appFeatures } = imports;
+        try {
+            await this.#writeFile(mainRoutesFile, appFeatures);
+        } catch (err) {
+            console.error('Error generating app:', err);
+        }
+    }
+
     async #generateStackNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
         const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
         const stackDirPath = path.join(appDirPath, `/${stacksDirPath}`);
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout || 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -445,7 +684,7 @@ export class GenerateMobileNavigations {
         const regex = /\.(tsx|ts|jsx|js)$/i;
 
         importStatements += `import * as React from 'react';\n`;
-        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+        importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -492,14 +731,19 @@ export class GenerateMobileNavigations {
                     pkgRouteConfig?.customHeader &&
                     Object.keys(pkgRouteConfig.customHeader)?.length &&
                     customHeaderComponentPath
-                        ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                        ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
                               pkgRouteConfig?.customHeader?.props ?? '',
                           )}}  />`
                         : ''
                 }}}}
-             >{(props:any) => <AuthWrapper 
+             >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props} 
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                          />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -550,20 +794,20 @@ export class GenerateMobileNavigations {
             }
 
             moduleContent += `</Stack.Group>`;
-            moduleRender = `export default ({Stack,...rest}:any) => { return (<>${moduleContent}</>)}`;
+            moduleRender = `export default ({Stack,...rest}) => { return (<>${moduleContent}</>)}`;
         }
         stackNavigator = importStatements + '\n' + moduleRender;
-        if (stackNavigator) {
-            let stackNavigation = stackNavigator;
-            stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
-            const stackDirName = path.dirname(stackDirPath);
+        let stackNavigation = stackNavigator;
+        stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
+        const stackDirName = path.dirname(stackDirPath);
+        try {
             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;
+                await this.#writeFile(stackDirPath, stackNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating stack navigation', error);
+        }
     }
 
     async #generateDrawerNavigationsFile({ drawerConfig, unauthenticatedComponentPath, drawerDirPath }) {
@@ -580,7 +824,8 @@ export class GenerateMobileNavigations {
         const regex = /\.(tsx|ts|jsx|js)$/i;
 
         importStatements += `import * as React from 'react';\n`;
-        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+        importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -626,25 +871,55 @@ export class GenerateMobileNavigations {
                   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'
-                      }} />`
+                    ? `drawerIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                      {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     />)},`
                     : ''
             }
                   ${
                       pkgRouteConfig?.customHeader &&
                       Object.keys(pkgRouteConfig.customHeader)?.length &&
                       customHeaderComponentPath
-                          ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                          ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
                                 pkgRouteConfig?.customHeader?.props ?? '',
                             )}}  />`
                           : ''
                   }}}}
-                >{(props:any) => <AuthWrapper 
+                >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                           component={<Component${moduleNumber} {...props}   />}
+                           authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                           component={<Component${moduleNumber} {...props}
+                             permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                             extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                              />}
                            ${
                                pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                    ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -671,10 +946,10 @@ export class GenerateMobileNavigations {
                            }
                             />}</Drawer.Screen>`;
         }
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // if (icons && icons?.length) {
+        //     const uniqueIcons = [...new Set(icons.split(','))].join(',');
+        //     importStatements += `import Icons from '@expo/vector-icons';\n`;
+        // }
 
         if (customHeaderPaths && customHeaderPaths?.length) {
             const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
@@ -699,22 +974,20 @@ export class GenerateMobileNavigations {
             });
         }
 
-        moduleRender = `export default ({Drawer,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        moduleRender = `export default ({Drawer,...rest}) => { 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);
+        let drawerNavigation = drawerNavigator;
+        drawerNavigation = prettier.format(drawerNavigation, { parser: 'babel' });
+        const drawerDirName = path.dirname(drawerDirPath);
+        try {
             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;
+                await this.#writeFile(drawerDirPath, drawerNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating drawer navigation file', error);
         }
-        return false;
     }
 
     async #generateDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -722,7 +995,7 @@ export class GenerateMobileNavigations {
         const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
         const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = 'side';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -760,31 +1033,32 @@ export class GenerateMobileNavigations {
                 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)
+        try {
+            if (layoutSettings?.layout == 'side') {
+                if (drawerConfig) {
                     await this.#generateDrawerNavigationsFile({
-                        drawerConfig: hostDrawerConfig,
+                        drawerConfig: drawerConfig,
                         unauthenticatedComponentPath,
-                        drawerDirPath: hostDirPath,
+                        drawerDirPath: drawerDirPath,
                     });
-                return true;
-            } else {
-                if (hostDrawerConfig) {
-                    const isDrawerGenerated = await this.#generateDrawerNavigationsFile({
+                    await this.#generateDrawerNavigationsFile({
                         drawerConfig: hostDrawerConfig,
                         unauthenticatedComponentPath,
                         drawerDirPath: hostDirPath,
                     });
-                    return isDrawerGenerated;
-                } else return false;
+                } else {
+                    if (hostDrawerConfig) {
+                        await this.#generateDrawerNavigationsFile({
+                            drawerConfig: hostDrawerConfig,
+                            unauthenticatedComponentPath,
+                            drawerDirPath: hostDirPath,
+                        });
+                    }
+                }
             }
-        } else return false;
+        } catch (error) {
+            console.log('Error generating drawer navigation', error);
+        }
     }
 
     async #generateBottomTabNavigationsFile({
@@ -807,7 +1081,8 @@ export class GenerateMobileNavigations {
         const regex = /\.(tsx|ts|jsx|js)$/i;
 
         importStatements += `import * as React from 'react';\n`;
-        importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+        importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -847,10 +1122,12 @@ export class GenerateMobileNavigations {
             }
 
             const options = JSON.stringify(
-                {
-                    ...pkgRouteConfig?.props?.options,
-                    headerShown: mixLayout ? false : pkgRouteConfig?.props?.options?.headerShown,
-                } || { headerShown: mixLayout ? false : true },
+                pkgRouteConfig?.props?.options
+                    ? {
+                          ...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
@@ -860,26 +1137,57 @@ export class GenerateMobileNavigations {
           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'
-                      }} />`
+                    ? `tabBarIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                     {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     
+                     />)}`
                     : ''
             }
            ${
                pkgRouteConfig?.customHeader &&
                Object.keys(pkgRouteConfig.customHeader)?.length &&
                customHeaderComponentPath
-                   ? `,header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
+                   ? `,header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
                          pkgRouteConfig?.customHeader?.props ?? '',
                      )}}  />`
                    : ''
            }
            }}}
-        >{(props:any) => <AuthWrapper 
+        >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props}
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -908,10 +1216,10 @@ export class GenerateMobileNavigations {
         </Tab.Screen>`;
         }
 
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // 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);
@@ -936,21 +1244,20 @@ export class GenerateMobileNavigations {
             });
         }
 
-        moduleRender = `export default ({Tab,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        moduleRender = `export default ({Tab,...rest}) => { 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);
+        let bottomTabNavigation = bottomTabNavigator;
+        bottomTabNavigation = prettier.format(bottomTabNavigation, { parser: 'babel' });
+        const bottomDirName = path.dirname(bottomDirPath);
+        try {
             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;
+                await this.#writeFile(bottomDirPath, bottomTabNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating bottom tab navigation file', error);
         }
-        return false;
     }
 
     async #generateBottomTabNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -958,7 +1265,7 @@ export class GenerateMobileNavigations {
         const bottomDirPath = path.join(appDirPath, `/${bottomFilePath}`);
         const hostBottomDirPath = path.join(appDirPath, `/${hostBottomFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout ?? 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -998,34 +1305,35 @@ export class GenerateMobileNavigations {
                 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)
+        try {
+            if (layoutType == 'bottom' || layoutType == 'mixSide') {
+                if (bottomTabConfig) {
                     await this.#generateBottomTabNavigationsFile({
-                        bottomTabConfig: hostBottomTabConfig,
+                        bottomTabConfig: bottomTabConfig,
                         unauthenticatedComponentPath,
-                        bottomDirPath: hostBottomDirPath,
+                        bottomDirPath: bottomDirPath,
                         mixLayout,
                     });
-                return true;
-            } else {
-                if (hostBottomTabConfig) {
-                    const isHostGenerated = await this.#generateBottomTabNavigationsFile({
+                    await this.#generateBottomTabNavigationsFile({
                         bottomTabConfig: hostBottomTabConfig,
                         unauthenticatedComponentPath,
                         bottomDirPath: hostBottomDirPath,
                         mixLayout,
                     });
-                    return isHostGenerated;
-                } else return false;
+                } else {
+                    if (hostBottomTabConfig) {
+                        await this.#generateBottomTabNavigationsFile({
+                            bottomTabConfig: hostBottomTabConfig,
+                            unauthenticatedComponentPath,
+                            bottomDirPath: hostBottomDirPath,
+                            mixLayout,
+                        });
+                    }
+                }
             }
-        } else return false;
+        } catch (error) {
+            console.log('Error generating bottom tab navigation', error);
+        }
     }
 
     async #generateBottomTabDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -1035,7 +1343,7 @@ export class GenerateMobileNavigations {
         const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
         const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout ?? 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -1098,52 +1406,57 @@ export class GenerateMobileNavigations {
                 }) ?? [];
 
         if (bottomTabConfig) {
-            const drawerNavigation = await this.#generateBottomTabNavigationsFile({
-                bottomTabConfig: bottomTabConfig,
-                unauthenticatedComponentPath,
-                bottomDirPath: bottomDirPath,
-                mixLayout,
-            });
-            if (drawerNavigation)
+            try {
                 await this.#generateBottomTabNavigationsFile({
-                    bottomTabConfig: hostBottomTabConfig,
+                    bottomTabConfig: bottomTabConfig,
                     unauthenticatedComponentPath,
-                    bottomDirPath: hostBottomDirPath,
+                    bottomDirPath: bottomDirPath,
                     mixLayout,
                 });
-            if (drawerConfig) {
-                const drawerNavigation = await this.#generateDrawerNavigationsFile({
-                    drawerConfig: drawerConfig,
+
+                await this.#generateBottomTabNavigationsFile({
+                    bottomTabConfig: hostBottomTabConfig,
                     unauthenticatedComponentPath,
-                    drawerDirPath: drawerDirPath,
+                    bottomDirPath: hostBottomDirPath,
+                    mixLayout,
                 });
-                if (drawerNavigation)
+                if (drawerConfig) {
+                    await this.#generateDrawerNavigationsFile({
+                        drawerConfig: drawerConfig,
+                        unauthenticatedComponentPath,
+                        drawerDirPath: drawerDirPath,
+                    });
                     await this.#generateDrawerNavigationsFile({
                         drawerConfig: hostDrawerConfig,
                         unauthenticatedComponentPath,
                         drawerDirPath: hostDirPath,
                     });
-                return true;
-            } else return true;
-        } else return false;
+                }
+            } catch (error) {
+                console.log('Error in generating drawer bottom tab navigation', error);
+            }
+        }
     }
 
     async #generateAppNavigationFile({ appDirPath, customTabBarPath, customDrawerPath, customHeaderPath }) {
         const navigationDirPath = path.join(appDirPath, `/${appNavigationFileName}`);
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         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 initialRouteNameRootStack = this.#initialRouteNameRootStack;
+        const layoutInitialRouteName = this.#initialRouteName;
+        const initialRouteName = layoutInitialRouteName
+            ? layoutInitialRouteName
+            : 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 = {
+            ...(layoutSettings || {}),
             showToggle: layoutSettings?.topLeftToggle || false,
             right: layoutSettings?.topRightSettingToggle || false,
         };
@@ -1178,8 +1491,8 @@ export class GenerateMobileNavigations {
          const Drawer = createDrawerNavigator();
       `;
             rootComponent += `
-             const RootComponent = (props:any) => { 
-                const settings = useSelector((state: any) => state.settings);
+             const RootComponent = (props) => { 
+                const settings = useSelector((state) => state.settings);
                 const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
                  return (
                        <Drawer.Navigator
@@ -1188,14 +1501,18 @@ export class GenerateMobileNavigations {
                        screenOptions={({ route }) => ({ ...${JSON.stringify(screenOptions)} ,...{
                          ${
                              customHeaderPath
-                                 ? `header: (props:any) => {
+                                 ? `header: (props) => {
                           const title = getHeaderTitle(props.options, props.route.name);
                           return <CustomHeader  {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
                         }`
                                  : ''
                          }
                          }})}
-                       ${customDrawerPath ? 'drawerContent={(props:any) => <CustomDrawerContent {...props} />}' : ''}
+                       ${
+                           customDrawerPath
+                               ? 'drawerContent={(props) => <CustomDrawerContent {...props} {...defaultHeaderProps || {}} />}'
+                               : ''
+                       }
                        >
                       {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
                      </Drawer.Navigator>
@@ -1219,20 +1536,20 @@ export class GenerateMobileNavigations {
              const Tab = createBottomTabNavigator();
          `;
             rootComponent += `
-                const RootComponent = (props:any) => { 
-                    const settings = useSelector((state: any) => state.settings);
+                const RootComponent = (props) => { 
+                    const settings = useSelector((state) => 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} />` : ''
+                         isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
                      }};
                     return (
                      <Tab.Navigator 
                        initialRouteName={initialRouteName}
-                       screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{${
+                       screenOptions={(props)=>({...props,...defaultScreenOptions,...{${
                            customHeaderPath
-                               ? `header: (props:any) => {
+                               ? `header: (props) => {
                           const title = getHeaderTitle(props.options, props.route.name);
                           return <CustomHeader  {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
                         }`
@@ -1240,7 +1557,7 @@ export class GenerateMobileNavigations {
                        }}})}
                        ${
                            customTabBarPath
-                               ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+                               ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
                                : ''
                        }
                      >
@@ -1274,21 +1591,21 @@ export class GenerateMobileNavigations {
        `;
             rootComponent += `
                  const TabNavigator = () => {
-                   const settings = useSelector((state: any) => state.settings);
+                   const settings = useSelector((state) => 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} />` : ''
+                       isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
                    }};
                
                  return (
                  <Tab.Navigator 
                        initialRouteName={initialRouteName}
-                       screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{headerShown: false,header:()=>null},})}
+                       screenOptions={(props)=>({...props,...defaultScreenOptions,...{headerShown: false,header:()=>null},})}
                        ${
                            customTabBarPath
-                               ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+                               ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
                                : ''
                        }
                      >
@@ -1296,13 +1613,13 @@ export class GenerateMobileNavigations {
                      </Tab.Navigator>
                  )
                }
-              const RootComponent = (props:any) => { 
+              const RootComponent = (props) => { 
                     const initialRouteName = ${JSON.stringify(initialRouteName)};
-                     const settings = useSelector((state: any) => state.settings);
+                     const settings = useSelector((state) => state.settings);
                    let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
                    const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
                    const defaultHeader = {${
-                       isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
+                       isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
                    }};
                   return (
                     <Drawer.Navigator
@@ -1317,7 +1634,7 @@ export class GenerateMobileNavigations {
                          : "Home",
                          ${
                              customHeaderPath
-                                 ? `header: (props:any) => {
+                                 ? `header: (props) => {
                           const title = getHeaderTitle(props.options, props.route.name);
                           return <CustomHeader  {...defaultHeaderProps} {...props} title={title} isMixedLayout={true} style={props.options.headerStyle} />;
                         }`
@@ -1327,11 +1644,11 @@ export class GenerateMobileNavigations {
                          }})}
                          ${
                              customDrawerPath
-                                 ? 'drawerContent={((props:any)) => <CustomDrawerContent {...props} showDefaultRoutes={true} />}'
+                                 ? 'drawerContent={((props)) => <CustomDrawerContent {...props} showDefaultRoutes={true} />}'
                                  : ''
                          }
                        >
-                         <Drawer.Screen name="Layout" options={{title:"Home", drawerIcon: ({ color, size }: { color: any, size: any }) => (
+                         <Drawer.Screen name="Layout" options={{title:"Home", drawerIcon: ({ color, size }) => (
                           <MaterialIcons name="home" size={24} color={color} />
                         ),}}
                         component={TabNavigator} />
@@ -1344,7 +1661,7 @@ export class GenerateMobileNavigations {
         appComponent += `
          const AppNavigations = () => {
              return (
-                 <Stack.Navigator initialRouteName="${initialRouteName}">
+                 <Stack.Navigator initialRouteName="${initialRouteNameRootStack}">
                      <Stack.Screen
                          name="MainStack"
                          options={{ headerShown: false }}
@@ -1359,9 +1676,110 @@ export class GenerateMobileNavigations {
      `;
         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;
+        try {
+            await this.#writeFile(navigationDirPath, appNavigation);
+        } catch (error) {
+            console.log('Error in generating app navigationfile', error);
+        }
+    }
+
+    async #generateSelectiveIconsFile({ appDirPath, modules }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+        let iconNames = [];
+        allRoutes?.flat(1)?.forEach((route) => {
+            const key = Object.keys(route)[0];
+            const value = route[key];
+            if (value?.icon && typeof value.icon === 'object') {
+                if (typeof value.icon.name === 'string') {
+                    if (!iconNames.includes(value.icon.name)) iconNames.push(value.icon.name);
+                }
+            } else if (value?.icon && typeof value.icon === 'string') {
+                if (!iconNames.includes(value.icon)) iconNames.push(value.icon);
+            }
+
+            if (value?.extraIcons && Array.isArray(value.extraIcons) && value?.extraIcons?.length > 0) {
+                value?.extraIcons?.map((icon) => {
+                    if (typeof icon === 'string') {
+                        if (!iconNames.includes(icon)) iconNames.push(icon);
+                    } else {
+                        console.warn(`Invalid icon type: ${typeof icon}`);
+                    }
+                });
+            } else if (value?.extraIcons && typeof value.extraIcons === 'string') {
+                if (!iconNames.includes(value.extraIcons)) iconNames.push(value.extraIcons);
+            }
+        });
+
+        const iconsRepository = this.#iconsRepository;
+        const expoIcons = [
+            'AntDesign',
+            'Entypo',
+            'EvilIcons',
+            'Feather',
+            'FontAwesome',
+            'FontAwesome5',
+            'Fontisto',
+            'Foundation',
+            'Ionicons',
+            'MaterialCommunityIcons',
+            'MaterialIcons',
+            'Octicons',
+            'SimpleLineIcons',
+            'Zocial',
+        ];
+
+        let content = `
+        function __variableDynamicIcon(icon) {
+        switch (icon) {
+      `;
+        iconNames.forEach((name) => {
+            let prefix, iconName;
+            if (name.includes('.')) {
+                [prefix, iconName] = name.split('.');
+            }
+            if (prefix && iconsRepository[prefix]) {
+                const importPath = iconsRepository[prefix].replace(
+                    '{iconName}',
+                    prefix === 'expo' ? iconName : iconName + '.native',
+                );
+                // prefix = prefix.charAt(0).toUpperCase() + prefix.slice(1).toLowerCase();
+                content += `
+                    case '${prefix + '.' + iconName}':
+                        return require('${importPath}')?.default;
+                    `;
+            } else {
+                content += `
+                    case '${name}':
+                        return ${
+                            expoIcons.includes(name)
+                                ? `require('@expo/vector-icons/${name}.js')?.default`
+                                : `require('@expo/vector-icons/FontAwesome.js')?.default;`
+                        };
+                    `;
+            }
+        });
+
+        content += `
+        default:
+          console.warn('Sorry, the icon named "', icon, '" could not be found in "@react-icon/all-files" and "@app/icons". Please check again.');
+          return require('@expo/vector-icons/FontAwesome.js')?.default;
+        }
+        }
+        export default function(icon) {
+        return __variableDynamicIcon(icon);
+        }
+      `;
+        const rootPath = process.cwd();
+        const fileName = `selectiveIcons.js`;
+        const newFilePath = path.join(rootPath, 'app', fileName);
+        // Ensure the directory exists
+        if (!fs.existsSync(path.dirname(newFilePath))) {
+            fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+        }
+        fs.writeFileSync(newFilePath, content, 'utf8');
     }
 
     async #setLayoutAndGenerateNavigation() {
@@ -1372,83 +1790,155 @@ export class GenerateMobileNavigations {
         const customTabBarPath = this.#customTabBarPath;
         const customDrawerPath = this.#customDrawerPath;
         const customHeaderPath = this.#customHeaderPath;
+        const i18Options = this.#i18Options;
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout || 'bottom';
-        const isAppRoutesGenerated = await this.#generateAppRoutesJson({ appDirPath });
-        if (isAppRoutesGenerated) {
-            const isModuleTsFileGenerated = await this.#generateModulesTsFile({
+        try {
+            await this.#generateAppRoutesJson();
+            await this.#generateSelectiveIconsFile({ appDirPath, modules });
+            await this.#generateMainRoutes({
+                appDirPath,
+                i18Options,
+                initialRouteName,
+            });
+            await this.#generateApp({
+                appDirPath,
+                i18Options,
+                initialRouteName,
+            });
+
+            await this.#generateStackNavigations({
                 appDirPath,
                 modules,
                 initialRouteName,
+                unauthenticatedComponentPath,
             });
-            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;
+
+            if (layoutType == 'side') {
+                try {
+                    await this.#generateDrawerNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating side navigation', error);
+                }
+            } else if (layoutType == 'bottom' || layoutType == 'host-bottom') {
+                try {
+                    await this.#generateBottomTabNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating bottom navigation', error);
+                }
+            } else {
+                try {
+                    await this.#generateBottomTabDrawerNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating drawer bottom navigation', error);
+                }
+            }
+        } catch (error) {
+            console.log('Error generating app navigations', error);
+        }
+    }
+
+    async #performCopyOperations() {
+        const config = this.#configFileData;
+        try {
+            await performCopyOperations(config);
+            await this.#setLayoutAndGenerateNavigation();
+        } catch (error) {
+            console.error('PerformCopyOperations error:', error);
+        }
+    }
+
+    async #deleteDirectoryRecursive(dirPath: any) {
+        if (fs.existsSync(dirPath)) {
+            const files = fs.readdirSync(dirPath);
+            for (const file of files) {
+                const curPath = path.join(dirPath, file);
+                if (fs.lstatSync(curPath).isDirectory()) {
+                    // Recursively delete subdirectories
+                    await this.#deleteDirectoryRecursive(curPath);
+                } else {
+                    // Delete files
+                    fs.unlinkSync(curPath);
+                }
+            }
+            // Delete the directory itself
+            fs.rmdirSync(dirPath);
+        }
+    }
+
+    async #createAppDirectory() {
+        const appDir = this.#appDirPath;
+
+        try {
+            // Check if the directory exists
+            if (fs.existsSync(appDir)) {
+                console.log('Directory exists. Recreating it...');
+                // Delete the directory and its contents
+                await this.#deleteDirectoryRecursive(appDir);
+            }
+
+            // Create the directory
+            fs.mkdirSync(appDir);
+            console.log('Directory created');
+            // Add 'app' to .gitignore if not already present
+            const gitignorePath = path.resolve(appDir, '.gitignore');
+            let gitignoreContent = '';
+            if (fs.existsSync(gitignorePath)) {
+                gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
+            } else {
+                fs.writeFileSync(gitignorePath, '');
+                console.log('Created .gitignore file');
+            }
+
+            if (!gitignoreContent.includes('*')) {
+                fs.appendFileSync(gitignorePath, '*\n');
+                console.log('Added "*" to .gitignore');
+            }
+            await this.#performCopyOperations();
+        } catch (error) {
+            console.error('Error creating app directory:', error);
+        }
     }
 
     async generateAppNavigations() {
-        return this.#setLayoutAndGenerateNavigation();
+        return this.#createAppDirectory();
     }
 }
+
+export default GenerateMobileNavigations;