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

package/src/utils/generateMobileNavigations.ts

@@ -10,14 +10,16 @@ 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;
@@ -27,6 +29,7 @@ type IGenerateMobileNavigationsProps = {
     customTabBarPath?: string;
     customDrawerPath?: string;
     customHeaderPath?: string;
+    i18Options: any;
 };
 
 export const readJsonFile = (filePath) => {
@@ -74,6 +77,7 @@ export class GenerateMobileNavigations {
     #customTabBarPath: string;
     #customDrawerPath: string;
     #customHeaderPath: string;
+    #i18Options: any;
 
     constructor({
         appDirPath,
@@ -83,6 +87,7 @@ export class GenerateMobileNavigations {
         customTabBarPath = null,
         customDrawerPath = null,
         customHeaderPath = null,
+        i18Options = {},
     }: IGenerateMobileNavigationsProps) {
         this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         this.#appDirPath = appDirPath;
@@ -92,6 +97,7 @@ export class GenerateMobileNavigations {
         this.#customTabBarPath = customTabBarPath;
         this.#customDrawerPath = customDrawerPath;
         this.#customHeaderPath = customHeaderPath;
+        this.#i18Options = i18Options;
     }
 
     async #readJsonFile(filePath) {
@@ -393,6 +399,212 @@ export class GenerateMobileNavigations {
         return false;
     }
 
+    async #generateMainRoutesFile({ initialRouteName, i18Options }) {
+        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 = '';
+            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?.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);
+            return false;
+        }
+    }
+
+    async #generateMainRoutes({ appDirPath, i18Options, initialRouteName }) {
+        const mainRoutesFile = path.join(appDirPath, `/${mainRoutesJsFileName}`);
+        const imports: any = await this.#generateMainRoutesFile({ initialRouteName, i18Options });
+        const { appFeatures } = imports;
+        if (appFeatures) {
+            const writeFileResponse = await this.#writeFile(mainRoutesFile, appFeatures);
+            if (writeFileResponse) return true;
+            else return false;
+        }
+        return false;
+    }
+
+    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);
+            return false;
+        }
+    }
+
+    async #generateApp({ appDirPath, i18Options, initialRouteName }) {
+        const mainRoutesFile = path.join(appDirPath, `/${mainAppFileName}`);
+        const imports: any = await this.#generateAppFile({ initialRouteName, i18Options });
+        const { appFeatures } = imports;
+        if (appFeatures) {
+            const writeFileResponse = await this.#writeFile(mainRoutesFile, 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}`);
@@ -445,7 +657,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,12 +704,12 @@ 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}   />}
                        ${
@@ -550,7 +762,7 @@ 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) {
@@ -580,7 +792,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`;
@@ -626,23 +838,23 @@ 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="${
+                    ? `drawerIcon: ({ color, size }) => <${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(
+                          ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
                                 pkgRouteConfig?.customHeader?.props ?? '',
                             )}}  />`
                           : ''
                   }}}}
-                >{(props:any) => <AuthWrapper 
+                >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                            component={<Component${moduleNumber} {...props}   />}
                            ${
@@ -699,7 +911,7 @@ 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;
@@ -807,7 +1019,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`;
@@ -860,7 +1072,7 @@ 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="${
+                    ? `tabBarIcon: ({ color }) => <${pkgRouteConfig?.icon?.name} name="${
                           pkgRouteConfig?.icon?.props?.name ?? 'home'
                       }" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${
                           pkgRouteConfig?.icon?.props?.color ?? 'color'
@@ -871,13 +1083,13 @@ 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}   />}
                        ${
@@ -936,7 +1148,7 @@ 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) {
@@ -1178,8 +1390,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 +1400,14 @@ 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} />}' : ''}
                        >
                       {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
                      </Drawer.Navigator>
@@ -1219,20 +1431,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 +1452,7 @@ export class GenerateMobileNavigations {
                        }}})}
                        ${
                            customTabBarPath
-                               ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+                               ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
                                : ''
                        }
                      >
@@ -1274,21 +1486,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 +1508,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 +1529,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 +1539,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} />
@@ -1372,18 +1584,29 @@ export class GenerateMobileNavigations {
         const customTabBarPath = this.#customTabBarPath;
         const customDrawerPath = this.#customDrawerPath;
         const customHeaderPath = this.#customHeaderPath;
+        const i18Options = this.#i18Options;
 
         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({
+            // await this.#generateModulesTsFile({
+            //     appDirPath,
+            //     modules,
+            //     initialRouteName,
+            // });
+            await this.#generateMainRoutes({
+                appDirPath,
+                i18Options,
+                initialRouteName,
+            });
+            const isAppFileGenerated = await this.#generateApp({
                 appDirPath,
-                modules,
+                i18Options,
                 initialRouteName,
             });
-            if (isModuleTsFileGenerated) {
+            if (isAppFileGenerated) {
                 const isStackCreated = await this.#generateStackNavigations({
                     appDirPath,
                     modules,