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

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.4-alpha.0](https://github.com/CDEBase/admin-layout/compare/v9.0.1-alpha.3...v9.0.4-alpha.0) (2024-09-13)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
+## [9.0.1-alpha.2](https://github.com/CDEBase/admin-layout/compare/v9.0.1-alpha.1...v9.0.1-alpha.2) (2024-09-13)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
+## [9.0.1-alpha.1](https://github.com/CDEBase/admin-layout/compare/v9.0.1-alpha.0...v9.0.1-alpha.1) (2024-09-12)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
+## [9.0.1-alpha.0](https://github.com/CDEBase/admin-layout/compare/v9.0.2-alpha.13...v9.0.1-alpha.0) (2024-09-11)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
+## [9.0.2-alpha.4](https://github.com/cdmbase/admin-layout/compare/v9.0.2-alpha.3...v9.0.2-alpha.4) (2024-09-08)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
 ## [9.0.2-alpha.0](https://github.com/CDEBase/admin-layout/compare/v7.3.8-alpha.37...v9.0.2-alpha.0) (2024-09-05)
 
 **Note:** Version bump only for package @admin-layout/gluestack-ui-mobile

package/lib/components/AuthWrapper.d.ts

@@ -1 +1,2 @@
-export declare const AuthWrapper: ({ auth, component, unauthenticatedComponent, withLifeCycle, withInteraction, withLifeCycleInteraction }: any) => any;
+export declare const AuthWrapper: ({ auth, component, unauthenticatedComponent, withLifeCycle, withInteraction, withLifeCycleInteraction, }: any) => any;
+export default AuthWrapper;

package/lib/components/AuthWrapper.js

@@ -3,8 +3,8 @@ import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import DefaultAuthComponent from './UnAuthenticatedComponent';
-import { withLifeCycleManaged, withInteractionsManaged, withLifeCycleInteractionsManaged } from './with-interactions-lifecycle-managed';
-export const AuthWrapper = ({ auth = false, component, unauthenticatedComponent = null, withLifeCycle = null, withInteraction = null, withLifeCycleInteraction = null }) => {
+import { withLifeCycleManaged, withInteractionsManaged, withLifeCycleInteractionsManaged, } from './with-interactions-lifecycle-managed';
+export const AuthWrapper = ({ auth = false, component, unauthenticatedComponent = null, withLifeCycle = null, withInteraction = null, withLifeCycleInteraction = null, }) => {
     const user = useSelector((state) => state.user);
     const { authenticated } = isUserAuthenticated();
     const navigation = useNavigation();
@@ -24,4 +24,5 @@ export const AuthWrapper = ({ auth = false, component, unauthenticatedComponent
     else
         return wrapperComponent;
 };
+export default AuthWrapper;
 //# sourceMappingURL=AuthWrapper.js.map

package/lib/components/AuthWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthWrapper.js","sourceRoot":"","sources":["../../src/components/AuthWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,oBAAoB,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAC,oBAAoB,EAAC,uBAAuB,EAAC,gCAAgC,EAAC,MAAM,uCAAuC,CAAC;AAEpI,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,GAAC,KAAK,EAAC,SAAS,EAAC,wBAAwB,GAAC,IAAI,EAAC,aAAa,GAAC,IAAI,EAAC,eAAe,GAAC,IAAI,EAAC,wBAAwB,GAAC,IAAI,EAAM,EAAE,EAAE;IAC5J,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChD,MAAM,UAAU,GAAG,aAAa,EAAO,CAAC;IAExC,KAAK,CAAC,SAAS,CAAC,GAAE,EAAE;QAClB,IAAG,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO;YAAE,UAAU,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IACnE,CAAC,EAAC,CAAC,IAAI,EAAC,IAAI,CAAC,CAAC,CAAA;IAEd,MAAM,gBAAgB,GAAG,aAAa;QAC9B,CAAC,CAAC,oBAAoB,CAAC,SAAS,CAAC;QACjC,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,uBAAuB,CAAC,SAAS,EAAC,eAAe,EAAE,QAAQ,IAAE,IAAI,CAAC;YACpE,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,gCAAgC,CAAC,SAAS,EAAC,wBAAwB,EAAE,QAAQ,IAAE,IAAI,CAAC;gBACtF,CAAC,CAAA,SAAS,CAAC;IAGnB,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO;QACtB,OAAO,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAA,oBAAC,oBAAoB,OAAG,CAAC;;QACpF,OAAO,gBAAgB,CAAC;AACjC,CAAC,CAAC"}
+{"version":3,"file":"AuthWrapper.js","sourceRoot":"","sources":["../../src/components/AuthWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,oBAAoB,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EACH,oBAAoB,EACpB,uBAAuB,EACvB,gCAAgC,GACnC,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EACxB,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,wBAAwB,GAAG,IAAI,EAC/B,aAAa,GAAG,IAAI,EACpB,eAAe,GAAG,IAAI,EACtB,wBAAwB,GAAG,IAAI,GAC7B,EAAE,EAAE;IACN,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChD,MAAM,UAAU,GAAG,aAAa,EAAO,CAAC;IAExC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO;YAAE,UAAU,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,gBAAgB,GAAG,aAAa;QAClC,CAAC,CAAC,oBAAoB,CAAC,SAAS,CAAC;QACjC,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,uBAAuB,CAAC,SAAS,EAAE,eAAe,EAAE,QAAQ,IAAI,IAAI,CAAC;YACvE,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,gCAAgC,CAAC,SAAS,EAAE,wBAAwB,EAAE,QAAQ,IAAI,IAAI,CAAC;gBACzF,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO;QAAE,OAAO,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,oBAAC,oBAAoB,OAAG,CAAC;;QAC7G,OAAO,gBAAgB,CAAC;AACjC,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/containers/layout/BasicLayout.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("react-redux").ConnectedComponent<React.FC<any>,
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
-    context?: React.Context<import("react-redux").ReactReduxContextValue<any, UnknownAction>>;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 } | {
     [x: string]: any;

package/lib/utils/generateMobileNavigations.d.ts

@@ -6,13 +6,14 @@ type IGenerateMobileNavigationsProps = {
     customTabBarPath?: string;
     customDrawerPath?: string;
     customHeaderPath?: string;
+    i18Options: any;
 };
 export declare const readJsonFile: (filePath: any) => Promise<unknown>;
 export declare const readFile: (filePath: any) => Promise<unknown>;
 export declare const getLayoutConfig: () => Promise<unknown>;
 export declare class GenerateMobileNavigations {
     #private;
-    constructor({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath, customTabBarPath, customDrawerPath, customHeaderPath, }: IGenerateMobileNavigationsProps);
+    constructor({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath, customTabBarPath, customDrawerPath, customHeaderPath, i18Options, }: IGenerateMobileNavigationsProps);
     generateAppNavigations(): Promise<boolean>;
 }
 export {};

package/lib/utils/generateMobileNavigations.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _GenerateMobileNavigations_instances, _GenerateMobileNavigations_layoutSettings, _GenerateMobileNavigations_appDirPath, _GenerateMobileNavigations_modules, _GenerateMobileNavigations_initialRouteName, _GenerateMobileNavigations_unauthenticatedComponentPath, _GenerateMobileNavigations_customTabBarPath, _GenerateMobileNavigations_customDrawerPath, _GenerateMobileNavigations_customHeaderPath, _GenerateMobileNavigations_readJsonFile, _GenerateMobileNavigations_getLayoutConfig, _GenerateMobileNavigations_execPromise, _GenerateMobileNavigations_renameFile, _GenerateMobileNavigations_writeFile, _GenerateMobileNavigations_makeDir, _GenerateMobileNavigations_getModulesRouteConfig, _GenerateMobileNavigations_resolveImportPath, _GenerateMobileNavigations_generateAppRoutesJson, _GenerateMobileNavigations_generateImportStatements, _GenerateMobileNavigations_generateModulesTsFile, _GenerateMobileNavigations_generateStackNavigations, _GenerateMobileNavigations_generateDrawerNavigationsFile, _GenerateMobileNavigations_generateDrawerNavigations, _GenerateMobileNavigations_generateBottomTabNavigationsFile, _GenerateMobileNavigations_generateBottomTabNavigations, _GenerateMobileNavigations_generateBottomTabDrawerNavigations, _GenerateMobileNavigations_generateAppNavigationFile, _GenerateMobileNavigations_setLayoutAndGenerateNavigation;
+var _GenerateMobileNavigations_instances, _GenerateMobileNavigations_layoutSettings, _GenerateMobileNavigations_appDirPath, _GenerateMobileNavigations_modules, _GenerateMobileNavigations_initialRouteName, _GenerateMobileNavigations_unauthenticatedComponentPath, _GenerateMobileNavigations_customTabBarPath, _GenerateMobileNavigations_customDrawerPath, _GenerateMobileNavigations_customHeaderPath, _GenerateMobileNavigations_i18Options, _GenerateMobileNavigations_readJsonFile, _GenerateMobileNavigations_getLayoutConfig, _GenerateMobileNavigations_execPromise, _GenerateMobileNavigations_renameFile, _GenerateMobileNavigations_writeFile, _GenerateMobileNavigations_makeDir, _GenerateMobileNavigations_getModulesRouteConfig, _GenerateMobileNavigations_resolveImportPath, _GenerateMobileNavigations_generateAppRoutesJson, _GenerateMobileNavigations_generateImportStatements, _GenerateMobileNavigations_generateModulesTsFile, _GenerateMobileNavigations_generateMainRoutesFile, _GenerateMobileNavigations_generateMainRoutes, _GenerateMobileNavigations_generateAppFile, _GenerateMobileNavigations_generateApp, _GenerateMobileNavigations_generateStackNavigations, _GenerateMobileNavigations_generateDrawerNavigationsFile, _GenerateMobileNavigations_generateDrawerNavigations, _GenerateMobileNavigations_generateBottomTabNavigationsFile, _GenerateMobileNavigations_generateBottomTabNavigations, _GenerateMobileNavigations_generateBottomTabDrawerNavigations, _GenerateMobileNavigations_generateAppNavigationFile, _GenerateMobileNavigations_setLayoutAndGenerateNavigation;
 import * as fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
@@ -22,14 +22,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';
 export const readJsonFile = (filePath) => {
     return new Promise((resolve, reject) => {
         fs.readFile(filePath, 'utf8', (err, data) => {
@@ -66,7 +68,7 @@ export const getLayoutConfig = async () => {
     return layoutConfigFileData;
 };
 export class GenerateMobileNavigations {
-    constructor({ appDirPath, modules, initialRouteName = '', unauthenticatedComponentPath = null, customTabBarPath = null, customDrawerPath = null, customHeaderPath = null, }) {
+    constructor({ appDirPath, modules, initialRouteName = '', unauthenticatedComponentPath = null, customTabBarPath = null, customDrawerPath = null, customHeaderPath = null, i18Options = {}, }) {
         _GenerateMobileNavigations_instances.add(this);
         _GenerateMobileNavigations_layoutSettings.set(this, process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null);
         _GenerateMobileNavigations_appDirPath.set(this, void 0);
@@ -76,6 +78,7 @@ export class GenerateMobileNavigations {
         _GenerateMobileNavigations_customTabBarPath.set(this, void 0);
         _GenerateMobileNavigations_customDrawerPath.set(this, void 0);
         _GenerateMobileNavigations_customHeaderPath.set(this, void 0);
+        _GenerateMobileNavigations_i18Options.set(this, void 0);
         __classPrivateFieldSet(this, _GenerateMobileNavigations_layoutSettings, process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null, "f");
         __classPrivateFieldSet(this, _GenerateMobileNavigations_appDirPath, appDirPath, "f");
         __classPrivateFieldSet(this, _GenerateMobileNavigations_modules, modules, "f");
@@ -84,12 +87,13 @@ export class GenerateMobileNavigations {
         __classPrivateFieldSet(this, _GenerateMobileNavigations_customTabBarPath, customTabBarPath, "f");
         __classPrivateFieldSet(this, _GenerateMobileNavigations_customDrawerPath, customDrawerPath, "f");
         __classPrivateFieldSet(this, _GenerateMobileNavigations_customHeaderPath, customHeaderPath, "f");
+        __classPrivateFieldSet(this, _GenerateMobileNavigations_i18Options, i18Options, "f");
     }
     async generateAppNavigations() {
         return __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_setLayoutAndGenerateNavigation).call(this);
     }
 }
-_GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNavigations_appDirPath = new WeakMap(), _GenerateMobileNavigations_modules = new WeakMap(), _GenerateMobileNavigations_initialRouteName = new WeakMap(), _GenerateMobileNavigations_unauthenticatedComponentPath = new WeakMap(), _GenerateMobileNavigations_customTabBarPath = new WeakMap(), _GenerateMobileNavigations_customDrawerPath = new WeakMap(), _GenerateMobileNavigations_customHeaderPath = new WeakMap(), _GenerateMobileNavigations_instances = new WeakSet(), _GenerateMobileNavigations_readJsonFile = async function _GenerateMobileNavigations_readJsonFile(filePath) {
+_GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNavigations_appDirPath = new WeakMap(), _GenerateMobileNavigations_modules = new WeakMap(), _GenerateMobileNavigations_initialRouteName = new WeakMap(), _GenerateMobileNavigations_unauthenticatedComponentPath = new WeakMap(), _GenerateMobileNavigations_customTabBarPath = new WeakMap(), _GenerateMobileNavigations_customDrawerPath = new WeakMap(), _GenerateMobileNavigations_customHeaderPath = new WeakMap(), _GenerateMobileNavigations_i18Options = new WeakMap(), _GenerateMobileNavigations_instances = new WeakSet(), _GenerateMobileNavigations_readJsonFile = async function _GenerateMobileNavigations_readJsonFile(filePath) {
     return readJsonFile(filePath);
 }, _GenerateMobileNavigations_getLayoutConfig = async function _GenerateMobileNavigations_getLayoutConfig() {
     return getLayoutConfig();
@@ -378,6 +382,201 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
             return false;
     }
     return false;
+}, _GenerateMobileNavigations_generateMainRoutesFile = async function _GenerateMobileNavigations_generateMainRoutesFile({ initialRouteName, i18Options }) {
+    try {
+        const layoutSettings = __classPrivateFieldGet(this, _GenerateMobileNavigations_layoutSettings, "f");
+        const layoutConfigFileData = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_getLayoutConfig).call(this);
+        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;
+    }
+}, _GenerateMobileNavigations_generateMainRoutes = async function _GenerateMobileNavigations_generateMainRoutes({ appDirPath, i18Options, initialRouteName }) {
+    const mainRoutesFile = path.join(appDirPath, `/${mainRoutesJsFileName}`);
+    const imports = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateMainRoutesFile).call(this, { initialRouteName, i18Options });
+    const { appFeatures } = imports;
+    if (appFeatures) {
+        const writeFileResponse = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_writeFile).call(this, mainRoutesFile, appFeatures);
+        if (writeFileResponse)
+            return true;
+        else
+            return false;
+    }
+    return false;
+}, _GenerateMobileNavigations_generateAppFile = async function _GenerateMobileNavigations_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;
+    }
+}, _GenerateMobileNavigations_generateApp = async function _GenerateMobileNavigations_generateApp({ appDirPath, i18Options, initialRouteName }) {
+    const mainRoutesFile = path.join(appDirPath, `/${mainAppFileName}`);
+    const imports = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateAppFile).call(this, { initialRouteName, i18Options });
+    const { appFeatures } = imports;
+    if (appFeatures) {
+        const writeFileResponse = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_writeFile).call(this, mainRoutesFile, appFeatures);
+        if (writeFileResponse)
+            return true;
+        else
+            return false;
+    }
+    return false;
 }, _GenerateMobileNavigations_generateStackNavigations = async function _GenerateMobileNavigations_generateStackNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
     const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
     const stackDirPath = path.join(appDirPath, `/${stacksDirPath}`);
@@ -422,7 +621,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
     let customUnauthenticatedComponentNames = '';
     const regex = /\.(tsx|ts|jsx|js)$/i;
     importStatements += `import * as React from 'react';\n`;
-    importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+    importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
     if (unauthenticatedComponentPath)
         importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
     for (const pkg of stackRouteConfig) {
@@ -456,9 +655,9 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
                 options={{...${options},...{${pkgRouteConfig?.customHeader &&
                 Object.keys(pkgRouteConfig.customHeader)?.length &&
                 customHeaderComponentPath
-                ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
+                ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
                 : ''}}}}
-             >{(props:any) => <AuthWrapper 
+             >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                        component={<Component${moduleNumber} {...props}   />}
                        ${pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -498,7 +697,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
             });
         }
         moduleContent += `</Stack.Group>`;
-        moduleRender = `export default ({Stack,...rest}:any) => { return (<>${moduleContent}</>)}`;
+        moduleRender = `export default ({Stack,...rest}) => { return (<>${moduleContent}</>)}`;
     }
     stackNavigator = importStatements + '\n' + moduleRender;
     if (stackNavigator) {
@@ -531,7 +730,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
     let customUnauthenticatedComponentNames = '';
     const regex = /\.(tsx|ts|jsx|js)$/i;
     importStatements += `import * as React from 'react';\n`;
-    importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+    importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
     if (unauthenticatedComponentPath)
         importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
     for (const pkgRouteConfig of drawerConfig) {
@@ -565,14 +764,14 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
                   //component={Component${moduleNumber}}
                   initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
                   options={{...${options},...{${pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-            ? `drawerIcon: ({ color, size }: { color: any,size:any }) => <${pkgRouteConfig?.icon?.name} name="${pkgRouteConfig?.icon?.props?.name ?? 'home'}" size={${pkgRouteConfig?.icon?.props?.size ?? `size`}} color={${pkgRouteConfig?.icon?.props?.color ?? 'color'}} />`
+            ? `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(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
+            ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
             : ''}}}}
-                >{(props:any) => <AuthWrapper 
+                >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                            component={<Component${moduleNumber} {...props}   />}
                            ${pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -615,7 +814,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
             importStatements += `import ${impUnauthenticatedName} from '${unCompPath}';\n`;
         });
     }
-    moduleRender = `export default ({Drawer,...rest}:any) => { return (<>${moduleContent}</>)}`;
+    moduleRender = `export default ({Drawer,...rest}) => { return (<>${moduleContent}</>)}`;
     moduleNavigation = importStatements + '\n' + moduleRender;
     const drawerNavigator = moduleNavigation;
     if (drawerNavigator) {
@@ -719,7 +918,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
     let customUnauthenticatedComponentNames = '';
     const regex = /\.(tsx|ts|jsx|js)$/i;
     importStatements += `import * as React from 'react';\n`;
-    importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
+    importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
     if (unauthenticatedComponentPath)
         importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
     for (const pkgRouteConfig of bottomTabConfig) {
@@ -756,15 +955,15 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
           //component={Component${moduleNumber}}
           initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
           options={{...${options},...{${pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-            ? `tabBarIcon: ({ color }: { color: any }) => <${pkgRouteConfig?.icon?.name} name="${pkgRouteConfig?.icon?.props?.name ?? 'home'}" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${pkgRouteConfig?.icon?.props?.color ?? 'color'}} />`
+            ? `tabBarIcon: ({ color }) => <${pkgRouteConfig?.icon?.name} name="${pkgRouteConfig?.icon?.props?.name ?? 'home'}" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${pkgRouteConfig?.icon?.props?.color ?? 'color'}} />`
             : ''}
            ${pkgRouteConfig?.customHeader &&
             Object.keys(pkgRouteConfig.customHeader)?.length &&
             customHeaderComponentPath
-            ? `,header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
+            ? `,header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(pkgRouteConfig?.customHeader?.props ?? '')}}  />`
             : ''}
            }}}
-        >{(props:any) => <AuthWrapper 
+        >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                        component={<Component${moduleNumber} {...props}   />}
                        ${pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -808,7 +1007,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
             importStatements += `import ${impUnauthenticatedName} from '${unCompPath}';\n`;
         });
     }
-    moduleRender = `export default ({Tab,...rest}:any) => { return (<>${moduleContent}</>)}`;
+    moduleRender = `export default ({Tab,...rest}) => { return (<>${moduleContent}</>)}`;
     moduleNavigation = importStatements + '\n' + moduleRender;
     const bottomTabNavigator = moduleNavigation;
     if (bottomTabNavigator) {
@@ -1052,8 +1251,8 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
          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
@@ -1061,13 +1260,13 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
                        //screenOptions={${JSON.stringify(screenOptions)}}
                        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>
@@ -1091,23 +1290,23 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
              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} />` : ''}};
+                     const defaultHeader = {${isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''}};
                     return (
                      <Tab.Navigator 
                        initialRouteName={initialRouteName}
-                       screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{${customHeaderPath
-            ? `header: (props:any) => {
+                       screenOptions={(props)=>({...props,...defaultScreenOptions,...{${customHeaderPath
+            ? `header: (props) => {
                           const title = getHeaderTitle(props.options, props.route.name);
                           return <CustomHeader  {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
                         }`
             : ''}}})}
                        ${customTabBarPath
-            ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
+            ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"}  {...props} />}'
             : ''}
                      >
                       {settings?.layout == 'host-bottom' ? hostBottomNavigations({ Tab }) : bottomNavigations({Tab})}
@@ -1140,30 +1339,30 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
        `;
         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} />` : ''}};
+                   const defaultHeader = {${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} />}'
             : ''}
                      >
                      {settings?.layout == 'host-bottom' ? hostBottomNavigations({ Tab }) : bottomNavigations({Tab})}
                      </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} />` : ''}};
+                   const defaultHeader = {${isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''}};
                   return (
                     <Drawer.Navigator
                        initialRouteName={${JSON.stringify(initialRouteName)}}
@@ -1174,7 +1373,7 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
                          : navigationRef?.getCurrentRoute()?.route?.name 
                          : "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} />;
                         }`
@@ -1182,10 +1381,10 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
                          
                          }})}
                          ${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} />
@@ -1226,17 +1425,28 @@ _GenerateMobileNavigations_layoutSettings = new WeakMap(), _GenerateMobileNaviga
     const customTabBarPath = __classPrivateFieldGet(this, _GenerateMobileNavigations_customTabBarPath, "f");
     const customDrawerPath = __classPrivateFieldGet(this, _GenerateMobileNavigations_customDrawerPath, "f");
     const customHeaderPath = __classPrivateFieldGet(this, _GenerateMobileNavigations_customHeaderPath, "f");
+    const i18Options = __classPrivateFieldGet(this, _GenerateMobileNavigations_i18Options, "f");
     const layoutSettings = __classPrivateFieldGet(this, _GenerateMobileNavigations_layoutSettings, "f");
     const layoutConfigFileData = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_getLayoutConfig).call(this);
     const layoutType = layoutSettings?.layout || 'bottom';
     const isAppRoutesGenerated = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateAppRoutesJson).call(this, { appDirPath });
     if (isAppRoutesGenerated) {
-        const isModuleTsFileGenerated = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateModulesTsFile).call(this, {
+        // await this.#generateModulesTsFile({
+        //     appDirPath,
+        //     modules,
+        //     initialRouteName,
+        // });
+        await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateMainRoutes).call(this, {
+            appDirPath,
+            i18Options,
+            initialRouteName,
+        });
+        const isAppFileGenerated = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateApp).call(this, {
             appDirPath,
-            modules,
+            i18Options,
             initialRouteName,
         });
-        if (isModuleTsFileGenerated) {
+        if (isAppFileGenerated) {
             const isStackCreated = await __classPrivateFieldGet(this, _GenerateMobileNavigations_instances, "m", _GenerateMobileNavigations_generateStackNavigations).call(this, {
                 appDirPath,
                 modules,