@onehat/ui 0.4.72 → 0.4.73

package/src/Components/Gluestack/icon/index.tsx

@@ -1,75 +1,29 @@
 'use client';
-import React, { useMemo } from 'react';
-import { createIcon } from '@gluestack-ui/icon';
-import { Path, Svg } from 'react-native-svg';
+import React from 'react';
+// BEGIN SKOTE MOD
+// See my comment here: https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+// import { createIcon } from '@gluestack-ui/icon';
+import { createIcon } from './createIcon.js';
+// END SKOTE MOD
+import { Path } from 'react-native-svg';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from 'nativewind';
 import { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type IPrimitiveIcon = {
-  height?: number | string;
-  width?: number | string;
-  fill?: string;
-  color?: string;
-  size?: number | string;
-  stroke?: string;
-  as?: React.ElementType;
-  className?: string;
-  classNameColor?: string;
-};
-
-const PrimitiveIcon = React.forwardRef<
-  React.ElementRef<typeof Svg>,
-  IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      classNameColor,
-      size,
-      stroke,
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    color = color ?? classNameColor;
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    let colorProps = {};
-    if (fill) {
-      colorProps = { ...colorProps, fill: fill };
-    }
-    if (stroke !== 'currentColor') {
-      colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
-      colorProps = { ...colorProps, stroke: color };
-    }
-
-    if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
-    }
-    return (
-      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
-    );
-  }
-);
+import { PrimitiveIcon, IPrimitiveIcon, Svg } from '@gluestack-ui/icon';
 
 export const UIIcon = createIcon({
   Root: PrimitiveIcon,
-});
+}) as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+    React.RefAttributes<React.ComponentRef<typeof Svg>>
+>;
 
 const iconStyle = tva({
-  base: 'text-typography-950 fill-none pointer-events-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-typography-950 fill-none pointer-events-none',
+  base: 'text-typography-950 fill-black pointer-events-none',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -82,7 +36,6 @@ const iconStyle = tva({
   },
 });
 
-// @ts-expect-error
 cssInterop(UIIcon, {
   className: {
     target: 'style',
@@ -100,8 +53,8 @@ type IIConProps = IPrimitiveIcon &
   VariantProps<typeof iconStyle> &
   React.ComponentPropsWithoutRef<typeof UIIcon>;
 
-export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
-  ({ size = 'md', className, ...props }, ref) => {
+const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
+  function Icon({ size = 'md', className, ...props }, ref) {
     if (typeof size === 'number') {
       return (
         <UIIcon
@@ -133,31 +86,36 @@ export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
   }
 );
 
+export { Icon };
+
 type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
 
 const createIconUI = ({ ...props }: ParameterTypes) => {
-  const UIIconCreateIcon = createIcon({ Root: Svg, ...props });
-
-  return React.forwardRef<React.ElementRef<typeof Svg>>(
-    (
-      {
-        className,
-        size,
-        ...props
-      }: VariantProps<typeof iconStyle> &
-        React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
-      ref
-    ) => {
-      return (
-        <UIIconCreateIcon
-          // @ts-ignore
-          ref={ref}
-          {...props}
-          className={iconStyle({ size, class: className })}
-        />
-      );
-    }
-  );
+  const UIIconCreateIcon = createIcon({
+    Root: Svg,
+    ...props,
+  }) as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+      React.RefAttributes<React.ComponentRef<typeof Svg>>
+  >;
+
+  return React.forwardRef<React.ComponentRef<typeof Svg>>(function UIIcon(
+    {
+      className,
+      size,
+      ...inComingProps
+    }: VariantProps<typeof iconStyle> &
+      React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
+    ref
+  ) {
+    return (
+      <UIIconCreateIcon
+        ref={ref}
+        {...inComingProps}
+        className={iconStyle({ size, class: className })}
+      />
+    );
+  });
 };
 export { createIconUI as createIcon };
 // All Icons

package/src/Components/Gluestack/input/index.tsx

@@ -115,7 +115,11 @@ const inputStyle = tva({
 });
 
 const inputIconStyle = tva({
-  base: 'justify-center items-center text-typography-400 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'justify-center items-center text-typography-400 fill-none',
+  base: 'justify-center items-center text-typography-400 fill-black',
+// END SKOTE MOD
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/select/index.tsx

@@ -33,7 +33,11 @@ const SelectTriggerWrapper = React.forwardRef<
 });
 
 const selectIconStyle = tva({
-  base: 'text-background-500 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-background-500 fill-none',
+  base: 'text-background-500 fill-black',
+// END SKOTE MOD
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Grid/Grid.js

@@ -112,11 +112,15 @@ function GridComponent(props) {
 			columnProps = {},
 			defaultHiddenColumns = [],
 			getRowProps = (item) => {
+				let className = clsx(
+					'border-bottom-1',
+					'border-bottom-grey-500',
+				);
+				if (CURRENT_MODE === UI_MODE_NATIVE) {
+					className += ' py-4';
+				}
 				return {
-					className: clsx(
-						'border-bottom-1',
-						'border-bottom-grey-500',
-					),
+					className,
 				};
 			},
 			flatListProps = {},

package/src/Components/Grid/GridHeaderRow.js

@@ -15,6 +15,7 @@ import {
 	HORIZONTAL,
 } from '../../Constants/Directions.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -280,7 +281,7 @@ export default function GridHeaderRow(props) {
 		}
 	}, [columnsConfig]);
 	
-	if (UiGlobals.mode !== UI_MODE_WEB) {
+	if (CURRENT_MODE !== UI_MODE_WEB) {
 		canColumnsReorder = false;
 		canColumnsResize = false;
 	}
@@ -425,7 +426,7 @@ export default function GridHeaderRow(props) {
 										)}
 									/>}
 								
-								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
+								{isOver && CURRENT_MODE === UI_MODE_WEB && // only works for web for now 
 										<HeaderColumnSelectorHandle
 											key="HeaderColumnSelectorHandle"
 											showColumnsSelector={showColumnsSelector}

package/src/Components/Grid/GridRow.js

@@ -100,7 +100,7 @@ function GridRow(props) {
 			actualCanDrop = validateDrop(draggedItem);
 		}
 
-		if (showSelectHandle && isSelected) {
+		if (isSelected) {
 			if (showHovers && isHovered) {
 				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
 			} else {

package/src/Components/Hoc/withAlert.js

@@ -29,9 +29,10 @@ function withAlert(WrappedComponent) {
 			} = props,
 			getBody = (args) => {
 				const {
-					icon,
+					icon = TriangleExclamation,
 					message,
-					color = 'black',
+					textColor = 'text-black',
+					fillColor = 'fill-black',
 				} = args;
 				return <HStack className="withAlert-HStack flex-1 w-full">
 							<Box className={clsx(
@@ -43,12 +44,15 @@ function withAlert(WrappedComponent) {
 								'justify-center',
 								'pr-3',
 							)}>
-								<Icon as={icon} className={clsx(
-									'withAlert-Icon',
-									'h-[40px]',
-									'w-[40px]',
-									`text-${color}`,
-								)} />
+								<Icon
+									as={icon}
+									className={clsx(
+										'withAlert-Icon',
+										'h-[40px]',
+										'w-[40px]',
+										fillColor,
+									)}
+								/>
 							</Box>
 							<Box className={clsx(
 								'withAlert-Box2',
@@ -60,7 +64,7 @@ function withAlert(WrappedComponent) {
 							)}>
 								<Text className={clsx(
 									'withAlert-Text',
-									`text-${color}`,
+									textColor,
 									'text-[18px]',
 									'flex-none',
 									'mr-2',
@@ -108,7 +112,7 @@ function withAlert(WrappedComponent) {
 					body: getBody({
 						icon: TriangleExclamation,
 						message,
-						color: 'red',
+						fillColor: 'fill-red-500',
 					}),
 					onOk: () => {
 						hideModal();
@@ -121,6 +125,7 @@ function withAlert(WrappedComponent) {
 					customButtons: buttons ?? null,
 					h: 250,
 					w: 400,
+					whichModal: 'alert',
 				});
 			},
 			onConfirm = (message, onYes, includeCancel = false, onNo) => {
@@ -145,6 +150,7 @@ function withAlert(WrappedComponent) {
 					includeCancel,
 					h: 250,
 					w: 400,
+					whichModal: 'confirm',
 				});
 			},
 			onInfo = (message) => {
@@ -160,6 +166,7 @@ function withAlert(WrappedComponent) {
 					canClose: true,
 					h: 200,
 					w: 400,
+					whichModal: 'info',
 				});
 			};
 
@@ -173,6 +180,7 @@ function withAlert(WrappedComponent) {
 					disableWithAlert={false}
 					alreadyHasWithAlert={true}
 					alert={onAlert}
+					getAlertBody={getBody}
 					confirm={onConfirm}
 					hideAlert={hideModal}
 					showInfo={onInfo}

package/src/Components/Hoc/withDnd.js

@@ -16,6 +16,23 @@ import {
 // If you need constraints, you can potentially use a CustomDragLayer (see code at bottom)
 // but it will lag behind, compared to what the native drag layer can do
 
+function defaultDragCollect(monitor, props2) { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
+	// monitor fn determines which props from dnd state get passed
+	return {
+		// canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
+		isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
+		type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
+		item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
+		dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
+		didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
+		initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
+		initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
+		clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
+		differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
+		sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
+	};
+};
+
 export function withDragSource(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
@@ -42,22 +59,7 @@ export function withDragSource(WrappedComponent) {
 				canDrag = null,
 				isDragging = null,
 				getDragProxy,
-				dragCollect = (monitor, props2) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
-					// monitor fn determines which props from dnd state get passed
-					return {
-						// canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
-						isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
-						type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
-						item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
-						dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
-						didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
-						initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
-						initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
-						clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
-						differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
-						sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
-					};
-				},
+				dragCollect = defaultDragCollect,
 			} = props,
 			[dragState, dragSourceRef, dragPreviewRef] = useDrag(() => { // A specification object or a function that creates a specification object.
 				// The useDrag hook provides a way to wire your component into the DnD system as a drag source. By passing in a specification into useDrag, you declaratively describe the typeof draggable being generated, the itemobject representing the drag source, what props to collect, and more. The useDraghooks returns a few key items: a set of collected props, and refs that may be attached to drag source and drag preview elements
@@ -98,7 +100,7 @@ export function withDragSource(WrappedComponent) {
 						};
 					},*/
 				};
-			}),
+			}, [dragSourceItem, getDragProxy, dragSourceType, dragPreviewOptions, dragOptions, dropEffect, onDragEnd, canDrag, isDragging, dragCollect]),
 			{
 				canDrag: stateCanDrag,
 				isDragging: stateIsDragging,
@@ -120,7 +122,7 @@ export function withDragSource(WrappedComponent) {
 				if (layer.isDragging && dragSourceItem?.id === layer.item.id) {
 					dragSourceItem.onDrag(layer);
 				}
-			}, [layer]);
+			}, [layer, dragSourceItem]);
 		}
 
 		return <WrappedComponent
@@ -136,7 +138,13 @@ export function withDragSource(WrappedComponent) {
 	});
 }
 
-
+function defaultDropCollect(monitor, props) {
+	return {
+		canDrop: !!monitor.canDrop(),
+		isOver: !!monitor.isOver(),
+		draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
+	};
+}
 export function withDropTarget(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
@@ -154,13 +162,7 @@ export function withDropTarget(WrappedComponent) {
 				onDrop = null,
 				onDropHover = null,
 				canDrop = null,
-				dropCollect = (monitor, props) => {
-					return {
-						canDrop: !!monitor.canDrop(),
-						isOver: !!monitor.isOver(),
-						draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
-					};
-				},
+				dropCollect = defaultDropCollect,
 			} = props,
 			localTargetRef = useRef(null),
 			[dropState, dropTargetRef] = useDrop(() => { // A specification object or a function that creates a specification object.
@@ -187,7 +189,7 @@ export function withDropTarget(WrappedComponent) {
 						};
 					},*/
 				};
-			}),
+			}, [dropTargetAccept, dropOptions, onDrop, onDropHover, canDrop, dropCollect]),
 			{
 				canDrop: stateCanDrop,
 				isOver,
@@ -221,11 +223,13 @@ export function GlobalDragProxy() {
 		isDragging,
 		item,
 		currentOffset,
-	} = useDragLayer((monitor) => ({
-		isDragging: monitor.isDragging(),
-		item: monitor.getItem(),
-		currentOffset: monitor.getSourceClientOffset(),
-	}));
+	} = useDragLayer((monitor) => {
+		return {
+			isDragging: monitor.isDragging(),
+			item: monitor.getItem(),
+			currentOffset: monitor.getSourceClientOffset(),
+		};
+	});
 
 	if (!isDragging || !currentOffset || CURRENT_MODE !== UI_MODE_WEB) { // Native uses a native drag layer, so we don't need to render a custom proxy
 		return null;

package/src/Components/Messages/GlobalModals.js

@@ -9,39 +9,62 @@ import {
 	setAlertMessage,
 	setDebugMessage,
 	setInfoMessage,
+	selectProgressMessage,
+	selectProgressPercentage,
 } from '@src/models/Slices/DebugSlice';
 import WaitMessage from './WaitMessage';
 import ErrorMessage from './ErrorMessage';
+import ProgressModal from './ProgressModal';
 
 
 
-export default function GlobalModals() {
-	const
+export default function GlobalModals(props) {
+	const {
+			progressColor = '#666',
+		} = props,
 		dispatch = useDispatch(),
 		isWaitModalShown = useSelector(selectIsWaitModalShown),
 		alertMessage = useSelector(selectAlertMessage),
 		debugMessage = useSelector(selectDebugMessage),
 		infoMessage = useSelector(selectInfoMessage),
-		waitMessage = useSelector(selectWaitMessage);
+		waitMessage = useSelector(selectWaitMessage),
+		progressMessage = useSelector(selectProgressMessage),
+		progressPercentage = useSelector(selectProgressPercentage);
 
-	return <>
-				{isWaitModalShown && <WaitMessage text={waitMessage} />}
-				{!isWaitModalShown && alertMessage && 
-					<ErrorMessage
-						text={alertMessage}
-						onOk={() => dispatch(setAlertMessage(null))}
-					/>}
-				{!isWaitModalShown && debugMessage && 
-					<ErrorMessage
-						text={debugMessage}
-						color="green"
-						onOk={() => dispatch(setDebugMessage(null))}
-					/>}
-				{!isWaitModalShown && infoMessage && 
-					<ErrorMessage
-						text={infoMessage}
-						color="#000"
-						onOk={() => dispatch(setInfoMessage(null))}
-					/>}
-			</>;
+	let moduleToShow = null;
+
+	if (debugMessage) {
+		moduleToShow =
+			<ErrorMessage
+				text={debugMessage}
+				onOk={() => dispatch(setDebugMessage(null))}
+				color="green"
+			/>;
+	} else if (alertMessage) {
+		moduleToShow = 
+			<ErrorMessage
+				text={alertMessage}
+				onOk={() => dispatch(setAlertMessage(null))}
+			/>;
+	} else if (infoMessage) {
+		moduleToShow =
+			<ErrorMessage
+				text={infoMessage}
+				onOk={() => dispatch(setInfoMessage(null))}
+				color="#000"
+			/>;
+	}
+	if (isWaitModalShown) {
+		moduleToShow = <WaitMessage text={waitMessage} />;
+	}
+	if (progressMessage && progressPercentage < 100) {
+		moduleToShow = <ProgressModal
+							progressMessage={progressMessage}
+							progressPercentage={progressPercentage}
+							color={progressColor}
+						/>;
+	}
+	
+	return moduleToShow;
 }
+

package/src/Components/Messages/Loading.js

@@ -10,14 +10,14 @@ import ScreenContainer from '../Container/ScreenContainer.js';
 export default function Loading(props) {
 
 	if (props.isScreen) {
-		return <ScreenContainer {...props}>
+		return <ScreenContainer className="h-full w-full" {...props}>
 					<HStack className="flex-1 justify-center items-center">
 						<Spinner className="text-primary-500 mr-1" />
 						<Text>Loading</Text>
 					</HStack>
 				</ScreenContainer>;
 	}
-	return <HStackNative {...props} className="justify-center min-h-[100px]">
+	return <HStackNative {...props} className="justify-center min-h-[100px] h-full w-full">
 				<Spinner className="flex-1 text-primary-500" />
 			</HStackNative>;
 }

package/src/Components/Messages/ProgressModal.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, } from 'react';import {
+	HStack,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Spinner,
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import clsx from 'clsx';
+import { useSelector } from 'react-redux';
+import * as Progress from 'react-native-progress';
+import testProps from '../../Functions/testProps';
+
+let progressTimeout = null;
+
+export default function ProgressModal(props) {
+	const {
+			progressMessage,
+			progressPercentage,
+			color = '#666',
+		} = props,
+		[progressBarWidth, setProgressBarWidth] = useState(175),
+		[isInited, setIsInited] = useState(false);
+
+	return <Modal
+				{...testProps('ProgressModal')}
+				isOpen={true}
+				className="Modal"
+				aria-disabled={true}
+			>
+				<ModalBackdrop />
+				<ModalContent
+					className={clsx(
+						'ModalContent',
+						'max-w-[400px]',
+						'shadow-lg',
+					)}
+				>
+					<VStack
+						className={clsx(
+							'VStack',
+							'w-[90%]',
+							'items-center',
+							'justify-center',
+							'self-center',
+						)}
+						onLayout={(e) => {
+							setProgressBarWidth(e.nativeEvent.layout.width);
+							setIsInited(true);
+						}}
+					>
+						<Text className="text-black mb-2">{progressMessage}</Text>
+						{isInited && 
+							<Progress.Bar
+								animated={false}
+								progress={progressPercentage / 100}
+								width={progressBarWidth}
+								height={20}
+								color={color}
+							/>}
+					</VStack>
+				</ModalContent>
+			</Modal>;
+}

package/src/Components/Messages/WaitMessage.js

@@ -5,6 +5,11 @@ import {
 	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {
@@ -19,14 +24,14 @@ export default function WaitMessage(props) {
 				{...testProps('WaitMessage')}
 				isOpen={true}
 				className="Modal"
-				aria-disabled="true"
+				aria-disabled={true}
 			>
 				<ModalBackdrop />
 				<ModalContent
 					className={clsx(
 						'ModalContent',
 						'w-[200px]',
-						'h-[50px]',
+						CURRENT_MODE === UI_MODE_WEB ? 'h-[50px]' : '',
 						'shadow-lg',
 					)}
 				>