@onehat/ui 0.3.262 → 0.3.263

package/src/Components/Form/Field/Combo/PageSizeCombo.js

@@ -1,7 +1,7 @@
 import { useMemo, } from 'react';
 import {
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import ArrayCombo from './ArrayCombo.js';
 
 export default function PageSizeCombo(props) {
@@ -11,7 +11,7 @@ export default function PageSizeCombo(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <HStack
+		return <Row
 					w="100px"
 					ml={2}
 				>
@@ -30,7 +30,7 @@ export default function PageSizeCombo(props) {
 						allowNull={false}
 						disableDirectEntry={true}
 					/>
-				</HStack>;
+				</Row>;
 	}, [
 		Repository,
 		pageSize,

package/src/Components/Form/Field/Date.js

@@ -1,13 +1,14 @@
-import React, { useState, useRef, } from 'react';
+import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
+	Icon,
 	Modal,
 	Popover,
 	Pressable,
-	HStack,
+	Row,
 	Text,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	DATE,
 	TIME,
@@ -501,7 +502,7 @@ export function DateElement(props) {
 		}
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
-				<HStack h={10}>
+				<Row h={10}>
 					<IconButton
 						_icon={{
 							as: Calendar,
@@ -567,7 +568,7 @@ export function DateElement(props) {
 							placeholder={placeholder}
 							{..._input}
 						/>}
-				</HStack>;
+				</Row>;
 			dropdownMenu = <Modal
 								isOpen={true}
 								safeAreaTop={true}
@@ -607,17 +608,17 @@ export function DateElement(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <HStack {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 							{xButton}
 							{inputAndTrigger}
 							{additionalButtons}
 							{dropdownMenu}
-						</HStack>;
+						</Row>;
 	
 	if (tooltip) {
-		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-		// 					{assembledComponents}
-		// 				</Tooltip>;
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+							{assembledComponents}
+						</Tooltip>;
 	}
 	
 	return assembledComponents;

package/src/Components/Form/Field/DisplayField.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

package/src/Components/Form/Field/File.js

@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	Icon,
-	HStack,
+	Row,
 	Text,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
@@ -168,7 +168,7 @@ function FileElement(props) {
 		
 	return <div ref={dragRef} style={{ flex: 1, height: '100%', }} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDragOver={onDragOver} onDrop={onDrop}>
 				<Tooltip label={tooltip} placement={tooltipPlacement}>
-					<HStack flex={1} h={10} alignItems="center">
+					<Row flex={1} h={10} alignItems="center">
 						{isDropping && <Box position="absolute" borderWidth={isDropping ? 2 : 0} borderColor="primary.800" top={0} left={0} w="100%" h="100%" bg="trueGray.200" zIndex={10000} justifyContent="center" alignItems="center">
 											<Text>Set File</Text>
 										</Box>}
@@ -215,7 +215,7 @@ function FileElement(props) {
 														borderWidth={1}
 													/>}
 						<input type="file" ref={fileInputRef} name={name} onChange={onChangeFile} style={{ position: 'absolute', opacity: 0, height: 0, width: 0, }} />
-					</HStack>
+					</Row>
 				</Tooltip>
 			</div>;
 }

package/src/Components/Form/Field/Input.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Input,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
@@ -86,9 +86,9 @@ function InputElement(props) {
 						value={localValue}
 					/>;
 	if (tooltip) {
-		// component = <Tooltip label={tooltip} placement={tooltipPlacement}>
-		// 				{component}
-		// 			</Tooltip>;
+		component = <Tooltip label={tooltip} placement={tooltipPlacement}>
+						{component}
+					</Tooltip>;
 	}
 	return component;
 }

package/src/Components/Form/Field/Number.js

@@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Icon,
 	Input,
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import withComponent from '../../Hoc/withComponent.js';
@@ -118,7 +118,7 @@ function NumberElement(props) {
 		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
 		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
 
-	return <HStack flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
+	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
 				<IconButton
 					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onDecrement}
@@ -162,7 +162,7 @@ function NumberElement(props) {
 					borderLeftRadius={0}
 					zIndex={10}
 				/>
-			</HStack>;
+			</Row>;
 }
 
 export default withComponent(withValue(NumberElement));

package/src/Components/Form/Field/RadioGroup/RadioGroup.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, } from 'react';
 import {
+	Column,
 	Radio,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';

package/src/Components/Form/Field/Tag/Tag.js

@@ -1,9 +1,9 @@
 import { useState, useRef, } from 'react';
 import {
-	VStack,
+	Column,
 	Modal,
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';
@@ -237,13 +237,13 @@ function TagComponent(props) {
 	}
 
 	return <>
-				<VStack
+				<Column
 					{...props}
 					{...sizeProps}
 					px={0}
 					py={0}
 				>
-					<HStack
+					<Row
 						w="100%"
 						borderWidth={1}
 						borderColor="trueGray.300"
@@ -253,7 +253,7 @@ function TagComponent(props) {
 						mb={styles.FORM_TAG_MB}
 						minHeight={styles.FORM_TAG_MIN_HEIGHT}
 						flexWrap="wrap"
-					>{valueBoxes}</HStack>
+					>{valueBoxes}</Row>
 					{!isViewOnly && <WhichCombo
 										Repository={props.Repository}
 										Editor={props.Editor}
@@ -267,7 +267,7 @@ function TagComponent(props) {
 										tooltip={tooltip}
 										{..._combo}
 									/>}
-				</VStack>
+				</Column>
 				{isViewerShown && 
 					<Modal
 						isOpen={true}

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -1,7 +1,7 @@
 import {
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
 import Xmark from '../../../Icons/Xmark.js';
@@ -15,7 +15,7 @@ export default function ValueBox(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles;
-	return <HStack
+	return <Row
 				borderWidth={1}
 				borderColor="trueGray.400"
 				borderRadius="md"
@@ -48,5 +48,5 @@ export default function ValueBox(props) {
 						onPress={onDelete}
 						h="100%"
 					/>}
-			</HStack>;
+			</Row>;
 }

package/src/Components/Form/Field/Text.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

package/src/Components/Form/Field/TextArea.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Textarea,
-} from '@gluestack-ui/themed';
+	TextArea,
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -50,7 +50,7 @@ const
 			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 		}
 
-		return <Textarea
+		return <TextArea
 					ref={props.outerRef}
 					onChangeText={onChangeTextLocal}
 					flex={1}

package/src/Components/Form/Field/Toggle.js

@@ -2,10 +2,10 @@ import React, { useRef, } from 'react';
 import {
 	Icon,
 	Pressable,
-	HStack,
+	Row,
 	Switch,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
@@ -51,7 +51,7 @@ const
 					/>;
 		}
 
-		return <HStack alignItems="center">
+		return <Row alignItems="center">
 					<Pressable onPress={onNullify}>
 						<Switch
 							ref={props.outerRef}
@@ -71,7 +71,7 @@ const
 					<Pressable onPress={onToggle}>
 						<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
 					</Pressable>
-				</HStack>;
+				</Row>;
 	},
 	ToggleField = withComponent(withValue(ToggleElement));
 

package/src/Components/Form/FieldSet.js

@@ -1,9 +1,10 @@
 import { useState, useRef, } from 'react';
 import {
 	Box,
-	HStack,
+	Column,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -85,7 +86,7 @@ export default function FieldSet(props) {
 				{...propsToPass}
 			>
 				{title &&
-					<HStack
+					<Row
 						w="100%"
 						borderBottomWidth={1}
 						borderBottomColor="trueGray.200"
@@ -101,7 +102,7 @@ export default function FieldSet(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 						>{title}</Text>
-						{showToggleAllCheckbox && <HStack alignSelf="right">
+						{showToggleAllCheckbox && <Row alignSelf="right">
 														<Text
 															fontSize={styles.FORM_FIELDSET_FONTSIZE}
 															py={1}
@@ -116,7 +117,7 @@ export default function FieldSet(props) {
 																size: 'lg',
 															}}
 														/>
-													</HStack>}
+													</Row>}
 						{isCollapsible && <IconButton
 												_icon={{
 													as: isLocalCollapsed ? <CaretDown /> : <CaretUp />,
@@ -125,7 +126,7 @@ export default function FieldSet(props) {
 												}}
 												onPress={onToggleCollapse}
 											/>}
-					</HStack>}
+					</Row>}
 				{helpText && <Text>{helpText}</Text>}
 				{!isLocalCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
 											{children}

package/src/Components/Form/FiltersForm.js

@@ -1,3 +1,12 @@
+import { useState, useEffect, } from 'react';
+import {
+	Button,
+	Column,
+	Icon,
+	Row,
+	ScrollView,
+	Text,
+} from 'native-base';
 import Form from './Form.js';
 import _ from 'lodash';
 

package/src/Components/Form/Form.js

@@ -1,14 +1,13 @@
 import React, { useEffect, useState, useRef, isValidElement, } from 'react';
+import { View, } from 'react-native';
 import {
 	Box,
-	Button,
-	ButtonText,
-	VStack,
-	HStack,
+	Column,
 	Icon,
+	Row,
 	ScrollView,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	EDITOR_TYPE__INLINE,
 	EDITOR_TYPE__WINDOWED,
@@ -31,7 +30,7 @@ import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
-// import Button from '../Buttons/Button.js';
+import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
@@ -71,6 +70,8 @@ function Form(props) {
 			columnDefaults = {}, // defaults for each Column defined in items (above)
 			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE__INLINE
 			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
+			formHeader = null,
+			containerProps = {},
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
 			checkIsEditingDisabled = true,
@@ -370,7 +371,7 @@ function Form(props) {
 								/>);
 			
 			});
-			return <HStack>{elements}</HStack>;
+			return <Row>{elements}</Row>;
 		},
 		buildFromItems = () => {
 			return _.map(items, (item, ix) => buildFromItem(item, ix, columnDefaults));
@@ -512,10 +513,10 @@ function Form(props) {
 					if (containerWidth > STACK_ROW_THRESHOLD) {
 						element = <><Label {...labelProps}>{label}</Label>{element}</>;
 					} else {
-						element = <VStack><Label {...labelProps}>{label}</Label>{element}</VStack>;
+						element = <Column><Label {...labelProps}>{label}</Label>{element}</Column>;
 					}
 				}
-				return <HStack key={ix} px={2} pb={1}>{element}</HStack>;
+				return <Row key={ix} px={2} pb={1}>{element}</Row>;
 			}
 
 
@@ -611,25 +612,25 @@ function Form(props) {
 							if (message) {
 								message = <Text color="#f00">{message}</Text>;
 							}
-							element = <VStack pt={1} flex={1}>
+							element = <Column pt={1} flex={1}>
 										{element}
 										{message}
-									</VStack>;
+									</Column>;
 
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > STACK_ROW_THRESHOLD) {
-									element = <HStack flex={1} flexWrap="wrap">
+									element = <Row flex={1} flexWrap="wrap">
 													{element}
 													{buttons}
-												</HStack>;
+												</Row>;
 								} else {
-									element = <VStack flex={1} w="100%">
+									element = <Column flex={1} w="100%">
 												{element}
-												<HStack flex={1} w="100%" mt={2} flexWrap="wrap">
+												<Row flex={1} w="100%" mt={2} flexWrap="wrap">
 													{buttons}
-												</HStack>
-											</VStack>;
+												</Row>
+											</Column>;
 								}
 							}
 								
@@ -657,25 +658,25 @@ function Form(props) {
 									labelProps.w = defaults.labelWidth;
 								}
 								if (containerWidth > STACK_ROW_THRESHOLD) {
-									element = <HStack w="100%" py={1}>
+									element = <Row w="100%" py={1}>
 													<Label {...labelProps}>{requiredIndicator}{label}</Label>
 													{element}
-												</HStack>;
+												</Row>;
 								} else {
-									element = <VStack w="100%" py={1} mt={3}>
+									element = <Column w="100%" py={1} mt={3}>
 													<Label {...labelProps}>{requiredIndicator}{label}</Label>
 													{element}
-												</VStack>;
+												</Column>;
 								}
 							} else if (disableLabels && requiredIndicator) {
-								element = <HStack w="100%" py={1}>
+								element = <Row w="100%" py={1}>
 												{requiredIndicator}
 												{element}
-											</HStack>;
+											</Row>;
 							}
 
 							const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
-							return <HStack key={ix} px={2} pb={1} bg={error ? '#fdd' : null}>{dirtyIcon}{element}</HStack>;
+							return <Row key={ix} px={2} pb={1} bg={error ? '#fdd' : null}>{dirtyIcon}{element}</Row>;
 						}}
 					/>;
 		},
@@ -721,7 +722,7 @@ function Form(props) {
 									fontStyle="italic"
 								>{description}</Text>;
 					}
-					components.push(<VStack key={'ancillary-' + ix} mx={2} my={5}>{title}{description}{element}</VStack>);
+					components.push(<Column key={'ancillary-' + ix} mx={2} my={5}>{title}{description}{element}</Column>);
 				});
 			}
 			return components;
@@ -867,44 +868,40 @@ function Form(props) {
 		// 	formComponents = buildFromItems();
 		// 	const formAncillaryComponents = buildAncillary();
 		// 	editor = <>
-		// 				<VStack p={4}>{formComponents}</VStack>
-		// 				<VStack pt={4}>{formAncillaryComponents}</VStack>
+		// 				<Column p={4}>{formComponents}</Column>
+		// 				<Column pt={4}>{formAncillaryComponents}</Column>
 		// 			</>;
 		} else {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= ONE_COLUMN_THRESHOLD ? <HStack p={4} pl={0}>{formComponents}</HStack> : null}
-						{containerWidth < ONE_COLUMN_THRESHOLD ? <VStack p={4}>{formComponents}</VStack> : null}
-						<VStack m={2} pt={4} px={2}>{formAncillaryComponents}</VStack>
+						{containerWidth >= ONE_COLUMN_THRESHOLD ? <Row p={4} pl={0}>{formComponents}</Row> : null}
+						{containerWidth < ONE_COLUMN_THRESHOLD ? <Column p={4}>{formComponents}</Column> : null}
+						<Column m={2} pt={4} px={2}>{formAncillaryComponents}</Column>
 					</>;
 
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);
 
-			formButtons.push(<HStack key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
+			formButtons.push(<Row key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 									<Button
 										key="backBtn"
 										onPress={onBack}
 										leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
 										color="#fff"
-									>
-										<ButtonText>Back</ButtonText>
-									</Button>}
+									>Back</Button>}
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
 									<Button
 										key="viewBtn"
 										onPress={onViewMode}
 										leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 										color="#fff"
-									>
-										<ButtonText>To View</ButtonText>
-									</Button>}
-							</HStack>);
+									>To View</Button>}
+							</Row>);
 			if (editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<HStack key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+				formButtons.push(<Row key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
 									{additionalButtons}
-								</HStack>)
+								</Row>)
 			}
 		}
 
@@ -963,7 +960,7 @@ function Form(props) {
 		}
 	}
 	
-	return <VStack {...sizeProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
+	return <Column {...sizeProps} {...containerProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<Row
@@ -978,6 +975,7 @@ function Form(props) {
 						>{editor}</Row>}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+							{formheader}
 							{formButtons}
 							{editor}
 						</ScrollView>}
@@ -985,7 +983,7 @@ function Form(props) {
 					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
-							<HStack flex={1} justifyContent="flex-start">
+							<Row flex={1} justifyContent="flex-start">
 								<Button
 									key="deleteBtn"
 									onPress={onDelete}
@@ -994,10 +992,8 @@ function Form(props) {
 										bg: 'warningHover',
 									}}
 									color="#fff"
-								>
-									<ButtonText>Delete</ButtonText>
-								</Button>
-							</HStack>}
+								>Delete</Button>
+							</Row>}
 
 						{showResetBtn && 
 							<IconButton
@@ -1017,9 +1013,7 @@ function Form(props) {
 								variant="ghost"
 								onPress={onCancel}
 								color="#fff"
-							>
-								<ButtonText>Cancel</ButtonText>
-							</Button>}
+							>Cancel</Button>}
 							
 						{showCloseBtn && 
 							<Button
@@ -1027,9 +1021,7 @@ function Form(props) {
 								variant="ghost"
 								onPress={onClose}
 								color="#fff"
-							>
-								<ButtonText>Close</ButtonText>
-							</Button>}
+							>Close</Button>}
 
 						{showSaveBtn && 
 							<Button
@@ -1037,9 +1029,7 @@ function Form(props) {
 								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 								isDisabled={isSaveDisabled}
 								color="#fff"
-							>
-								<ButtonText>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</ButtonText>
-							</Button>}
+							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 						
 						{showSubmitBtn && 
 							<Button
@@ -1047,21 +1037,17 @@ function Form(props) {
 								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
 								isDisabled={isSubmitDisabled}
 								color="#fff"
-							>
-								<ButtonText>{submitBtnLabel || 'Submit'}</ButtonText>
-							</Button>}
+							>{submitBtnLabel || 'Submit'}</Button>}
 					
 						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
 							return <Button
 										{...props}
 										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
-									>
-										<ButtonText>{props.text}</ButtonText>
-									</Button>;
+									>{props.text}</Button>;
 						})}
 					</Footer>
 				</>}
-			</VStack>;
+			</Column>;
 }
 
 // helper fns