react-native-ui-lib 8.3.4-snapshot.7814 → 8.3.4-snapshot.7824

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.3.4-snapshot.7814",
+  "version": "8.3.4-snapshot.7824",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/floatingButton/floatingButton.api.json

@@ -1,12 +1,8 @@
 {
   "name": "FloatingButton",
   "category": "overlays",
-  "description": "Hovering button with gradient background",
-  "modifiers": [
-    "margin",
-    "background",
-    "color"
-  ],
+  "description": "Hovering button with gradient background, backed by ScreenFooter",
+  "modifiers": ["margin", "background", "color"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true"
@@ -58,6 +54,12 @@
       "type": "boolean",
       "description": "Whether to show background overlay"
     },
+    {
+      "name": "hoisted",
+      "type": "boolean",
+      "description": "Whether the footer should be hoisted above the keyboard. When true, uses KeyboardAccessoryView for keyboard-aware positioning. When false, uses sticky positioning.",
+      "default": "true"
+    },
     {
       "name": "testID",
       "type": "string",
@@ -96,11 +98,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Default",
-              "Full Width"
-            ],
+            "columns": ["Property", "Default", "Full Width"],
             "items": [
               {
                 "title": "Main button",
@@ -130,10 +128,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout",
-              "Component"
-            ],
+            "columns": ["Layout", "Component"],
             "items": [
               {
                 "title": "Horizontal",

package/src/components/floatingButton/index.d.ts

@@ -1,5 +1,4 @@
-import React, { PropsWithChildren, PureComponent } from 'react';
-import { Animated } from 'react-native';
+import React, { PropsWithChildren } from 'react';
 import { ButtonProps } from '../button';
 export declare enum FloatingButtonLayouts {
     VERTICAL = "Vertical",
@@ -23,7 +22,7 @@ export interface FloatingButtonProps {
      */
     bottomMargin?: number;
     /**
-     * Whether the buttons get the container's full with (vertical layout only)
+     * Whether the buttons get the container's full width (vertical layout only)
      */
     fullWidth?: boolean;
     /**
@@ -42,6 +41,12 @@ export interface FloatingButtonProps {
      * Whether to show background overlay
      */
     hideBackgroundOverlay?: boolean;
+    /**
+     * Whether the footer should be hoisted above the keyboard.
+     * When true (default), uses KeyboardAccessoryView for keyboard-aware positioning.
+     * When false, uses sticky positioning.
+     */
+    hoisted?: boolean;
     /**
      * Used as testing identifier
      * <TestID> - the floatingButton container
@@ -50,40 +55,9 @@ export interface FloatingButtonProps {
      */
     testID?: string;
 }
-/**
- * @description: Hovering button with gradient background
- * @modifiers: margin, background, color
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
- */
-declare class FloatingButton extends PureComponent<FloatingButtonProps> {
-    static displayName: string;
-    static floatingButtonLayouts: typeof FloatingButtonLayouts;
-    static defaultProps: {
-        duration: number;
-        buttonLayout: FloatingButtonLayouts;
-    };
-    initialVisibility?: boolean;
-    firstLoad: boolean;
-    visibleAnimated: Animated.Value;
-    constructor(props: FloatingButtonProps);
-    componentDidUpdate(prevProps: FloatingButtonProps): void;
-    getAnimatedStyle: () => {
-        opacity: Animated.Value;
-        transform: {
-            translateY: Animated.AnimatedInterpolation<string | number>;
-        }[];
-    };
-    get isSecondaryOnly(): boolean;
-    get isHorizontalLayout(): boolean;
-    get isSecondaryHorizontal(): boolean | undefined;
-    get isSecondaryVertical(): boolean | undefined;
-    renderButton(): React.JSX.Element | undefined;
-    renderOverlay: () => React.JSX.Element | undefined;
-    renderSecondaryButton(): React.JSX.Element | undefined;
-    renderHorizontalLayout(): React.JSX.Element;
-    renderVerticalLayout(): React.JSX.Element;
-    render(): false | React.JSX.Element | undefined;
-}
-declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & typeof FloatingButton;
+declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & {
+    (props: FloatingButtonProps): React.JSX.Element | null;
+    displayName: string;
+    floatingButtonLayouts: typeof FloatingButtonLayouts;
+};
 export default _default;

package/src/components/floatingButton/index.js

@@ -1,190 +1,80 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import { Constants, asBaseComponent } from "../../commons/new";
-import { Colors, Shadows, Spacings } from "../../style";
-import View from "../view";
-import Image from "../image";
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
+import { Colors, Shadows } from "../../style";
 import Button from "../button";
+import ScreenFooter, { ScreenFooterLayouts, ScreenFooterBackgrounds, KeyboardBehavior, ItemsFit } from "../screenFooter";
 export let FloatingButtonLayouts = /*#__PURE__*/function (FloatingButtonLayouts) {
   FloatingButtonLayouts["VERTICAL"] = "Vertical";
   FloatingButtonLayouts["HORIZONTAL"] = "Horizontal";
   return FloatingButtonLayouts;
 }({});
-const gradientImage = () => require("./gradient.png");
-
 /**
- * @description: Hovering button with gradient background
+ * @description: Hovering button with gradient background, backed by ScreenFooter
  * @modifiers: margin, background, color
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
  */
-class FloatingButton extends PureComponent {
-  static displayName = 'FloatingButton';
-  static floatingButtonLayouts = FloatingButtonLayouts;
-  static defaultProps = {
-    duration: 300,
-    buttonLayout: FloatingButtonLayouts.VERTICAL
-  };
-  constructor(props) {
-    super(props);
-    this.initialVisibility = props.visible;
-    this.firstLoad = true;
-    this.visibleAnimated = new Animated.Value(Number(!!props.visible));
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      visible,
-      duration
-    } = this.props;
-    if (prevProps.visible !== visible) {
-      Animated.timing(this.visibleAnimated, {
-        toValue: Number(!!visible),
-        duration,
-        useNativeDriver: true
-      }).start();
-    }
-  }
-  getAnimatedStyle = () => {
-    return {
-      opacity: this.visibleAnimated,
-      transform: [{
-        translateY: this.visibleAnimated.interpolate({
-          inputRange: [0, 1],
-          outputRange: [Constants.screenHeight / 2, 0]
-        })
-      }]
-    };
-  };
-  get isSecondaryOnly() {
-    const {
-      secondaryButton,
-      button
-    } = this.props;
-    return !!secondaryButton && !button;
-  }
-  get isHorizontalLayout() {
-    const {
-      buttonLayout
-    } = this.props;
-    return buttonLayout === FloatingButtonLayouts.HORIZONTAL || this.isSecondaryOnly;
-  }
-  get isSecondaryHorizontal() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && this.isHorizontalLayout;
-  }
-  get isSecondaryVertical() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && !this.isHorizontalLayout;
-  }
-  renderButton() {
-    const {
-      bottomMargin,
-      button,
-      fullWidth,
-      testID
-    } = this.props;
-    if (button) {
-      const shadowStyle = button && !button.outline && !button.link ? styles.shadow : undefined;
-      const marginStyle = {
-        marginTop: Spacings.s4,
-        marginBottom: this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8,
-        marginLeft: this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined,
-        marginRight: this.isSecondaryHorizontal ? Spacings.s5 : fullWidth ? Spacings.s4 : undefined
+const FloatingButton = props => {
+  const {
+    visible = false,
+    button,
+    secondaryButton,
+    bottomMargin,
+    fullWidth,
+    buttonLayout = FloatingButtonLayouts.VERTICAL,
+    duration = 300,
+    withoutAnimation,
+    hideBackgroundOverlay,
+    hoisted = true,
+    testID
+  } = props;
+  useEffect(() => {
+    // eslint-disable-next-line max-len
+    LogService.warn('RNUILib FloatingButton now uses ScreenFooter internally, which requires a SafeAreaProvider. If you experience safe area issues, please wrap your app (or the relevant screen) with <SafeAreaProvider>.');
+  }, []);
+  const footerContentContainerStyle = useMemo(() => {
+    if (bottomMargin !== undefined) {
+      return {
+        paddingBottom: bottomMargin
       };
-      const shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
-      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
     }
+    return undefined;
+  }, [bottomMargin]);
+  const isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+  if (!button && !secondaryButton) {
+    return null;
   }
-  renderOverlay = () => {
-    if (!this.props.hideBackgroundOverlay) {
-      return <View pointerEvents={'none'} style={styles.image}>
-          <Image style={styles.image} source={gradientImage()} resizeMode={'stretch'} tintColor={Colors.$backgroundDefault} />
-        </View>;
+  const renderPrimaryButton = () => {
+    if (!button) {
+      return null;
     }
+    const shadowStyle = !button.outline && !button.link ? styles.shadow : undefined;
+    const shouldFlex = isHorizontal && !!secondaryButton || fullWidth && isHorizontal;
+    return <Button key="primary" size={Button.sizes.large} flex={!!shouldFlex} style={shadowStyle} testID={testID ? `${testID}.button` : undefined} {...button} />;
   };
-  renderSecondaryButton() {
-    const {
-      secondaryButton,
-      bottomMargin,
-      testID,
-      fullWidth,
-      button
-    } = this.props;
-    if (secondaryButton) {
-      const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
-      const shouldFlex = this.isHorizontalLayout && !!button || fullWidth && this.isSecondaryOnly;
-      const buttonStyle = this.isHorizontalLayout ? [styles.shadow, styles.horizontalSecondaryMargin, {
-        backgroundColor: bgColor
-      }] : {
-        marginBottom: bottomMargin || Spacings.s7
-      };
-      return <Button outline={this.isHorizontalLayout} flex={shouldFlex} link={!this.isHorizontalLayout} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
-    }
-  }
-  renderHorizontalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderSecondaryButton()}
-        {this.renderButton()}
-      </>;
-  }
-  renderVerticalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderButton()}
-        {this.renderSecondaryButton()}
-      </>;
-  }
-  render() {
-    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
-    const {
-      withoutAnimation,
-      visible,
-      fullWidth,
-      testID,
-      button,
-      secondaryButton
-    } = this.props;
-    this.firstLoad && !visible ? this.firstLoad = true : this.firstLoad = false;
-
-    // NOTE: On first load, don't show if it should not be visible
-    if (this.firstLoad === true && !this.initialVisibility) {
-      return false;
+  const renderSecondaryButton = () => {
+    if (!secondaryButton) {
+      return null;
     }
-    if (!visible && withoutAnimation) {
-      return false;
-    }
-    if (button || secondaryButton) {
-      const hasBothButtons = !!(button && secondaryButton);
-      const shouldCenter = !fullWidth || this.isHorizontalLayout && hasBothButtons;
-      return <View row={this.isHorizontalLayout} center={shouldCenter} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
-          {this.isHorizontalLayout ? this.renderHorizontalLayout() : this.renderVerticalLayout()}
-        </View>;
-    }
-  }
-}
+    const shouldFlex = isHorizontal && !!button || fullWidth && isSecondaryOnly;
+    const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
+    return <Button key="secondary" outline={isHorizontal} link={!isHorizontal} flex={shouldFlex} size={Button.sizes.large} testID={testID ? `${testID}.secondaryButton` : undefined} {...secondaryButton} style={isHorizontal ? [styles.shadow, {
+      backgroundColor: bgColor
+    }] : undefined} enableShadow={false} />;
+  };
+  const children = isHorizontal ? [renderSecondaryButton(), renderPrimaryButton()] : [renderPrimaryButton(), renderSecondaryButton()];
+  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
+      {children}
+    </ScreenFooter>;
+};
+FloatingButton.displayName = 'FloatingButton';
+FloatingButton.floatingButtonLayouts = FloatingButtonLayouts;
 const styles = StyleSheet.create({
-  container: {
-    // ...StyleSheet.absoluteFillObject, // TODO: this is breaking scenarios where the FloatingButton is inside a KeyboardTrackingView
-    top: undefined,
-    zIndex: 99
-  },
-  image: {
-    ...StyleSheet.absoluteFillObject,
-    width: '100%',
-    height: '100%'
-  },
   shadow: {
     ...Shadows.sh20.bottom
-  },
-  horizontalSecondaryMargin: {
-    marginTop: Spacings.s4,
-    marginBottom: Spacings.s7,
-    marginLeft: Spacings.s5
   }
 });
 export default asBaseComponent(FloatingButton);

package/src/components/screenFooter/index.js

@@ -26,7 +26,8 @@ const ScreenFooter = props => {
     visible = true,
     animationDuration = 200,
     shadow = ScreenFooterShadow.SH20,
-    hideDivider = false
+    hideDivider = false,
+    contentContainerStyle: contentContainerStyleOverride
   } = props;
   const keyboard = useAnimatedKeyboard();
   const [height, setHeight] = useState(0);
@@ -112,13 +113,15 @@ const ScreenFooter = props => {
     if (isSolid) {
       const shadowStyle = Shadows[shadow]?.top;
       const backgroundElevation = shadowStyle?.elevation || 0;
-      // When the background has a shadow (elevation on Android), it might render on top of the content
       style.push({
         elevation: backgroundElevation + 1
       });
     }
+    if (contentContainerStyleOverride) {
+      style.push(contentContainerStyleOverride);
+    }
     return style;
-  }, [layout, alignItems, justifyContent, insets.bottom, isSolid, shadow, isKeyboardVisible]);
+  }, [layout, alignItems, justifyContent, insets.bottom, isSolid, shadow, isKeyboardVisible, contentContainerStyleOverride]);
   const solidBackgroundStyle = useMemo(() => {
     if (!isSolid) {
       return undefined;
@@ -154,13 +157,13 @@ const ScreenFooter = props => {
         maxWidth: '100%'
       };
       return <View key={index} style={fixedStyle}>
-          {child}
-        </View>;
+            {child}
+          </View>;
     }
     if (isHorizontal && React.isValidElement(child) && itemsFit === ItemsFit.STRETCH) {
       return <View flex row centerH key={index}>
-          {child}
-        </View>;
+            {child}
+          </View>;
     }
     return child;
   }, [itemsFit, itemWidth, isHorizontal]);

package/src/components/screenFooter/screenFooter.api.json

@@ -81,6 +81,11 @@
       "type": "boolean",
       "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
       "default": "false"
+    },
+    {
+      "name": "contentContainerStyle",
+      "type": "StyleProp<ViewStyle>",
+      "description": "Custom style for the content container that wraps the footer's children. Can be used to override default padding, gap, or other layout properties."
     }
   ],
   "snippet": [
@@ -118,11 +123,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout Type",
-              "Use Case",
-              "Example"
-            ],
+            "columns": ["Layout Type", "Use Case", "Example"],
             "items": [
               {
                 "title": "Horizontal - Spread",
@@ -157,11 +158,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout Type",
-              "Use Case",
-              "Example"
-            ],
+            "columns": ["Layout Type", "Use Case", "Example"],
             "items": [
               {
                 "title": "Vertical - Fit",
@@ -187,11 +184,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Background Type",
-              "Visual",
-              "When to Use"
-            ],
+            "columns": ["Background Type", "Visual", "When to Use"],
             "items": [
               {
                 "title": "Solid",
@@ -226,11 +219,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Behavior",
-              "Description",
-              "Example"
-            ],
+            "columns": ["Behavior", "Description", "Example"],
             "items": [
               {
                 "title": "Sticky",
@@ -259,4 +248,3 @@
     ]
   }
 }
-

package/src/components/screenFooter/types.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { DimensionValue } from 'react-native';
+import { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 export declare enum ScreenFooterLayouts {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"
@@ -97,4 +97,9 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Only applies when backgroundType is 'solid'
      */
     hideDivider?: boolean;
+    /**
+     * Custom style for the content container that wraps the footer's children.
+     * Can be used to override default padding, gap, or other layout properties.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
 }

package/src/components/textField/TextField.driver.new.js

@@ -9,6 +9,10 @@ import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
 export const TextFieldDriver = (props, options) => {
   const driver = usePressableDriver(useComponentDriver(props, options));
+  const inputDriver = useComponentDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.input`
+  }, options);
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`
@@ -41,30 +45,31 @@ export const TextFieldDriver = (props, options) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.clearButton.container`
   });
+  const getInputElement = () => inputDriver.queryElement() ?? driver.getElement();
   const getValue = () => {
-    return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
+    return getInputElement().props.value ?? getInputElement().props.defaultValue;
   };
   const changeText = text => {
-    fireEvent.changeText(driver.getElement(), text);
+    fireEvent.changeText(getInputElement(), text);
   };
   const focus = () => {
-    fireEvent(driver.getElement(), 'focus');
+    fireEvent(getInputElement(), 'focus');
   };
   const blur = () => {
-    fireEvent(driver.getElement(), 'blur');
+    fireEvent(getInputElement(), 'blur');
   };
   const isEnabled = () => {
-    return !driver.getElement().props.accessibilityState?.disabled;
+    return !getInputElement().props.accessibilityState?.disabled;
   };
   const getPlaceholder = () => {
     const exists = () => {
-      const hasPlaceholder = !!driver.getElement().props.placeholder;
+      const hasPlaceholder = !!getInputElement().props.placeholder;
       const hasText = !!getValue();
       return hasPlaceholder && (!hasText || hasText && floatingPlaceholderDriver.exists());
     };
     const getText = () => {
       if (exists()) {
-        return driver.getElement().props.placeholder;
+        return getInputElement().props.placeholder;
       }
     };
     return {

package/src/components/textField/index.js

@@ -78,6 +78,8 @@ const TextField = props => {
     readonly = false,
     showMandatoryIndication,
     clearButtonStyle,
+    testID,
+    accessibilityLabel: accessibilityLabelProp,
     ...others
   } = usePreset(props);
   const {
@@ -135,11 +137,31 @@ const TextField = props => {
   const hasValue = fieldState.value !== undefined; // NOTE: not pressable if centered without a value (so can't center placeholder)
   const inputStyle = useMemo(() => [typographyStyle, colorStyle, others.style, hasValue && centeredTextStyle], [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]);
   const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]);
+  const defaultAccessibilityLabel = useMemo(() => {
+    const parts = [];
+    if (label) {
+      parts.push(label);
+    }
+    if (context.isMandatory) {
+      parts.push('required');
+    }
+    parts.push('textField');
+    if (helperText) {
+      parts.push(helperText);
+    } else if (placeholder) {
+      parts.push(placeholder);
+    }
+    if (showCharCounter && others.maxLength) {
+      parts.push(`you can enter up to ${others.maxLength} characters`);
+    }
+    return parts.join(', ');
+  }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]);
+  const accessibilityLabel = accessibilityLabelProp ?? defaultAccessibilityLabel;
   return <FieldContext.Provider value={context}>
-      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} testID={testID} accessible accessibilityLabel={accessibilityLabel} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <View row spread style={centeredContainerStyle}>
-          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${props.testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
-          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${props.testID}.validationMessage`} />}
+          <Label label={label} labelColor={labelColor} labelStyle={_labelStyle} labelProps={labelProps} floatingPlaceholder={floatingPlaceholder} validationMessagePosition={validationMessagePosition} testID={`${testID}.label`} showMandatoryIndication={showMandatoryIndication} enableErrors={enableErrors} />
+          {validationMessagePosition === ValidationMessagePosition.TOP && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace && retainTopMessageSpace} testID={`${testID}.validationMessage`} />}
           {topTrailingAccessory && <View>{topTrailingAccessory}</View>}
         </View>
         <View style={[paddings, fieldStyle]} row centerV centerH={centered}>
@@ -158,26 +180,26 @@ const TextField = props => {
               {Constants.isAndroid && centered && <Text marginR-s1 style={dummyPlaceholderStyle}>
                   {placeholder}
                 </Text>}
-              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
+              {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input hitSlop={{
             top: 20,
             bottom: 20
-          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
+          }} placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} testID={`${testID}.input`} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>
         <View row spread center={centered}>
           <View flex={!centered} flexG={centered} marginR-s4={showCharCounter}>
-            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${props.testID}.validationMessage`} />}
-            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${props.testID}.helperText`}>
+            {validationMessagePosition === ValidationMessagePosition.BOTTOM && <ValidationMessage enableErrors={enableErrors} validate={others.validate} validationMessage={others.validationMessage} validationIcon={validationIcon} validationMessageStyle={_validationMessageStyle} retainValidationSpace={retainValidationSpace} testID={`${testID}.validationMessage`} />}
+            {helperText && <Text $textNeutralHeavy subtext marginT-s1 testID={`${testID}.helperText`}>
                 {helperText}
               </Text>}
             {bottomAccessory}
           </View>
           <View>
-            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`} />}
+            {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${testID}.charCounter`} />}
           </View>
         </View>
       </View>