@onehat/ui 0.3.260 → 0.3.262

package/src/Components/Icons/UserGroup.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
-		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8 2.4-.1 4.7-.2 7.1-.2h61.4c89.1 0 161.3 72.2 161.3 161.3 0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9 19.7-26.6 31.3-59.5 31.3-95.1 0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 640 512',
+	path: <Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8 2.4-.1 4.7-.2 7.1-.2h61.4c89.1 0 161.3 72.2 161.3 161.3 0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9 19.7-26.6 31.3-59.5 31.3-95.1 0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/UserPlus.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
-		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 640 512',
+	path: <Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/UserSecret.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
-		<Path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4-47.3 8.7-78 22.8-78 38.6 0 14.3 25 27.1 64.6 35.9-.4 4-.6 8-.6 12.1 0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5 0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48 0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9-4.7 3.3-8.8 6.1-15.5 6.1zm56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2-2.3-7-12.2-7-14.5 0-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32-32 128-48-192 64 32zm128-32l-48 192-32-128 16-32 64-32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 448 512',
+	path: <Path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4-47.3 8.7-78 22.8-78 38.6 0 14.3 25 27.1 64.6 35.9-.4 4-.6 8-.6 12.1 0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5 0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48 0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9-4.7 3.3-8.8 6.1-15.5 6.1zm56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2-2.3-7-12.2-7-14.5 0-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32-32 128-48-192 64 32zm128-32l-48 192-32-128 16-32 64-32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Video.js

@@ -1,20 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-  return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 11.77 7.85"
-      {...props}
-    >
-      <Path
-        d="M0 1.31C0 .59.59 0 1.31 0h5.23c.72 0 1.31.59 1.31 1.31v5.23c0 .72-.59 1.31-1.31 1.31H1.31C.59 7.85 0 7.26 0 6.54V1.31zM11.43.73c.21.11.35.34.35.58v5.23c0 .24-.13.46-.35.58s-.47.1-.67-.03L8.8 5.78l-.29-.19V2.27l.29-.19L10.76.77c.2-.13.46-.15.67-.03z"
-      />
-    </Icon>
-  )
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 11.77 7.85',
+	path: <Path d="M0 1.31C0 .59.59 0 1.31 0h5.23c.72 0 1.31.59 1.31 1.31v5.23c0 .72-.59 1.31-1.31 1.31H1.31C.59 7.85 0 7.26 0 6.54V1.31zM11.43.73c.21.11.35.34.35.58v5.23c0 .24-.13.46-.35.58s-.47.1-.67-.03L8.8 5.78l-.29-.19V2.27l.29-.19L10.76.77c.2-.13.46-.15.67-.03z" />
+});
 
 export default SvgComponent

package/src/Components/Icons/X.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" {...props}>
-		<Path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5c-11.3-13.6-31.5-15.4-45.1-4.1S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306l135.4 162.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 384 512',
+	path: <Path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5c-11.3-13.6-31.5-15.4-45.1-4.1S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306l135.4 162.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Xmark.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" {...props}>
-		<Path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 320 512',
+	path: <Path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z" />,
+});
 
 export default SvgComponent

package/src/Components/Layout/CenterBox.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 
 export default function CenterBox(props) {
 	return <Box

package/src/Components/Layout/Footer.js

@@ -1,11 +1,11 @@
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {
 	const styles = UiGlobals.styles;
-	return <Row
+	return <HStack
 				alignItems="center"
 				justifyContent="center"
 				alignSelf="flex-end"
@@ -17,5 +17,5 @@ export default function Footer(props) {
 				{...props}
 			>
 				{props.children}
-			</Row>;
+			</HStack>;
 }

package/src/Components/Messages/ConfirmationMessage.js

@@ -1,8 +1,9 @@
 import {
 	Button,
+	ButtonText,
 	Modal,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import emptyFn from '../../Functions/emptyFn.js';
 
 export default function ConfirmationMessage(props) {
@@ -19,8 +20,12 @@ export default function ConfirmationMessage(props) {
 						<Text color="#000">{textMessage}</Text>
 					</Modal.Body>
 					<Modal.Footer py={2} pr={4}>
-						<Button variant="ghost" color="trueGray.700" onPress={onCancel}>Cancel</Button>
-						<Button variant="ghost" color="primary.800" onPress={onOk}>OK</Button>
+						<Button variant="ghost" color="trueGray.700" onPress={onCancel}>
+							<ButtonText>Cancel</ButtonText>
+						</Button>
+						<Button variant="ghost" color="primary.800" onPress={onOk}>
+							<ButtonText>OK</ButtonText>
+						</Button>
 					</Modal.Footer>
 				</Modal.Content>
 			</Modal>;

package/src/Components/Messages/ErrorMessage.js

@@ -1,10 +1,11 @@
 import {
 	Box,
 	Button,
+	ButtonText,
 	Icon,
 	Modal,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
 export default function ErrorMessage(props) {
@@ -32,7 +33,9 @@ export default function ErrorMessage(props) {
 						<Text flex={1} color={color} fontSize="18px">{text}</Text>
 					</Modal.Body>
 					<Modal.Footer py={2} pr={4}>
-						<Button color="primary.800" onPress={onOk}>OK</Button>
+						<Button color="primary.800" onPress={onOk}>
+							<ButtonText>OK</ButtonText>
+						</Button>
 					</Modal.Footer>
 				</Modal.Content>
 			</Modal>;

package/src/Components/Messages/Loading.js

@@ -1,20 +1,20 @@
 import {
-	Row,
+	HStack,
 	Spinner,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {
 	if (props.isScreen) {
 		return <ScreenContainer {...props}>
-					<Row flex={1} justifyContent="center" alignItems="center">
+					<HStack flex={1} justifyContent="center" alignItems="center">
 						<Spinner color="primary.500" mr={2} />
 						<Text>Loading</Text>
-					</Row>
+					</HStack>
 				</ScreenContainer>;
 	}
-	return <Row justifyContent="center" minHeight={100} {...props}>
+	return <HStack justifyContent="center" minHeight={100} {...props}>
 				<Spinner flex={1} color="primary.500" />
-			</Row>;
+			</HStack>;
 }

package/src/Components/Messages/OkMessage.js

@@ -1,9 +1,8 @@
  import {
 	Button,
 	Modal,
-	Row,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 
 export default function OkMessage(props) {
 	const {
@@ -17,7 +16,9 @@ export default function OkMessage(props) {
 						<Text color="#000">{textMessage}</Text>
 					</Modal.Body>
 					<Modal.Footer p={0} pr={4} borderTopWidth={0}>
-						<Button variant="ghost" color="primary.800" onPress={onClose}>OK</Button>
+						<Button variant="ghost" color="primary.800" onPress={onClose}>
+							<ButtonText>OK</ButtonText>
+						</Button>
 					</Modal.Footer>
 				</Modal.Content>
 			</Modal>;

package/src/Components/Messages/WaitMessage.js

@@ -1,7 +1,7 @@
 import {
 	Box,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	Modal,
 	View,

package/src/Components/Panel/AccordionGridPanel.js

@@ -2,7 +2,7 @@ import { useState, } from 'react';
 import {
 	Column,
 	ScrollView,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
 import Footer from '../Layout/Footer.js';

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,6 @@
 import {
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';

package/src/Components/Panel/Header.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
-	Column,
+	VStack,
 	Icon,
 	Pressable,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -80,12 +80,12 @@ export default function Header(props) {
 								}
 							}}
 						>
-							 <Column alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
+							 <VStack alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
 								{collapseBtn}
 								<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
 									<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
 								</div>
-							</Column>
+							</VStack>
 						</div>;
 			}
 		}
@@ -99,11 +99,11 @@ export default function Header(props) {
 						}
 					}}
 				>
-					<Row alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
+					<HStack alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
 						{closeBtn}
 						<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
 						{collapseBtn}
-					</Row>
+					</HStack>
 				</div>;
 
 	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
@@ -122,7 +122,7 @@ export default function Header(props) {
 								}
 							}}
 						>
-							 <Column
+							 <VStack
 							 	alignItems="center"
 								justifyContent="flex-start"
 								h="100%" 
@@ -130,7 +130,7 @@ export default function Header(props) {
 								bg={styles.PANEL_HEADER_BG_VERTICAL}
 							>
 								{collapseBtn}
-								<Column
+								<VStack
 									alignItems="center"
 									justifyContent="center"
 									flex={1} 
@@ -145,8 +145,8 @@ export default function Header(props) {
 										w={200}
 										style={{ transform: [{ rotate: '-90deg'}] }}
 									>{title}</Text>
-								</Column>
-							</Column>
+								</VStack>
+							</VStack>
 						</Pressable>;
 			}
 		}
@@ -161,7 +161,7 @@ export default function Header(props) {
 						}
 					}}
 				>
-					<Row
+					<HStack
 						alignItems="center"
 						justifyContent="flex-start"
 						px={styles.PANEL_HEADER_PX}
@@ -177,7 +177,7 @@ export default function Header(props) {
 							ellipsizeMode="head"
 						>{title}</Text>
 						{collapseBtn}
-					</Row>
+					</HStack>
 				</Pressable>;
 
 	}

package/src/Components/Panel/Mask.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -1,10 +1,8 @@
 import { useEffect, useState, } from 'react';
 import {
-	Column,
-	Row,
+	VStack,
 	ScrollView,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -147,26 +145,26 @@ function Panel(props) {
 
 	if (isCollapsed) {
 		if (collapseDirection === HORIZONTAL) {
-			return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
+			return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
 						{isDisabled && <Mask />}
 						{headerComponent}
-					</Column>;
+					</VStack>;
 		}
-		return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
+		return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
 					{isDisabled && <Mask />}
 					{headerComponent}
-				</Column>;
+				</VStack>;
 	}
-	return <Column overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
+	return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
 				{isDisabled && <Mask />}
 				{headerComponent}
 				{topToolbar}
-				<Column flex={1} w="100%" overflow="hidden">
+				<VStack flex={1} w="100%" overflow="hidden">
 					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
-				</Column>
+				</VStack>
 				{bottomToolbar}
 				{footer}
-			</Column>;
+			</VStack>;
 
 }
 

package/src/Components/Picker/Picker.js

@@ -1,9 +1,9 @@
 import {
 	Icon,
-	Row,
+	HStack,
 	Select,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
@@ -55,10 +55,10 @@ export default function Picker(props) {
 					>{items}</Select>;
 	if (tooltip) {
 		//TODO: This doesn't yet work, but doesn't do anything harmful either!
-		select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
+		// select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
 	}
-	return <Row {...props}>
+	return <HStack {...props}>
 				{select}
-			</Row>;
+			</HStack>;
 }
 

package/src/Components/Report/Report.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-	Column,
+	VStack,
 	Icon,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,
@@ -102,20 +102,20 @@ function Report(props) {
 			ml: 1,
 		});
 	}
-	return <Column w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
-				<Row>
-					{icon && <Column>{icon}</Column>}
-					<Column flex={1}>
+	return <VStack w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
+				<HStack>
+					{icon && <VStack>{icon}</VStack>}
+					<VStack flex={1}>
 						<Text fontSize="2xl" maxWidth="100%">{title}</Text>
 						<Text fontSize="sm">{description}</Text>
-					</Column>
-				</Row>
+					</VStack>
+				</HStack>
 				<Form
 					type={EDITOR_TYPE__PLAIN}
 					additionalFooterButtons={buttons}
 					{...props._form}
 				/>
-			</Column>;
+			</VStack>;
 }
 
 export default withComponent(Report);

package/src/Components/Screens/Manager.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Column,
-	Row,
+	VStack,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import withComponent from '../Hoc/withComponent.js';
 import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton';
@@ -84,8 +84,8 @@ function ManagerScreen(props) {
 		};
 	}
 
-	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
-				<Row
+	return <VStack maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
+				<HStack
 					h="80px"
 					py={2}
 					borderBottomWidth={2}
@@ -115,9 +115,9 @@ function ManagerScreen(props) {
 								tooltip="Side Editor"
 							/>
 						</>}
-				</Row>
+				</HStack>
 				{isRendered && isModeSet && whichComponent}
-			</Column>;
+			</VStack>;
 }
 
 export default withComponent(ManagerScreen);