@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 11.2.1-alpha.1

package/src/components/Layout/components/SettingDrawer/SettingDrawer.tsx

@@ -22,8 +22,7 @@ import {
     Divider,
     Switch,
     ScrollView,
-    ActionsheetScrollView,
-} from '../../../ui';
+} from '@gluestack-ui/themed';
 import { useSelector } from 'react-redux';
 
 import LayoutButton from './LayoutButton';
@@ -33,16 +32,18 @@ import { THEMECOLOR } from '../../../../utils/ThemeColor';
 export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
     return (
-        <Actionsheet isOpen={isOpen} onClose={handleClose} className="z-999">
+        <Actionsheet isOpen={isOpen} onClose={handleClose} zIndex={999}>
             <ActionsheetBackdrop />
-            <ActionsheetContent className="z-999">
+            <ActionsheetContent zIndex={999} w={'100%'}>
                 <ActionsheetDragIndicatorWrapper>
                     <ActionsheetDragIndicator />
                 </ActionsheetDragIndicatorWrapper>
-                <ActionsheetScrollView>
-                    <Box className="items-start bg-white p-3">
-                        <Text className="text-black font-semibold">Page style setting</Text>
-                        <HStack space={'md'} className="mt-3">
+                <ScrollView>
+                    <Box alignItems="flex-start" bg={'$white'} w={'100%'} p={'$3'}>
+                        <Text color={'#00000'} fontWeight={'$semibold'}>
+                            Page style setting
+                        </Text>
+                        <HStack space={'md'} mt={'$3'}>
                             <LayoutButton
                                 mode="style"
                                 settings={settings}
@@ -62,40 +63,43 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 color={'realDark'}
                             />
                         </HStack>
-                        <Text className="text-black font-semibold mt-2">Select Theme</Text>
-                        <Box className="w-full">
-                            <Select
-                                className="mt-2"
-                                selectedValue={settings?.themeName}
-                                onValueChange={(value) => {
-                                    const newSettings = {
-                                        ...settings,
-                                        themeName: value,
-                                    };
-                                    onSettingChange(newSettings);
-                                }}
-                            >
-                                <SelectTrigger variant="outline" size="md">
-                                    <SelectInput placeholder="Select option" className="mr-3" />
-                                    <Icon as={ChevronDownIcon} />
-                                </SelectTrigger>
-                                <SelectPortal>
-                                    <SelectBackdrop />
-                                    <SelectContent>
-                                        <SelectDragIndicatorWrapper>
-                                            <SelectDragIndicator />
-                                        </SelectDragIndicatorWrapper>
-                                        <SelectItem label="Default" value="default" />
-                                        <SelectItem label="Github Theme" value="github" />
-                                        <SelectItem label="Slack Theme" value="slack" />
-                                        <SelectItem label="Airbnb Theme" value="airbnb" />
-                                        <SelectItem label="Spotify Theme" value="spotify" />
-                                    </SelectContent>
-                                </SelectPortal>
-                            </Select>
-                        </Box>
-                        <Text className="text-black font-semibold mt-2">Theme Color</Text>
-                        <HStack space={'md'} className="mt-3 flex-wrap">
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Select Theme
+                        </Text>
+                        <Select
+                            mt={'$2'}
+                            w={'100%'}
+                            selectedValue={settings?.themeName}
+                            onValueChange={(value) => {
+                                const newSettings = {
+                                    ...settings,
+                                    themeName: value,
+                                };
+                                onSettingChange(newSettings);
+                            }}
+                        >
+                            <SelectTrigger variant="outline" size="md">
+                                <SelectInput placeholder="Select option" />
+                                <Icon as={ChevronDownIcon} mr={'$3'} />
+                            </SelectTrigger>
+                            <SelectPortal>
+                                <SelectBackdrop />
+                                <SelectContent>
+                                    <SelectDragIndicatorWrapper>
+                                        <SelectDragIndicator />
+                                    </SelectDragIndicatorWrapper>
+                                    <SelectItem label="Default" value="default" />
+                                    <SelectItem label="Github Theme" value="github" />
+                                    <SelectItem label="Slack Theme" value="slack" />
+                                    <SelectItem label="Airbnb Theme" value="airbnb" />
+                                    <SelectItem label="Spotify Theme" value="spotify" />
+                                </SelectContent>
+                            </SelectPortal>
+                        </Select>
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Theme Color
+                        </Text>
+                        <HStack space={'md'} mt={'$3'} flexWrap={'wrap'}>
                             {THEMECOLOR.map((color, index) => (
                                 <ThemeColorButton
                                     key={index}
@@ -105,9 +109,11 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 />
                             ))}
                         </HStack>
-                        <Divider className="my-4" />
-                        <Text className="text-black font-semibold mt-2">Navigation Mode</Text>
-                        <HStack space={'md'} className="mt-3">
+                        <Divider my={'$4'} />
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Navigation Mode
+                        </Text>
+                        <HStack space={'md'} mt={'$3'}>
                             <LayoutButton
                                 mode="layout"
                                 settings={settings}
@@ -130,9 +136,11 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 color={'light'}
                             />
                         </HStack>
-                        <Divider className="my-4" />
-                        <Text className="text-black font-semibold mt-2">Regional Settings</Text>
-                        <HStack className="mt-3 w-full justify-between items-center">
+                        <Divider my={'$4'} />
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Regional Settings
+                        </Text>
+                        <HStack w={'100%'} mt={'$3'} justifyContent={'space-between'} alignItems="center">
                             <Text>Menu Header</Text>
                             <Switch
                                 onValueChange={(value) => {
@@ -148,7 +156,7 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                             />
                         </HStack>
                     </Box>
-                </ActionsheetScrollView>
+                </ScrollView>
             </ActionsheetContent>
         </Actionsheet>
     );

package/src/components/Layout/components/SettingDrawer/ThemeColorButton.tsx

@@ -1,22 +1,13 @@
 import React from 'react';
-import { Pressable, Box } from '../../../ui';
-
-const colorClassMap: Record<string, string> = {
-    '#4a154b': 'bg-[#4a154b]',
-    '#601e69': 'bg-[#601e69]',
-    '#1d1c1d': 'bg-[#1d1c1d]',
-    '#36c5ef': 'bg-[#36c5ef]',
-    '#2db57c': 'bg-[#2db57c]',
-    '#e01d5a': 'bg-[#e01d5a]',
-    '#ecb12f': 'bg-[#ecb12f]',
-    '#616061': 'bg-[#616061]',
-    '#dcd9d4': 'bg-[#dcd9d4]',
-};
+import { Pressable, Box } from '@gluestack-ui/themed';
 
 const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
     return (
         <Pressable
-            className={`${colorClassMap[color]} w-[26px] h-[26px] rounded-md`}
+            backgroundColor={color}
+            height={'$6'}
+            width={'$6'}
+            borderRadius={'$sm'}
             onPress={() => {
                 let { primaryColor, ...rest } = settings;
                 primaryColor = color;

package/src/components/Layout/components/SideBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList } from '../../ui';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList, SafeAreaView } from '@gluestack-ui/themed';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Link } from 'react-router-native';
@@ -38,27 +38,30 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
     };
 
     return (
-        <Box className={`flex-1 bg-${navTheme === 'dark' ? COLOR.GREYISH_BLACK : COLOR.WHITE}`}>
+        <Box flex={1} style={{ backgroundColor: navTheme === 'dark' ? COLOR.GREYISH_BLACK : COLOR.WHITE }}>
             {!!isMenuExist && (
                 <FlatList
                     data={menuData}
-                    renderItem={({ item }: any) => {
+                    renderItem={({ item }:any) => {
                         const keys = item?.key.split('.');
-                        const arrowIcon: any = icon || 'chevron-down-outline';
+                        const arrowIcon:any = icon || 'chevron-down-outline';
                         return item?.routes ? (
-                            <Box className="p-3">
+                            <Box p={"$3"}>
                                 <TouchableOpacity onPress={() => toggle()}>
                                     <HStack>
-                                        <Ionicons color={isToggle ? '#fff' : '#a1a1a1'} name="document-outline" />
-                                        <Text color={isToggle ? '#fff' : '#a1a1a1'}>{item.name}</Text>
-                                        <Ionicons name={arrowIcon} />
+                                        <Ionicons
+                                            color={isToggle ? '#fff' : '#a1a1a1'}
+                                            name="document-outline"
+                                        />
+                                        <Text style={{ color: isToggle ? '#fff' : '#a1a1a1' }}>{item.name}</Text>
+                                        <Ionicons  name={arrowIcon} />
                                     </HStack>
                                 </TouchableOpacity>
                                 {isToggle
                                     ? item.routes.map((subMenu: any) => (
                                           <Box key={subMenu.key}>
                                               <Link to={subMenu.path} underlayColor="#f0f4f7">
-                                                  <Text className="text-[#a1a1a1]">{subMenu.name}</Text>
+                                                  <Text style={{ color: '#a1a1a1' }}>{subMenu.name}</Text>
                                               </Link>
                                           </Box>
                                       ))
@@ -66,7 +69,7 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
                             </Box>
                         ) : (
                             keys[0] != 'Main' && keys[0] == 'sidebar' && (
-                                <Box key={item.key} className="p-3">
+                                <Box key={item.key} p={"$3"}>
                                     <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => openMenuItem(item)}>
                                         <HStack>
                                             <Ionicons
@@ -75,8 +78,10 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
                                                 name={item.icon}
                                             />
                                             <Text
-                                                color={navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK}
-                                                className="ml-10"
+                                                style={{
+                                                    color: navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK,
+                                                    marginLeft: 10,
+                                                }}
                                             >
                                                 {item.name}
                                             </Text>

package/src/components/NavigationComponent.tsx

@@ -1,6 +1,6 @@
 import { LOCATION_CHANGE as LOCATION_CHANGE_SUCCESS } from '@common-stack/remix-router-redux';
 import { NavigationContainer, LinkingOptions } from '@react-navigation/native';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, merge } from 'lodash-es';
 import React, { MutableRefObject, ReactElement, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { navigationRef } from '@common-stack/client-react';

package/src/components/ToastAlert.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 
-import { Toast, VStack, ToastTitle, ToastDescription, Pressable, Icon, CloseIcon } from './ui';
+import {
+    Toast,
+    VStack,
+    ToastTitle,
+    ToastDescription,
+    Pressable,
+    Icon,
+    CloseIcon,
+} from '@gluestack-ui/themed';
 
 interface IToast {
     id: string;
@@ -9,7 +17,7 @@ interface IToast {
     description?: string;
     isClosable?: boolean;
     toast?: any;
-    variant?: any;
+    variant?:any
 }
 
 // variants:
@@ -17,15 +25,7 @@ interface IToast {
 // solid,
 // outline
 
-export const ToastAlert = ({
-    id,
-    status = 'info',
-    title = '',
-    description = '',
-    variant = 'solid',
-    isClosable,
-    toast = null,
-}: IToast) => {
+export const ToastAlert = ({ id, status = 'info', title='', description = '',variant='solid', isClosable, toast=null }: IToast) => {
     const toastId = 'toast-' + id;
     const actionType = status || 'info';
     return (
@@ -35,8 +35,8 @@ export const ToastAlert = ({
                 {description && <ToastDescription>{description}</ToastDescription>}
             </VStack>
             {isClosable && toast ? (
-                <Pressable className="mt-1" onPress={() => toast?.close(id)}>
-                    <Icon as={CloseIcon} className="text-gray-400" />
+                <Pressable mt="$1" onPress={() => toast?.close(id)}>
+                    <Icon as={CloseIcon} color="$coolGray50" />
                 </Pressable>
             ) : null}
         </Toast>

package/src/components/UnAuthenticatedComponent.tsx

@@ -1,28 +1,38 @@
 import React from 'react';
-import { Box, Button, Heading, Text, Divider, ButtonText, StyledSafeAreaView } from './ui';
+import {
+    Box,
+    Button,
+    Heading,
+    Text,
+    HStack,
+    Pressable,
+    Divider,
+    ButtonText,
+    SafeAreaView,
+} from '@gluestack-ui/themed';
 import { useNavigation } from '@react-navigation/native';
+import { Ionicons } from '@expo/vector-icons';
+import { Linking } from 'react-native';
 
-const UnAuthenticatedComponent = () => {
+ const UnAuthenticatedComponent = () => {
     const navigation = useNavigation<any>();
     return (
-        <StyledSafeAreaView className="flex-1">
-            <Box className="flex-1 border-t border-t-slate-300">
-                {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
-                <Box className="flex-1 p-6 bg-white justify-center">
-                    <Heading className="mt-2">Login</Heading>
-                    <Text className="text-md mt-2">Log in to continue.</Text>
-                    <Button
-                        className="bg-blue-500 my-3"
-                        size="lg"
-                        onPress={() => navigation.navigate('MainStack.Login')}
-                    >
-                        <ButtonText className="text-white">Login</ButtonText>
-                    </Button>
-                    <Divider className="my-3" />
-                </Box>
+        <SafeAreaView flex={1}>
+        <Box flex={1} borderTopWidth={'$1'} borderTopColor={'$trueGray200'}>
+            {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
+            <Box flex={1} p={'$6'} bg="$white" justifyContent={'center'}>
+                <Heading mt={'$2'}>Login</Heading>
+                <Text fontSize="$md" mt={'$2'}>
+                    Log in to continue.
+                </Text>
+                <Button bg={'$blue500'} size="lg" my={'$3'} onPress={() => navigation.navigate('MainStack.Login')}>
+                    <ButtonText color="$white">Login</ButtonText>
+                </Button>
+                <Divider my={'$3'} />
             </Box>
-        </StyledSafeAreaView>
+        </Box>
+    </SafeAreaView>
     );
 };
 
-export default UnAuthenticatedComponent;
+export default UnAuthenticatedComponent;

package/src/components/WithConfiguration.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { IConfigurationsFlattenedKeys, PermissionType, Visibility } from 'common';
+import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
+import { PermissionType, Visibility, IConfigurationsFlattenedKeys } from 'common';
 import { IPreDefinedPermissions } from '@adminide-stack/core';
 import { useSetting, usePermissionAutoFetch } from '@adminide-stack/platform-client';
 import { get } from 'lodash-es';
 import { URI } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri';
-import { Spinner, Box, Text, Heading } from './ui';
 
 export interface IWithConfigurationProps {
     children?: React.ReactElement;
-    configKey: string;
+    configKey: IConfigurationsFlattenedKeys;
     permissionKeys?: IPreDefinedPermissions[];
     permissionTypes?: PermissionType[];
     resourceName?: string;
@@ -19,17 +19,17 @@ export const WithConfiguration = (props: IWithConfigurationProps) => {
     const { configKey, children, permissionKeys, resourceName, permissionTypes } = props;
 
     const {
-        data: config,
+        data,
         loading: settingsLoading,
         updateConfiguration: _,
     } = useSetting({
-        configKey: configKey as IConfigurationsFlattenedKeys,
+        configKey,
         overrides: { resource: props.settingsUri },
     });
     // const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
     const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
 
-    const isPrivate = React.useMemo(() => Visibility.Private === config.resolveConfiguration, [config]);
+    const isPrivate = React.useMemo(() => Visibility.Private === data, [data]);
 
     const hasPermission = React.useMemo(() => {
         if (isPrivate && permissions && Array.isArray(permissionKeys)) {

package/src/components/WithPermission.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
 import { PermissionType } from 'common';
 import { IPreDefinedPermissions } from '@adminide-stack/core';
 import { get } from 'lodash-es';
 import { usePermissionAutoFetch } from '@adminide-stack/platform-client';
-import { Spinner, Box, Text, Heading } from './ui';
 
 export enum WithPermissionBehaviour {
     hide,

package/src/components/WithPolicy.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
+import { Spinner } from '@gluestack-ui/themed';
 import { logger } from '@cdm-logger/client';
 import { useSetting } from '@adminide-stack/platform-client';
-import { IConfigurationsFlattenedKeys } from 'common';
-import { Spinner } from './ui';
+import { IConfiguration, IConfigurationsFlattenedKeys } from 'common';
 
 interface IProps {
-    policyKey: string;
+    policyKey: IConfigurationsFlattenedKeys;
     Child: React.FC<{ value: unknown }>;
     childProps?: Record<string, any>;
     showLoading?: boolean;
@@ -20,7 +20,7 @@ export const WithPolicy = (props: IProps): ReactElement => {
         loading,
         error,
     } = useSetting({
-        configKey: policyKey as IConfigurationsFlattenedKeys,
+        configKey: policyKey,
     });
     if (error) {
         logger.error(error, `WithPolicy.name`);

package/src/components/index.ts

@@ -13,4 +13,3 @@ export * from './WithConfiguration';
 export * from './WithPolicy';
 export * from './usePermissionAutoFetch';
 export * from './useSetting';
-export * from './ui';

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -1,25 +1,30 @@
 import React from 'react';
+import { Lifecycle } from '../containers/layout/Lifecycle';
+import { LifecyclePhase } from '@workbench-stack/core';
 import Animated from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Spinner, Center } from './ui';
+import { Spinner, Center } from '@gluestack-ui/themed';
 import { Platform } from 'react-native';
+import { WithPermissionContainer } from './WithPermission';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 
 const LoadingComponent = () => (
-    <Center className="flex-1 justify-center items-center">{<Spinner className="text-blue-500" />}</Center>
+    <Center flex={1} justifyContent={'center'} alignItems={'center'}>
+        {<Spinner color={'$blue500'} />}
+    </Center>
 );
 
 const LifecycleComponent = ({ children }: { children?: any }) => {
-    return <>{children}</>;
-    // const { authenticated } = isUserAuthenticated();
-    // if (authenticated) {
-    //     return (
-    //         <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
-    //             {children}
-    //         </Lifecycle>
-    //     );
-    // } else {
-    //     return <>{children}</>;
-    // }
+    const { authenticated } = isUserAuthenticated();
+    if (authenticated) {
+        return (
+            <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                {children}
+            </Lifecycle>
+        );
+    } else {
+        return <>{children}</>;
+    }
 };
 
 const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {

package/src/components/with-interactions-managed.tsx

@@ -1,10 +1,11 @@
 import React, { ComponentType } from 'react';
+// import { Transition, Transitioning } from 'react-native-reanimated';
+import { Lifecycle } from '../containers/layout/Lifecycle';
 import { LifecyclePhase } from '@workbench-stack/core';
-import Animated from 'react-native-reanimated';
+import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
+import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { Spinner, Center } from './ui';
-import { Lifecycle } from '../containers/layout/Lifecycle';
 
 export function withInteractionsManaged<Props>(
     Component: ComponentType<Props>,
@@ -20,7 +21,9 @@ export function withInteractionsManaged<Props>(
 
         const LoadingComponent = () => (
             // <SafeAreaView flex={1}>
-            <Center className="flex-1 justify-center items-center">{<Spinner className="text-blue-500" />}</Center>
+            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
+                {<Spinner color={'$blue500'} />}
+            </Center>
             // </SafeAreaView>
         );
         console.log('interactionsComplete', interactionsComplete);
@@ -61,7 +64,9 @@ export function withLifeCycleInteractionsManaged<Props>(
 
         const LoadingComponent = () => (
             // <SafeAreaView flex={1}>
-            <Center className="flex-1 justify-center align-items-center">{<Spinner color={'$blue500'} />}</Center>
+            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
+                {<Spinner color={'$blue500'} />}
+            </Center>
             // </SafeAreaView>
         );
         console.log('interactionsComplete', interactionsComplete);

package/src/containers/layout/ProLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Spinner } from '../../components/ui';
+import { Box, Spinner } from '@gluestack-ui/themed';
 import { NavigationContainerComponent, ApplicationErrorHandler, ErrorBoundary } from '../../components';
 import { PluginArea } from '@common-stack/client-react';
 import routeConfigKeyReplace from '../../utils/routeConfigKeyReplace';
@@ -11,7 +11,7 @@ const ProLayout: React.FC<any> = (props) => {
     const [appRoutes, setAppRoutes] = React.useState<any>([]);
     const { pathKey, appLayout } = useLayoutSetting(props);
     AppLayout = appLayout;
-    const { appFeatures } = routeConfigKeyReplace(pathKey, props?.features, appLayout);
+    const {appFeatures} = routeConfigKeyReplace(pathKey, props?.features,appLayout);
     AppFeatures = appFeatures;
 
     React.useEffect(() => {
@@ -23,7 +23,7 @@ const ProLayout: React.FC<any> = (props) => {
 
     //const appRoutes = AppFeatures ? AppFeatures?.getRoutes2('/', 'MainStack') || [] : null;
 
-    const loadingComponent = () => <Box className="flex-1">{<Spinner />}</Box>;
+    const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
 
     let plugins = AppFeatures?.getComponentFillPlugins() ?? props.features;
     let configuredRoutes = AppFeatures?.getConfiguredRoutes2('/') ?? props?.features?.getConfiguredRoutes2('/');

package/src/index.ts

@@ -5,7 +5,7 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
-import { getReplacedRouteConfig } from './utils/getReplacedRouteConfig';
+import {getReplacedRouteConfig} from './utils/getReplacedRouteConfig'
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 import i18next from './config/i18next';
@@ -15,11 +15,12 @@ import layoutRouteConfig from './layout.json';
 export * from './components';
 export * from './containers/layout/Lifecycle';
 
-// //...........................glustack-ui library....///
-// export * from '@gluestack-ui/themed';
-// export * from '@gluestack-ui/config';
-// export * from '@gluestack-style/react';
-// //............................gluestack-ui....///
+//...........................glustack-ui library....///
+export * from '@gluestack-ui/themed';
+export * from '@gluestack-ui/config';
+export * from '@gluestack-style/react';
+//............................gluestack-ui....///
+
 
 export {
     useLayoutSetting,