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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/lib/components/AuthWrapper.d.ts +2 -1
  3. package/lib/components/AuthWrapper.js +3 -2
  4. package/lib/components/AuthWrapper.js.map +1 -1
  5. package/lib/containers/layout/BasicLayout.d.ts +1 -1
  6. package/lib/utils/generateMobileNavigations.d.ts +2 -1
  7. package/lib/utils/generateMobileNavigations.js +262 -50
  8. package/lib/utils/generateMobileNavigations.js.map +1 -1
  9. package/package.json +3 -3
  10. package/src/components/AuthWrapper.tsx +28 -17
  11. package/src/utils/generateMobileNavigations.ts +274 -48
package/src/utils/generateMobileNavigations.ts CHANGED
@@ -10,14 +10,16 @@ const require = createRequire(import.meta.url);
10
10
  const __filename = fileURLToPath(import.meta.url);
11
11
  const __dirname = path.dirname(__filename);
12
12
  const configFilePath = path.join(__dirname, '../layout.json');
13
- const appNavigationFileName = 'navigation.tsx';
13
+ const appNavigationFileName = 'navigation.js';
14
14
  const mainRoutesFileName = 'main_routes.json';
15
15
  const modulesFileName = 'modules.ts';
16
- const stacksDirPath = 'stack/index.tsx';
17
- const drawerFilePath = 'drawer/index.tsx';
18
- const hostDrawerFilePath = 'host_drawer/index.tsx';
19
- const bottomFilePath = 'bottom/index.tsx';
20
- const hostBottomFilePath = 'host_bottom/index.tsx';
16
+ const stacksDirPath = 'stack/index.js';
17
+ const drawerFilePath = 'drawer/index.js';
18
+ const hostDrawerFilePath = 'host_drawer/index.js';
19
+ const bottomFilePath = 'bottom/index.js';
20
+ const hostBottomFilePath = 'host_bottom/index.js';
21
+ const mainRoutesJsFileName = 'mainRoutes.js';
22
+ const mainAppFileName = 'index.js';
21
23
 
22
24
  type IGenerateMobileNavigationsProps = {
23
25
  appDirPath: string;
@@ -27,6 +29,7 @@ type IGenerateMobileNavigationsProps = {
27
29
  customTabBarPath?: string;
28
30
  customDrawerPath?: string;
29
31
  customHeaderPath?: string;
32
+ i18Options: any;
30
33
  };
31
34
 
32
35
  export const readJsonFile = (filePath) => {
@@ -74,6 +77,7 @@ export class GenerateMobileNavigations {
74
77
  #customTabBarPath: string;
75
78
  #customDrawerPath: string;
76
79
  #customHeaderPath: string;
80
+ #i18Options: any;
77
81
 
78
82
  constructor({
79
83
  appDirPath,
@@ -83,6 +87,7 @@ export class GenerateMobileNavigations {
83
87
  customTabBarPath = null,
84
88
  customDrawerPath = null,
85
89
  customHeaderPath = null,
90
+ i18Options = {},
86
91
  }: IGenerateMobileNavigationsProps) {
87
92
  this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
88
93
  this.#appDirPath = appDirPath;
@@ -92,6 +97,7 @@ export class GenerateMobileNavigations {
92
97
  this.#customTabBarPath = customTabBarPath;
93
98
  this.#customDrawerPath = customDrawerPath;
94
99
  this.#customHeaderPath = customHeaderPath;
100
+ this.#i18Options = i18Options;
95
101
  }
96
102
 
97
103
  async #readJsonFile(filePath) {
@@ -393,6 +399,212 @@ export class GenerateMobileNavigations {
393
399
  return false;
394
400
  }
395
401
 
402
+ async #generateMainRoutesFile({ initialRouteName, i18Options }) {
403
+ try {
404
+ const layoutSettings = this.#layoutSettings;
405
+ const layoutConfigFileData = await this.#getLayoutConfig();
406
+ const hostRouteConfig = layoutConfigFileData['host-bottom'];
407
+ const hostRouteKey = Object.keys(hostRouteConfig)[1];
408
+ const hostLayout = hostRouteConfig[hostRouteKey];
409
+
410
+ let importStatements = '';
411
+ importStatements += `import React from 'react';\n`;
412
+ importStatements += `import { InversifyProvider, PluginArea } from '@common-stack/client-react';\n`;
413
+ importStatements += `import { useSelector, useDispatch } from 'react-redux';\n`;
414
+ importStatements += `import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';\n`;
415
+ importStatements += `import {layoutRouteConfig,getReplacedRouteConfig,ErrorBoundary,NavigationContainerComponent,ApplicationErrorHandler,Box,Spinner,} from '@admin-layout/gluestack-ui-mobile';\n`;
416
+ importStatements += `import mainRouteConfig from './main_routes.json';\n`;
417
+ importStatements += `import features from './mobile-stack-react/modules.js';\n`;
418
+ importStatements += `import AppNavigations from './navigation';\n`;
419
+ importStatements += `import {loadContext} from './mobile-stack-react/load-context.mobile.js';\n`;
420
+
421
+ let classStructure = `
422
+
423
+ const mainAppRoutes = mainRouteConfig || [];
424
+
425
+ const appRoutes = [...[mainAppRoutes],features?.routeConfig];
426
+
427
+ const featureRouteConfig = appRoutes?.flat(1)??features?.routeConfig;
428
+ features.routeConfig = featureRouteConfig;
429
+ let appConfiguredRoutes = features?.getConfiguredRoutes2("/");
430
+
431
+ const DefaultProvider = ({children}) => <>{children}</>
432
+
433
+ export function MainRoute({ container,externalProvider: ExternalProvider = DefaultProvider,externalProviderProps={},linking = {} }){
434
+ const dispatch = useDispatch();
435
+ const defaultSettings = useSelector((state) => state.settings);
436
+ const initialRouteName = '${initialRouteName}';
437
+ const layoutSettings = ${JSON.stringify({ ...layoutSettings, hostLayout: hostLayout.key })}
438
+ const [mainFeatures, setMainFeatures] = React.useState(null);
439
+
440
+ React.useEffect(() => {
441
+ setDefalutSettings();
442
+ }, []);
443
+
444
+
445
+ const setDefalutSettings = React.useCallback(()=>{
446
+ const config = {
447
+ ...defaultSettings,
448
+ ...layoutSettings,
449
+ };
450
+ dispatch({
451
+ type: CHANGE_SETTINGS_ACTION,
452
+ payload: config,
453
+ });
454
+ },[]);
455
+
456
+ React.useEffect(() => {
457
+ if (defaultSettings) {
458
+ const settingObj = { ...defaultSettings };
459
+ const layoutType = settingObj.layout;
460
+ const {replacedConfiguredRouteConfig} = getReplacedRouteConfig({
461
+ layoutType: layoutType,
462
+ routeConfig: appRoutes,
463
+ layoutConfigData: layoutRouteConfig,
464
+ initialRouteName,
465
+ });
466
+ if(replacedConfiguredRouteConfig){
467
+ const moduleRouteConfigObject = Object.assign({}, ...replacedConfiguredRouteConfig?.flat(1)??[]);
468
+ const replacedRouteConfig = Object.fromEntries(Object.entries(moduleRouteConfigObject));
469
+ const appReplacedRouteConfig = replacedRouteConfig ? Object.keys(replacedRouteConfig)?.map((k)=>({[k]:replacedRouteConfig[k]})) : [];
470
+
471
+ if (appReplacedRouteConfig) {
472
+ 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)??[];
473
+ 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)??[];
474
+ const featureRouteConfig = defaultSettings?.layout == 'host-bottom' ? hostRouteConfig:layoutRouteConfig;
475
+ features.routeConfig = featureRouteConfig;
476
+ setMainFeatures(features);
477
+ }
478
+ }
479
+ }
480
+ }, [defaultSettings]);
481
+
482
+ const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
483
+
484
+ if (!mainFeatures || mainFeatures?.routeConfig?.length == 0) return loadingComponent();
485
+
486
+ const plugins = mainFeatures?.getComponentFillPlugins();
487
+ const configuredRoutes = mainFeatures?.getConfiguredRoutes2('/');
488
+ appConfiguredRoutes = configuredRoutes;
489
+
490
+ return (
491
+ <InversifyProvider container={container} modules={mainFeatures}>
492
+ {mainFeatures?.getWrappedRoot(
493
+ <ErrorBoundary>
494
+ <NavigationContainerComponent configurableRoutes={configuredRoutes} independent={true} linking={linking}>
495
+ <ExternalProvider {...externalProviderProps}>
496
+ <AppNavigations />
497
+ </ExternalProvider>
498
+ <PluginArea />
499
+ <ApplicationErrorHandler plugins={plugins} />
500
+ </NavigationContainerComponent>
501
+ </ErrorBoundary>,
502
+ )}
503
+ </InversifyProvider>
504
+ );
505
+ }
506
+
507
+ export { loadContext,appConfiguredRoutes };
508
+
509
+ export default features;
510
+ `.replace(/,(\s*)$/, ''); // Removes trailing comma
511
+
512
+ // Use Prettier to format the code
513
+ classStructure = prettier.format(classStructure, { parser: 'babel' });
514
+
515
+ const appFeatures = importStatements + '\n' + classStructure;
516
+
517
+ return { appFeatures };
518
+ } catch (err) {
519
+ console.error('Error:', err);
520
+ return false;
521
+ }
522
+ }
523
+
524
+ async #generateMainRoutes({ appDirPath, i18Options, initialRouteName }) {
525
+ const mainRoutesFile = path.join(appDirPath, `/${mainRoutesJsFileName}`);
526
+ const imports: any = await this.#generateMainRoutesFile({ initialRouteName, i18Options });
527
+ const { appFeatures } = imports;
528
+ if (appFeatures) {
529
+ const writeFileResponse = await this.#writeFile(mainRoutesFile, appFeatures);
530
+ if (writeFileResponse) return true;
531
+ else return false;
532
+ }
533
+ return false;
534
+ }
535
+
536
+ async #generateAppFile({ initialRouteName, i18Options }) {
537
+ try {
538
+ let importStatements = '';
539
+ importStatements += `import 'reflect-metadata';\n`;
540
+ importStatements += `import React from 'react';\n`;
541
+ importStatements += `import { SlotFillProvider } from '@common-stack/components-pro';\n`;
542
+ importStatements += `import { ApolloProvider } from '@apollo/client';\n`;
543
+ importStatements += `import { Provider } from 'react-redux';\n`;
544
+ importStatements += `import { PersistGate } from 'redux-persist/integration/react';\n`;
545
+ importStatements += `import { SafeAreaProvider } from 'react-native-safe-area-context';\n`;
546
+ importStatements += `import {GluestackUIProvider,config,i18next,reactI18Next} from '@admin-layout/gluestack-ui-mobile';\n`;
547
+ importStatements += `import { enableScreens } from 'react-native-screens';\n`;
548
+ importStatements += `import {MainRoute,loadContext,appConfiguredRoutes} from './mainRoutes.js'\n`;
549
+
550
+ let classStructure = `
551
+ enableScreens(true);
552
+ const { I18nextProvider } = reactI18Next;
553
+ i18next.options ={...i18next?.options??{},...${JSON.stringify(i18Options)}};
554
+
555
+ const DefaultProvider = ({children}) => <>{children}</>
556
+
557
+ function App({externalProvider = DefaultProvider,externalProviderProps={},linking = {}}){
558
+ const {store,persistor,container,apolloClient: client} = loadContext();
559
+
560
+
561
+ return (
562
+ <SlotFillProvider>
563
+ <ApolloProvider client={client}>
564
+ <Provider store={store}>
565
+ <PersistGate persistor={persistor}>
566
+ <I18nextProvider i18n={i18next}>
567
+ <SafeAreaProvider>
568
+ <GluestackUIProvider config={config}>
569
+ <MainRoute container={container} externalProvider={externalProvider} linking={linking} externalProviderProps={externalProviderProps} />
570
+ </GluestackUIProvider>
571
+ </SafeAreaProvider>
572
+ </I18nextProvider>
573
+ </PersistGate>
574
+ </Provider>
575
+ </ApolloProvider>
576
+ </SlotFillProvider>
577
+ );
578
+ }
579
+
580
+ export const configuredRoutes = appConfiguredRoutes;
581
+ export default App;
582
+ `.replace(/,(\s*)$/, ''); // Removes trailing comma
583
+
584
+ // Use Prettier to format the code
585
+ classStructure = prettier.format(classStructure, { parser: 'babel' });
586
+
587
+ const appFeatures = importStatements + '\n' + classStructure;
588
+
589
+ return { appFeatures };
590
+ } catch (err) {
591
+ console.error('Error:', err);
592
+ return false;
593
+ }
594
+ }
595
+
596
+ async #generateApp({ appDirPath, i18Options, initialRouteName }) {
597
+ const mainRoutesFile = path.join(appDirPath, `/${mainAppFileName}`);
598
+ const imports: any = await this.#generateAppFile({ initialRouteName, i18Options });
599
+ const { appFeatures } = imports;
600
+ if (appFeatures) {
601
+ const writeFileResponse = await this.#writeFile(mainRoutesFile, appFeatures);
602
+ if (writeFileResponse) return true;
603
+ else return false;
604
+ }
605
+ return false;
606
+ }
607
+
396
608
  async #generateStackNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
397
609
  const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
398
610
  const stackDirPath = path.join(appDirPath, `/${stacksDirPath}`);
@@ -445,7 +657,7 @@ export class GenerateMobileNavigations {
445
657
  const regex = /\.(tsx|ts|jsx|js)$/i;
446
658
 
447
659
  importStatements += `import * as React from 'react';\n`;
448
- importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
660
+ importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
449
661
 
450
662
  if (unauthenticatedComponentPath)
451
663
  importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -492,12 +704,12 @@ export class GenerateMobileNavigations {
492
704
  pkgRouteConfig?.customHeader &&
493
705
  Object.keys(pkgRouteConfig.customHeader)?.length &&
494
706
  customHeaderComponentPath
495
- ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
707
+ ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
496
708
  pkgRouteConfig?.customHeader?.props ?? '',
497
709
  )}} />`
498
710
  : ''
499
711
  }}}}
500
- >{(props:any) => <AuthWrapper
712
+ >{(props) => <AuthWrapper
501
713
  auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
502
714
  component={<Component${moduleNumber} {...props} />}
503
715
  ${
@@ -550,7 +762,7 @@ export class GenerateMobileNavigations {
550
762
  }
551
763
 
552
764
  moduleContent += `</Stack.Group>`;
553
- moduleRender = `export default ({Stack,...rest}:any) => { return (<>${moduleContent}</>)}`;
765
+ moduleRender = `export default ({Stack,...rest}) => { return (<>${moduleContent}</>)}`;
554
766
  }
555
767
  stackNavigator = importStatements + '\n' + moduleRender;
556
768
  if (stackNavigator) {
@@ -580,7 +792,7 @@ export class GenerateMobileNavigations {
580
792
  const regex = /\.(tsx|ts|jsx|js)$/i;
581
793
 
582
794
  importStatements += `import * as React from 'react';\n`;
583
- importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
795
+ importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
584
796
 
585
797
  if (unauthenticatedComponentPath)
586
798
  importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -626,23 +838,23 @@ export class GenerateMobileNavigations {
626
838
  initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
627
839
  options={{...${options},...{${
628
840
  pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
629
- ? `drawerIcon: ({ color, size }: { color: any,size:any }) => <${pkgRouteConfig?.icon?.name} name="${
841
+ ? `drawerIcon: ({ color, size }) => <${pkgRouteConfig?.icon?.name} name="${
630
842
  pkgRouteConfig?.icon?.props?.name ?? 'home'
631
843
  }" size={${pkgRouteConfig?.icon?.props?.size ?? `size`}} color={${
632
844
  pkgRouteConfig?.icon?.props?.color ?? 'color'
633
- }} />`
845
+ }} />,`
634
846
  : ''
635
847
  }
636
848
  ${
637
849
  pkgRouteConfig?.customHeader &&
638
850
  Object.keys(pkgRouteConfig.customHeader)?.length &&
639
851
  customHeaderComponentPath
640
- ? `header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
852
+ ? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
641
853
  pkgRouteConfig?.customHeader?.props ?? '',
642
854
  )}} />`
643
855
  : ''
644
856
  }}}}
645
- >{(props:any) => <AuthWrapper
857
+ >{(props) => <AuthWrapper
646
858
  auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
647
859
  component={<Component${moduleNumber} {...props} />}
648
860
  ${
@@ -699,7 +911,7 @@ export class GenerateMobileNavigations {
699
911
  });
700
912
  }
701
913
 
702
- moduleRender = `export default ({Drawer,...rest}:any) => { return (<>${moduleContent}</>)}`;
914
+ moduleRender = `export default ({Drawer,...rest}) => { return (<>${moduleContent}</>)}`;
703
915
  moduleNavigation = importStatements + '\n' + moduleRender;
704
916
 
705
917
  const drawerNavigator = moduleNavigation;
@@ -807,7 +1019,7 @@ export class GenerateMobileNavigations {
807
1019
  const regex = /\.(tsx|ts|jsx|js)$/i;
808
1020
 
809
1021
  importStatements += `import * as React from 'react';\n`;
810
- importStatements += `import {AuthWrapper} from '@admin-layout/gluestack-ui-mobile';\n`;
1022
+ importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
811
1023
 
812
1024
  if (unauthenticatedComponentPath)
813
1025
  importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -847,11 +1059,14 @@ export class GenerateMobileNavigations {
847
1059
  }
848
1060
 
849
1061
  const options = JSON.stringify(
850
- {
851
- ...pkgRouteConfig?.props?.options,
852
- headerShown: mixLayout ? false : pkgRouteConfig?.props?.options?.headerShown,
853
- } || { headerShown: mixLayout ? false : true },
1062
+ pkgRouteConfig?.props?.options
1063
+ ? {
1064
+ ...pkgRouteConfig.props.options,
1065
+ headerShown: mixLayout ? false : pkgRouteConfig.props.options.headerShown,
1066
+ }
1067
+ : { headerShown: mixLayout ? false : true },
854
1068
  );
1069
+
855
1070
  importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
856
1071
  moduleContent += `<Tab.Screen
857
1072
  key="${pkgRouteConfig.key}"
@@ -860,7 +1075,7 @@ export class GenerateMobileNavigations {
860
1075
  initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
861
1076
  options={{...${options},...{${
862
1077
  pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
863
- ? `tabBarIcon: ({ color }: { color: any }) => <${pkgRouteConfig?.icon?.name} name="${
1078
+ ? `tabBarIcon: ({ color }) => <${pkgRouteConfig?.icon?.name} name="${
864
1079
  pkgRouteConfig?.icon?.props?.name ?? 'home'
865
1080
  }" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${
866
1081
  pkgRouteConfig?.icon?.props?.color ?? 'color'
@@ -871,13 +1086,13 @@ export class GenerateMobileNavigations {
871
1086
  pkgRouteConfig?.customHeader &&
872
1087
  Object.keys(pkgRouteConfig.customHeader)?.length &&
873
1088
  customHeaderComponentPath
874
- ? `,header: (props: any) => <${customHeaderName} {...props} {...${JSON.stringify(
1089
+ ? `,header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
875
1090
  pkgRouteConfig?.customHeader?.props ?? '',
876
1091
  )}} />`
877
1092
  : ''
878
1093
  }
879
1094
  }}}
880
- >{(props:any) => <AuthWrapper
1095
+ >{(props) => <AuthWrapper
881
1096
  auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
882
1097
  component={<Component${moduleNumber} {...props} />}
883
1098
  ${
@@ -936,7 +1151,7 @@ export class GenerateMobileNavigations {
936
1151
  });
937
1152
  }
938
1153
 
939
- moduleRender = `export default ({Tab,...rest}:any) => { return (<>${moduleContent}</>)}`;
1154
+ moduleRender = `export default ({Tab,...rest}) => { return (<>${moduleContent}</>)}`;
940
1155
  moduleNavigation = importStatements + '\n' + moduleRender;
941
1156
  const bottomTabNavigator = moduleNavigation;
942
1157
  if (bottomTabNavigator) {
@@ -1178,8 +1393,8 @@ export class GenerateMobileNavigations {
1178
1393
  const Drawer = createDrawerNavigator();
1179
1394
  `;
1180
1395
  rootComponent += `
1181
- const RootComponent = (props:any) => {
1182
- const settings = useSelector((state: any) => state.settings);
1396
+ const RootComponent = (props) => {
1397
+ const settings = useSelector((state) => state.settings);
1183
1398
  const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
1184
1399
  return (
1185
1400
  <Drawer.Navigator
@@ -1188,14 +1403,14 @@ export class GenerateMobileNavigations {
1188
1403
  screenOptions={({ route }) => ({ ...${JSON.stringify(screenOptions)} ,...{
1189
1404
  ${
1190
1405
  customHeaderPath
1191
- ? `header: (props:any) => {
1406
+ ? `header: (props) => {
1192
1407
  const title = getHeaderTitle(props.options, props.route.name);
1193
1408
  return <CustomHeader {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
1194
1409
  }`
1195
1410
  : ''
1196
1411
  }
1197
1412
  }})}
1198
- ${customDrawerPath ? 'drawerContent={(props:any) => <CustomDrawerContent {...props} />}' : ''}
1413
+ ${customDrawerPath ? 'drawerContent={(props) => <CustomDrawerContent {...props} />}' : ''}
1199
1414
  >
1200
1415
  {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
1201
1416
  </Drawer.Navigator>
@@ -1219,20 +1434,20 @@ export class GenerateMobileNavigations {
1219
1434
  const Tab = createBottomTabNavigator();
1220
1435
  `;
1221
1436
  rootComponent += `
1222
- const RootComponent = (props:any) => {
1223
- const settings = useSelector((state: any) => state.settings);
1437
+ const RootComponent = (props) => {
1438
+ const settings = useSelector((state) => state.settings);
1224
1439
  const initialRouteName = ${JSON.stringify(initialRouteName)};
1225
1440
  let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
1226
1441
  const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
1227
1442
  const defaultHeader = {${
1228
- isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
1443
+ isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
1229
1444
  }};
1230
1445
  return (
1231
1446
  <Tab.Navigator
1232
1447
  initialRouteName={initialRouteName}
1233
- screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{${
1448
+ screenOptions={(props)=>({...props,...defaultScreenOptions,...{${
1234
1449
  customHeaderPath
1235
- ? `header: (props:any) => {
1450
+ ? `header: (props) => {
1236
1451
  const title = getHeaderTitle(props.options, props.route.name);
1237
1452
  return <CustomHeader {...defaultHeaderProps} {...props} title={title} style={props.options.headerStyle} />;
1238
1453
  }`
@@ -1240,7 +1455,7 @@ export class GenerateMobileNavigations {
1240
1455
  }}})}
1241
1456
  ${
1242
1457
  customTabBarPath
1243
- ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"} {...props} />}'
1458
+ ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"} {...props} />}'
1244
1459
  : ''
1245
1460
  }
1246
1461
  >
@@ -1274,21 +1489,21 @@ export class GenerateMobileNavigations {
1274
1489
  `;
1275
1490
  rootComponent += `
1276
1491
  const TabNavigator = () => {
1277
- const settings = useSelector((state: any) => state.settings);
1492
+ const settings = useSelector((state) => state.settings);
1278
1493
  const initialRouteName = ${JSON.stringify(initialRouteName)};
1279
1494
  let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
1280
1495
  const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
1281
1496
  const defaultHeader = {${
1282
- isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
1497
+ isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
1283
1498
  }};
1284
1499
 
1285
1500
  return (
1286
1501
  <Tab.Navigator
1287
1502
  initialRouteName={initialRouteName}
1288
- screenOptions={(props:any)=>({...props,...defaultScreenOptions,...{headerShown: false,header:()=>null},})}
1503
+ screenOptions={(props)=>({...props,...defaultScreenOptions,...{headerShown: false,header:()=>null},})}
1289
1504
  ${
1290
1505
  customTabBarPath
1291
- ? 'tabBar={(props:any) => <CustomTabBar key={props?.key??"customTabBarKey"} {...props} />}'
1506
+ ? 'tabBar={(props) => <CustomTabBar key={props?.key??"customTabBarKey"} {...props} />}'
1292
1507
  : ''
1293
1508
  }
1294
1509
  >
@@ -1296,13 +1511,13 @@ export class GenerateMobileNavigations {
1296
1511
  </Tab.Navigator>
1297
1512
  )
1298
1513
  }
1299
- const RootComponent = (props:any) => {
1514
+ const RootComponent = (props) => {
1300
1515
  const initialRouteName = ${JSON.stringify(initialRouteName)};
1301
- const settings = useSelector((state: any) => state.settings);
1516
+ const settings = useSelector((state) => state.settings);
1302
1517
  let defaultScreenOptions = ${JSON.stringify(screenOptionsTab)};
1303
1518
  const defaultHeaderProps = ${JSON.stringify(defaultHeaderProps || {})};
1304
1519
  const defaultHeader = {${
1305
- isShowDefalutHeader ? `header:(props:any)=><Header {...defaultHeaderProps} {...props} />` : ''
1520
+ isShowDefalutHeader ? `header:(props)=><Header {...defaultHeaderProps} {...props} />` : ''
1306
1521
  }};
1307
1522
  return (
1308
1523
  <Drawer.Navigator
@@ -1317,7 +1532,7 @@ export class GenerateMobileNavigations {
1317
1532
  : "Home",
1318
1533
  ${
1319
1534
  customHeaderPath
1320
- ? `header: (props:any) => {
1535
+ ? `header: (props) => {
1321
1536
  const title = getHeaderTitle(props.options, props.route.name);
1322
1537
  return <CustomHeader {...defaultHeaderProps} {...props} title={title} isMixedLayout={true} style={props.options.headerStyle} />;
1323
1538
  }`
@@ -1327,11 +1542,11 @@ export class GenerateMobileNavigations {
1327
1542
  }})}
1328
1543
  ${
1329
1544
  customDrawerPath
1330
- ? 'drawerContent={((props:any)) => <CustomDrawerContent {...props} showDefaultRoutes={true} />}'
1545
+ ? 'drawerContent={((props)) => <CustomDrawerContent {...props} showDefaultRoutes={true} />}'
1331
1546
  : ''
1332
1547
  }
1333
1548
  >
1334
- <Drawer.Screen name="Layout" options={{title:"Home", drawerIcon: ({ color, size }: { color: any, size: any }) => (
1549
+ <Drawer.Screen name="Layout" options={{title:"Home", drawerIcon: ({ color, size }) => (
1335
1550
  <MaterialIcons name="home" size={24} color={color} />
1336
1551
  ),}}
1337
1552
  component={TabNavigator} />
@@ -1372,18 +1587,29 @@ export class GenerateMobileNavigations {
1372
1587
  const customTabBarPath = this.#customTabBarPath;
1373
1588
  const customDrawerPath = this.#customDrawerPath;
1374
1589
  const customHeaderPath = this.#customHeaderPath;
1590
+ const i18Options = this.#i18Options;
1375
1591
 
1376
1592
  const layoutSettings = this.#layoutSettings;
1377
1593
  const layoutConfigFileData = await this.#getLayoutConfig();
1378
1594
  const layoutType = layoutSettings?.layout || 'bottom';
1379
1595
  const isAppRoutesGenerated = await this.#generateAppRoutesJson({ appDirPath });
1380
1596
  if (isAppRoutesGenerated) {
1381
- const isModuleTsFileGenerated = await this.#generateModulesTsFile({
1597
+ // await this.#generateModulesTsFile({
1598
+ // appDirPath,
1599
+ // modules,
1600
+ // initialRouteName,
1601
+ // });
1602
+ await this.#generateMainRoutes({
1603
+ appDirPath,
1604
+ i18Options,
1605
+ initialRouteName,
1606
+ });
1607
+ const isAppFileGenerated = await this.#generateApp({
1382
1608
  appDirPath,
1383
- modules,
1609
+ i18Options,
1384
1610
  initialRouteName,
1385
1611
  });
1386
- if (isModuleTsFileGenerated) {
1612
+ if (isAppFileGenerated) {
1387
1613
  const isStackCreated = await this.#generateStackNavigations({
1388
1614
  appDirPath,
1389
1615
  modules,