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

package/src/components/Layout/components/BottomTabBar.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Box, Pressable, Center, Text, StyledSafeAreaView, HStack } from '../../ui';
+import {Box,Pressable,Center,Text, SafeAreaView} from '@gluestack-ui/themed';
 import { useSelector } from 'react-redux';
 import { useRoute } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
 
-export const BottomTabBar = ({ state, descriptors, navigation, ...props }: any) => {
-    const tabBarProps = props?.customTabBarProps ?? {};
+export const BottomTabBar = ({ state, descriptors, navigation,...props }: any) => {
+    const tabBarProps = props?.customTabBarProps??{};
     const settings = useSelector<any>((state) => state.settings) as any;
     //const currentRoute: any = useRoute();
     const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
@@ -23,109 +23,118 @@ export const BottomTabBar = ({ state, descriptors, navigation, ...props }: any)
                 (b.options.priority ? b.options.priority : b.options.title),
         );
 
-    const onPress = React.useCallback((route, navigation, isFocused) => {
-        if (route?.route) {
-            const event = navigation.emit({
-                type: 'tabPress',
-                target: route.route.key,
-                canPreventDefault: true,
-            });
+        const onPress = React.useCallback((route, navigation, isFocused) => {
+            if (route?.route) {
+                const event = navigation.emit({
+                    type: 'tabPress',
+                    target: route.route.key,
+                    canPreventDefault: true,
+                });
+
+                if (!isFocused && !event.defaultPrevented) {
+                    // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                    navigation.navigate({
+                        name: route.route.name,
+                        merge: true,
+                        orgName: currentRoute?.params?.orgName || platformState?.orgName,
+                    });
+                }
+            }
+        }, []);
 
-            if (!isFocused && !event.defaultPrevented) {
-                // The `merge: true` option makes sure that the params inside the tab screen are preserved
-                navigation.navigate({
-                    name: route.route.name,
-                    merge: true,
-                    orgName: currentRoute?.params?.orgName || platformState?.orgName,
+        const onLongPress = React.useCallback((route, navigation, isFocused) => {
+            if (route?.route) {
+                navigation.emit({
+                    type: 'tabLongPress',
+                    target: route.route.key,
                 });
             }
-        }
-    }, []);
+        }, []);
 
-    const onLongPress = React.useCallback((route, navigation, isFocused) => {
-        if (route?.route) {
-            navigation.emit({
-                type: 'tabLongPress',
-                target: route.route.key,
-            });
-        }
-    }, []);
 
     return (
-        <StyledSafeAreaView>
-            <HStack className="bg-white border-t w-full py-4 border-t-[#d3d3d3]" {...tabBarProps}>
-                {appRoutes.map((route: any, index: any) => {
-                    const options = route.options;
-                    const label =
-                        options.tabBarLabel !== undefined
-                            ? options.tabBarLabel
-                            : options.title !== undefined
+        <SafeAreaView>
+        <Box
+            flexDirection="row"
+            width="100%"
+            alignSelf="center"
+            bg={'$white'}
+            borderTopWidth={"$1"}
+            borderTopColor={'#d3d3d3'}
+            py={"$4"}
+            {...tabBarProps}
+        >
+            {appRoutes.map((route: any, index: any) => {
+                const options = route.options;
+                const label =
+                    options.tabBarLabel !== undefined
+                        ? options.tabBarLabel
+                        : options.title !== undefined
                             ? options.title
                             : route.route.name;
 
-                    const isFocused = state.index === route.index;
+                const isFocused = state.index === route.index;
 
-                    // const onPress = () => {
-                    //     const event = navigation.emit({
-                    //         type: 'tabPress',
-                    //         target: route.route.key,
-                    //         canPreventDefault: true,
-                    //     });
+                // const onPress = () => {
+                //     const event = navigation.emit({
+                //         type: 'tabPress',
+                //         target: route.route.key,
+                //         canPreventDefault: true,
+                //     });
 
-                    //     if (!isFocused && !event.defaultPrevented) {
-                    //         // The `merge: true` option makes sure that the params inside the tab screen are preserved
-                    //         navigation.navigate({
-                    //             name: route.route.name,
-                    //             merge: true,
-                    //             orgName: currentRoute?.params?.orgName || platformState?.orgName,
-                    //         });
-                    //     }
-                    // };
+                //     if (!isFocused && !event.defaultPrevented) {
+                //         // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                //         navigation.navigate({
+                //             name: route.route.name,
+                //             merge: true,
+                //             orgName: currentRoute?.params?.orgName || platformState?.orgName,
+                //         });
+                //     }
+                // };
 
-                    // const onLongPress = () => {
-                    //     navigation.emit({
-                    //         type: 'tabLongPress',
-                    //         target: route.route.key,
-                    //     });
-                    // };
+                // const onLongPress = () => {
+                //     navigation.emit({
+                //         type: 'tabLongPress',
+                //         target: route.route.key,
+                //     });
+                // };
 
-                    return (
-                        <Pressable
-                            key={index}
-                            className={`opacity-[${isFocused ? '100' : '50'}] flex-1`}
-                            //  pb="$8"
-                            //  pt={"$3"}
-                            onPress={() => onPress(route, navigation, isFocused)}
-                            onLongPress={() => onLongPress(route, navigation, isFocused)}
-                            testID={options.tabBarTestID}
-                            accessibilityState={isFocused ? { selected: true } : {}}
-                            accessibilityLabel={options.tabBarAccessibilityLabel}
-                        >
-                            <Center>
-                                {options?.tabBarIcon
-                                    ? options.tabBarIcon({
-                                          color: isFocused
-                                              ? options.tabBarActiveTintColor
-                                              : options.tabBarInactiveTintColor,
-                                          size: 24,
-                                      })
-                                    : null}
+                return (
+                    <Pressable
+                        key={index}
+                        opacity={isFocused ? "$100" : "$50"}
+                      //  pb="$8"
+                      //  pt={"$3"}
+                        flex={1}
+                        onPress={()=>onPress(route,navigation,isFocused)}
+                        onLongPress={()=>onLongPress(route,navigation,isFocused)}
+                        testID={options.tabBarTestID}
+                        accessibilityState={isFocused ? { selected: true } : {}}
+                        accessibilityLabel={options.tabBarAccessibilityLabel}
+                    >
+                        <Center>
+                            {options?.tabBarIcon
+                                ? options.tabBarIcon({
+                                    color: isFocused
+                                        ? options.tabBarActiveTintColor
+                                        : options.tabBarInactiveTintColor,
+                                    size: 24,
+                                })
+                                : null}
 
-                                <Text
-                                    color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
-                                    size={'sm'}
-                                    // className={`text-[${options.tabBarActiveTintColor}]`}
-                                    // className={`${isFocused ? `text-[${options.tabBarActiveTintColor}]` : `text-[${options.tabBarInactiveTintColor}]`}`}
-                                >
-                                    {label}
-                                </Text>
-                            </Center>
-                        </Pressable>
-                    );
-                })}
-            </HStack>
-        </StyledSafeAreaView>
+                            <Text
+                                color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
+                                style={{fontSize:12}}
+                            >
+                                {label}
+                            </Text>
+                        </Center>
+                    </Pressable>
+                );
+            })}
+        </Box>
+        </SafeAreaView>
     );
 };
 
-export default BottomTabBar;
+export default BottomTabBar;

package/src/components/Layout/components/Drawer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Ionicons } from '@expo/vector-icons';
 import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
 import {
+    SafeAreaView,
     Box,
     Text,
     Heading,
@@ -16,12 +17,11 @@ import {
     Toast,
     ToastTitle,
     ToastDescription,
-} from '../../ui';
+} from '@gluestack-ui/themed';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { logoutAndRedirect, resetReduxState } from '@adminide-stack/user-auth0-client';
-import { ToastAlert } from '../../ToastAlert';
 
 export const Drawer = (props: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
@@ -72,12 +72,8 @@ export const Drawer = (props: any) => {
     const logoType = logoUrl ? logoUrl[logoUrl.length - 1] : null;
 
     return (
-        <Box className="flex-1">
-            <StatusBar
-                barStyle={
-                    settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'dark-content' : 'light-content'
-                }
-            />
+        <Box flex={1}>
+            <StatusBar barStyle={settings?.navTheme == 'dark' ? 'light-content' : 'dark-content'} />
             <DrawerContentScrollView
                 {...props}
                 style={{
@@ -89,8 +85,8 @@ export const Drawer = (props: any) => {
                 }}
             >
                 {settings?.logo && logoType && logoType != 'svg' ? (
-                    <HStack className="px-3 items-center">
-                        <Avatar size={'sm'} className="bg-transparent">
+                    <HStack px={'$3'} alignItems={'center'}>
+                        <Avatar size={'sm'} bg="transparent">
                             <AvatarFallbackText>Logo</AvatarFallbackText>
                             <AvatarImage
                                 source={{
@@ -102,14 +98,15 @@ export const Drawer = (props: any) => {
 
                         {props.title ? (
                             <Heading
-                                className={`p-5 text-${
+                                p={'$5'}
+                                size={'lg'}
+                                color={
                                     props?.titleColor
                                         ? props?.titleColor
                                         : settings?.navTheme == 'dark'
-                                        ? 'white'
-                                        : 'black'
-                                }`}
-                                size={'lg'}
+                                        ? '$white'
+                                        : '$black'
+                                }
                             >
                                 {props?.headingTitle ?? settings?.title ?? props.title}
                             </Heading>
@@ -119,14 +116,15 @@ export const Drawer = (props: any) => {
                     <>
                         {props.title ? (
                             <Heading
+                                p={'$5'}
                                 size={'lg'}
-                                className={`p-5 text-${
+                                color={
                                     props?.titleColor
                                         ? props?.titleColor
                                         : settings?.navTheme == 'dark'
-                                        ? 'white'
-                                        : 'black'
-                                }`}
+                                        ? '$white'
+                                        : '$black'
+                                }
                             >
                                 {props?.headingTitle ?? settings?.title ?? props.title}
                             </Heading>
@@ -215,7 +213,7 @@ export const Drawer = (props: any) => {
                                 }
                             }}
                             label={({ color }) => (
-                                <Text className="font-semibold" style={{ color, fontSize: 15 }}>
+                                <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
                                     {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
                                 </Text>
                             )}
@@ -241,9 +239,8 @@ export const Drawer = (props: any) => {
             </DrawerContentScrollView>
 
             <Box
-                className={`mb-${settings?.layout == 'bottomDrawer' ? '0' : '4'} bg-${
-                    props?.backgroundColor ? props?.backgroundColor : settings?.navTheme == 'dark' ? '#000' : '#fff'
-                }`}
+                mb={settings?.layout == 'bottomDrawer' ? '$0' : '$4'}
+                bg={props?.backgroundColor ? props?.backgroundColor : settings?.navTheme == 'dark' ? '#000' : '#fff'}
             >
                 <Divider />
                 <>
@@ -329,7 +326,7 @@ export const Drawer = (props: any) => {
                                     }
                                 }}
                                 label={({ color }) => (
-                                    <Text style={{ color, fontSize: 15 }} className="font-semibold">
+                                    <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
                                         {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
                                     </Text>
                                 )}
@@ -356,7 +353,7 @@ export const Drawer = (props: any) => {
                 {props.logout && user && user.accessToken && (
                     <DrawerItem
                         label={({ color }) => (
-                            <Text style={{ color, fontSize: 15 }} className="font-semibold">
+                            <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
                                 Logout
                             </Text>
                         )}
@@ -393,12 +390,12 @@ export const Drawer = (props: any) => {
                                     render: ({ id }) => {
                                         const toastId = 'toast-' + id;
                                         return (
-                                            <ToastAlert
-                                                id={id}
-                                                title={'Logging out....'}
-                                                status={'success'}
-                                                variant={'accent'}
-                                            />
+                                            <Toast nativeID={toastId} action="attention" variant="solid">
+                                                <VStack space="xs">
+                                                    <ToastTitle>Logging out</ToastTitle>
+                                                    {/* <ToastDescription></ToastDescription> */}
+                                                </VStack>
+                                            </Toast>
                                         );
                                     },
                                 });

package/src/components/Layout/components/Header.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { HStack, Icon, Text, Box, StatusBar, Divider, Button, ButtonIcon, StyledSafeAreaView } from '../../ui';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, ButtonIcon, SafeAreaView } from '@gluestack-ui/themed';
 import { getHeaderTitle } from '@react-navigation/elements';
 import { Ionicons } from '@expo/vector-icons';
 import { SettingDrawer } from './SettingDrawer';
@@ -38,9 +38,7 @@ export const Header = React.memo(
         );
 
         return (
-            <StyledSafeAreaView
-                className={`bg-${settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'}`}
-            >
+            <SafeAreaView bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
                 <StatusBar
                     barStyle={
                         settings?.navTheme === 'light' || settings?.navTheme === 'dark'
@@ -48,28 +46,28 @@ export const Header = React.memo(
                             : 'light-content'
                     }
                 />
-                <Box
-                    className={`bg-${
-                        settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'
-                    } w-full`}
-                >
+                <Box bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
                     <HStack
-                        className={`bg-${
-                            settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'
-                        } px-1 py-3 justify-${
+                        bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}
+                        px="$1"
+                        py="$3"
+                        // justifyContent={
+                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
+                        // }
+                        justifyContent={
                             (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&
                             !isMixedLayout &&
                             !right
                                 ? 'center'
-                                : 'between'
+                                : 'space-between'
                         }
-                                items-center border-b border-b-['#d3d3d3] w-full`}
-                        // justifyContent={
-                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
-                        // }
+                        alignItems="center"
+                        borderBottomWidth={'$1'}
+                        borderBottomColor={'#d3d3d3'}
+                        w="100%"
                     >
                         {back ? (
-                            <Button size="xs" className="bg-transparent" onPress={() => navigation.goBack()}>
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
                                 <Ionicons
                                     name={'arrow-back'}
                                     color={
@@ -82,7 +80,7 @@ export const Header = React.memo(
                             </Button>
                         ) : (showToggle && settings?.layout !== 'bottom') ||
                           (showToggle && settings?.layout !== 'host-bottom') ? (
-                            <Button size="xs" className="bg-transparent" onPress={() => navigation.toggleDrawer()}>
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
                                 <Ionicons
                                     name={'menu'}
                                     color={
@@ -97,10 +95,13 @@ export const Header = React.memo(
                             <></>
                         )}
                         <Text
+                            px={'$2'}
+                            color={
+                                settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$black' : '$white'
+                            }
                             style={{ fontSize: 20 }}
-                            className={`px-2 color-${
-                                settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'black' : 'white'
-                            } font-bold text-center`}
+                            fontWeight="$bold"
+                            textAlign="center"
                         >
                             {title}
                         </Text>
@@ -116,10 +117,10 @@ export const Header = React.memo(
                         ) : null}
                         {right && (
                             <>
-                                <HStack className="items-center">
+                                <HStack alignItems={'center'}>
                                     <Button
                                         size="xs"
-                                        className="bg-transparent data-[active=true]:bg-transparent"
+                                        bg={'transparent'}
                                         onPress={() => setSettingToggle(!settingToggle)}
                                     >
                                         <Ionicons
@@ -136,7 +137,7 @@ export const Header = React.memo(
                         {(back ||
                             (showToggle && settings?.layout !== 'bottom') ||
                             (showToggle && settings?.layout !== 'host-bottom')) && (
-                            <Button className="bg-transparent mr-2"></Button>
+                            <Button bg={'transparent'} mr={'$2'}></Button>
                         )}
                         {/* {right ? (
                             <HStack alignItems={'center'}>
@@ -158,7 +159,7 @@ export const Header = React.memo(
                         )} */}
                     </HStack>
                 </Box>
-            </StyledSafeAreaView>
+            </SafeAreaView>
         );
     },
 );

package/src/components/Layout/components/Sample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text } from '../../ui';
+import {  Box, Text } from '@gluestack-ui/themed';
 
 export const Sample = () => {
     return (

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

@@ -1,12 +1,15 @@
 import React from 'react';
-import { Box, Pressable, HStack, VStack, Text } from '../../../ui';
+import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
 
 const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
     return (
         <Pressable
-            className={`${
-                color === 'light' || color === 'dark' ? 'bg-[#f0f2f5]' : 'bg-[#263749]'
-            } w-[50px] h-[50px] rounded-md shadow-sm mr-4`}
+            backgroundColor={color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749'}
+            width={50}
+            height={50}
+            borderRadius={'$sm'}
+            softShadow={'4'}
+            mr={'$4'}
             onPress={() => {
                 if (mode === 'style') {
                     let { navTheme, ...rest } = settings;
@@ -68,28 +71,39 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
         >
             <HStack>
                 <Box
-                    className={`bg-${color === 'light' ? 'white' : 'black'} ${
-                        bottomOnly ? 'h-[0px] w-[0%]' : 'h-[50px] w-[28%]'
-                    } rounded-tl-md rounded-bl-md`}
+                    backgroundColor={color === 'light' ? '$white' : '$black'}
+                    height={bottomOnly ? '$0' : 50}
+                    width={bottomOnly ? '$0' : '28%'}
+                    borderTopLeftRadius={'$sm'}
+                    borderBottomLeftRadius={'$sm'}
                 />
-                <VStack className="justify-between">
+                <VStack justifyContent={'space-between'}>
                     <Box
-                        className={`h-[15px] ${bottomOnly ? 'w-[49px]' : 'w-[36px]'} bg-${
-                            color === 'light' || color === 'dark' ? 'white' : 'black'
-                        } rounded-tr-md`}
+                        height={15}
+                        width={bottomOnly ? 49 : 36}
+                        backgroundColor={color === 'light' || color === 'dark' ? '$white' : '$black'}
+                        borderTopRightRadius={'$sm'}
                     />
-                    {bottom ? <Box className={`h-[15px] w-[36px] bg-black rounded-br-md`} /> : null}
+                    {bottom ? (
+                        <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
+                    ) : null}
 
                     {bottomOnly ? (
                         <>
-                            <Box className={`h-[20px] w-[13px] bg-black`} />
-                            <Box className="h-[15px] w-[49px] bg-black rounded-b-md" />
+                            <Box height={18} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
+                            <Box
+                                height={15}
+                                width={49}
+                                backgroundColor={'$black'}
+                                borderBottomLeftRadius={'$sm'}
+                                borderBottomRightRadius={'$sm'}
+                            />
                         </>
                     ) : null}
 
                     {bottomDrawer ? (
                         <>
-                            <Box className={`h-[15px] w-[36px] bg-black rounded-br-md`} />
+                            <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
                             <Text></Text>
                         </>
                     ) : null}