react-native-ui-lib 8.4.0-snapshot.7832 → 8.4.0-snapshot.7841

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.0-snapshot.7832",
+  "version": "8.4.0-snapshot.7841",
   "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,83 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import { Constants, asBaseComponent } from "../../commons/new";
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
 import { Colors, Shadows, Spacings } from "../../style";
-import View from "../view";
-import Image from "../image";
 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();
+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 isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+  const footerContentContainerStyle = useMemo(() => {
+    if (bottomMargin !== undefined) {
+      return {
+        paddingBottom: bottomMargin
+      };
     }
-  }
-  getAnimatedStyle = () => {
+    const isSecondaryAtBottom = !!secondaryButton && (isSecondaryOnly || !isHorizontal);
     return {
-      opacity: this.visibleAnimated,
-      transform: [{
-        translateY: this.visibleAnimated.interpolate({
-          inputRange: [0, 1],
-          outputRange: [Constants.screenHeight / 2, 0]
-        })
-      }]
+      paddingBottom: isSecondaryAtBottom ? Spacings.s7 : Spacings.s8
     };
-  };
-  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 shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
-      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
-    }
+  }, [bottomMargin, secondaryButton, isSecondaryOnly, isHorizontal]);
+  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;
-    }
-    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 renderSecondaryButton = () => {
+    if (!secondaryButton) {
+      return null;
     }
-  }
-}
+    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/slider/Thumb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, ViewProps, View as RNView, Animated } from 'react-native';
+import { ViewStyle, ViewProps, View as RNView } from 'react-native';
 export interface ThumbProps extends ViewProps {
     /**
      * The thumb style
@@ -27,10 +27,6 @@ export interface ThumbProps extends ViewProps {
     disabled?: boolean;
     /** ref to thumb component */
     ref?: React.RefObject<RNView>;
-    /**
-     * External scale animation value (used by useRelativeDrag)
-     */
-    scaleAnimation?: Animated.Value;
 }
 declare const Thumb: React.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & React.RefAttributes<unknown>>;
 export default Thumb;

package/src/components/slider/Thumb.js

@@ -18,7 +18,6 @@ const Thumb = forwardRef((props, ref) => {
     thumbHitSlop,
     onTouchStart,
     onTouchEnd,
-    scaleAnimation,
     ...others
   } = props;
   const thumbRef = useCombinedRefs(ref);
@@ -83,7 +82,7 @@ const Thumb = forwardRef((props, ref) => {
     backgroundColor: disabled ? DEFAULT_COLOR : thumbTintColor || ACTIVE_COLOR
   }, {
     transform: [{
-      scale: scaleAnimation ?? thumbScaleAnimation.current
+      scale: thumbScaleAnimation.current
     }]
   }]} />;
 });

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

@@ -23,7 +23,6 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("./Thumb").T
     disableRTL?: boolean | undefined;
     accessible?: boolean | undefined;
     testID?: string | undefined;
-    useRelativeDrag?: boolean | undefined;
     migrate?: boolean | undefined;
     enableThumbShadow?: boolean | undefined;
     disabledThumbTintColor?: string | undefined;

package/src/components/slider/index.js

@@ -1,5 +1,4 @@
 import _isFunction from "lodash/isFunction";
-import _clamp from "lodash/clamp";
 import React, { PureComponent } from 'react';
 import { StyleSheet, PanResponder, AccessibilityInfo, Animated } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
@@ -56,8 +55,6 @@ class Slider extends PureComponent {
     width: THUMB_SIZE,
     height: THUMB_SIZE
   };
-  _containerDragInitialValue = 0;
-  _containerThumbScale = new Animated.Value(1);
   constructor(props) {
     super(props);
     this.activeThumbRef = this.thumb;
@@ -88,15 +85,6 @@ class Slider extends PureComponent {
       onPanResponderEnd: () => true,
       onPanResponderTerminationRequest: () => false
     });
-    this.containerPanResponder = PanResponder.create({
-      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
-      onPanResponderGrant: this.handleContainerGrant,
-      onPanResponderMove: this.handleContainerMove,
-      onPanResponderRelease: this.handleContainerEnd,
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderEnd: () => true,
-      onPanResponderTerminationRequest: () => false
-    });
   }
   reset() {
     // NOTE: used with ref
@@ -215,41 +203,6 @@ class Slider extends PureComponent {
     this.bounceToStep();
     this.onSeekEnd();
   };
-  handleContainerGrant = () => {
-    this._containerDragInitialValue = this.getValueForX(this._x);
-    this.animateContainerThumbScale(1.5);
-    this.onSeekStart();
-  };
-  handleContainerMove = (_e, gestureState) => {
-    if (this.props.disabled) {
-      return;
-    }
-    const {
-      minimumValue,
-      maximumValue
-    } = this.props;
-    const range = this.getRange();
-    const containerWidth = this.state.containerSize.width;
-    const dx = gestureState.dx * (Constants.isRTL && !this.disableRTL ? -1 : 1);
-    const deltaValue = dx / containerWidth * range;
-    const newValue = _clamp(this._containerDragInitialValue + deltaValue, minimumValue, maximumValue);
-    const newX = this.getXForValue(newValue);
-    this.set_x(newX);
-    this.moveTo(newX);
-    this.updateValue(newX);
-  };
-  handleContainerEnd = () => {
-    this.bounceToStep();
-    this.animateContainerThumbScale(1);
-    this.onSeekEnd();
-  };
-  animateContainerThumbScale = toValue => {
-    Animated.timing(this._containerThumbScale, {
-      toValue,
-      duration: 100,
-      useNativeDriver: true
-    }).start();
-  };
 
   /* Actions */
 
@@ -510,9 +463,6 @@ class Slider extends PureComponent {
   onThumbLayout = nativeEvent => {
     this.handleMeasure('thumbSize', nativeEvent);
   };
-  handleContainerShouldSetResponder = () => {
-    return !this.props.disabled;
-  };
   handleTrackPress = event => {
     if (this.props.disabled) {
       return;
@@ -586,8 +536,7 @@ class Slider extends PureComponent {
       disableActiveStyling,
       disabled,
       thumbTintColor,
-      thumbHitSlop,
-      useRelativeDrag
+      thumbHitSlop
     } = this.props;
     const {
       thumbSize
@@ -607,23 +556,16 @@ class Slider extends PureComponent {
       activeThumbStyle,
       disableActiveStyling,
       thumbHitSlop: thumbHitSlop ?? calculatedHitSlop,
-      onLayout: this.onThumbLayout,
-      scaleAnimation: useRelativeDrag ? this._containerThumbScale : undefined
+      onLayout: this.onThumbLayout
     };
   };
 
   /* Renders */
   renderMinThumb = () => {
-    const {
-      useRelativeDrag
-    } = this.props;
-    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={useRelativeDrag ? undefined : this.onMinTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
+    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={this.onMinTouchStart} {...this.panResponder.panHandlers} />;
   };
   renderThumb = () => {
-    const {
-      useRelativeDrag
-    } = this.props;
-    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={useRelativeDrag ? undefined : this.onTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
+    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={this.onTouchStart} {...this.panResponder.panHandlers} />;
   };
   renderTrack() {
     const {
@@ -665,18 +607,14 @@ class Slider extends PureComponent {
     const {
       containerStyle,
       testID,
-      migrate,
-      useRelativeDrag
+      migrate
     } = this.props;
     if (migrate) {
       return <IncubatorSlider {...this.props} />;
     }
-    const containerGestureProps = useRelativeDrag ? this.containerPanResponder.panHandlers : {
-      onStartShouldSetResponder: this.handleContainerShouldSetResponder,
-      onResponderRelease: this.handleTrackPress
-    };
-    return <View style={[styles.container, containerStyle]} onLayout={this.onContainerLayout} onAccessibilityAction={this.onAccessibilityAction} testID={testID} {...containerGestureProps} {...this.getAccessibilityProps()}>
+    return <View style={[styles.container, containerStyle]} onLayout={this.onContainerLayout} onAccessibilityAction={this.onAccessibilityAction} testID={testID} {...this.getAccessibilityProps()}>
         {this.renderTrack()}
+        <View style={styles.touchArea} onTouchEnd={this.handleTrackPress} />
         {this.renderRangeThumb()}
         {this.renderThumb()}
       </View>;
@@ -698,5 +636,9 @@ const styles = StyleSheet.create({
   },
   trackDisableRTL: {
     right: 0
+  },
+  touchArea: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent'
   }
 });

package/src/components/slider/slider.api.json

@@ -140,12 +140,6 @@
       "type": "string",
       "description": "The component test id"
     },
-    {
-      "name": "useRelativeDrag",
-      "type": "boolean",
-      "description": "If true, dragging anywhere on the slider moves the thumb relative to its current position instead of snapping to the touch point. Designed for single-thumb mode.",
-      "default": "false"
-    },
     {
       "name": "migrate",
       "type": "boolean",

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

@@ -97,11 +97,6 @@ export type SliderProps = Omit<ThumbProps, 'ref'> & {
      * The slider's test identifier
      */
     testID?: string;
-    /**
-     * If true, dragging anywhere on the slider moves the thumb relative to its current position
-     * instead of snapping to the touch point. Designed for single-thumb mode.
-     */
-    useRelativeDrag?: boolean;
     /**
      * Whether to use the new Slider implementation using Reanimated
      */

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>

package/src/incubator/slider/Thumb.d.ts

@@ -19,7 +19,6 @@ interface ThumbProps extends ViewProps {
     onSeekStart?: () => void;
     onSeekEnd?: () => void;
     enableShadow?: boolean;
-    isActive?: SharedValue<boolean>;
 }
 declare const Thumb: (props: ThumbProps) => React.JSX.Element;
 export default Thumb;

package/src/incubator/slider/Thumb.js

@@ -31,9 +31,7 @@ const Thumb = props => {
     stepInterpolatedValue,
     gap = 0,
     secondary,
-    enableShadow,
-    pointerEvents,
-    isActive
+    enableShadow
   } = props;
   const rtlFix = Constants.isRTL ? -1 : 1;
   const isPressed = useSharedValue(false);
@@ -42,7 +40,7 @@ const Thumb = props => {
     height: THUMB_SIZE
   });
   const lastOffset = useSharedValue(0);
-  const gesture = Gesture.Pan().hitSlop(hitSlop ?? DEFAULT_THUMB_HIT_SLOP).onBegin(() => {
+  const gesture = Gesture.Pan().onBegin(() => {
     onSeekStart?.();
     isPressed.value = true;
     lastOffset.value = offset.value;
@@ -66,16 +64,15 @@ const Thumb = props => {
       offset.value = Math.round(offset.value / stepInterpolatedValue.value) * stepInterpolatedValue.value;
     }
   });
-  gesture.enabled(!disabled && pointerEvents !== 'none');
+  gesture.enabled(!disabled);
   const animatedStyle = useAnimatedStyle(() => {
-    const active = isPressed.value || isActive?.value;
-    const customStyle = active ? activeStyle?.value : defaultStyle?.value;
+    const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
       ...customStyle,
       transform: [{
         translateX: (offset.value - thumbSize.value.width / 2) * rtlFix
       }, {
-        scale: withSpring(!disableActiveStyling && active ? 1.3 : 1)
+        scale: withSpring(!disableActiveStyling && isPressed.value ? 1.3 : 1)
       }]
     };
   });
@@ -89,7 +86,7 @@ const Thumb = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return <GestureDetector gesture={gesture}>
-      <View reanimated pointerEvents={pointerEvents} style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]} hitSlop={hitSlop} onLayout={onThumbLayout} />
+      <View reanimated style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]} hitSlop={hitSlop} onLayout={onThumbLayout} />
     </GestureDetector>;
 };
 const styles = StyleSheet.create({

package/src/incubator/slider/index.d.ts

@@ -126,11 +126,6 @@ export interface SliderProps extends AccessibilityProps {
      * Whether to use the new Slider implementation using Reanimated
      */
     migrate?: boolean;
-    /**
-     * If true, dragging anywhere on the slider moves the thumb relative to its current position
-     * instead of snapping to the touch point. Designed for single-thumb mode.
-     */
-    useRelativeDrag?: boolean;
     /**
      * Control the throttle time of the onValueChange and onRangeChange callbacks
      */

package/src/incubator/slider/index.js

@@ -2,14 +2,13 @@ import _throttle from "lodash/throttle";
 import React, { useImperativeHandle, useCallback, useMemo, useEffect, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming } from 'react-native-reanimated';
-import { GestureHandlerRootView, GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { forwardRef, Constants } from "../../commons/new";
 import { extractAccessibilityProps } from "../../commons/modifiers";
 import { Colors, Spacings } from "../../style";
 import { StyleUtils } from "../../utils";
 import { useThemeProps, useDidUpdate } from "../../hooks";
 import { validateValues, getOffsetForValue, getValueForOffset, getStepInterpolated } from "./SliderPresenter";
-import View from "../../components/view";
 import Thumb from "./Thumb";
 import Track from "./Track";
 var ThumbType = /*#__PURE__*/function (ThumbType) {
@@ -55,7 +54,6 @@ const Slider = React.memo(props => {
     accessible = true,
     testID,
     enableThumbShadow = true,
-    useRelativeDrag,
     throttleTime = 200
   } = themeProps;
   const accessibilityProps = useMemo(() => {
@@ -217,36 +215,6 @@ const Slider = React.memo(props => {
       runOnJS(onSeekEnd)();
     }
   };
-  const containerDragStartOffset = useSharedValue(0);
-  const isContainerDragging = useSharedValue(false);
-  const clampOffset = offset => {
-    'worklet';
-
-    return Math.max(0, Math.min(trackSize.value.width, offset));
-  };
-  const snapToStep = () => {
-    'worklet';
-
-    if (shouldBounceToStep) {
-      const step = stepInterpolatedValue.value;
-      defaultThumbOffset.value = Math.round(defaultThumbOffset.value / step) * step;
-    }
-  };
-  const containerGesture = Gesture.Pan().onBegin(() => {
-    containerDragStartOffset.value = defaultThumbOffset.value;
-    isContainerDragging.value = true;
-    _onSeekStart();
-  }).onUpdate(e => {
-    if (trackSize.value.width === 0) {
-      return;
-    }
-    const dx = e.translationX * (shouldDisableRTL ? 1 : rtlFix);
-    defaultThumbOffset.value = clampOffset(containerDragStartOffset.value + dx);
-  }).onEnd(() => _onSeekEnd()).onFinalize(() => {
-    isContainerDragging.value = false;
-    snapToStep();
-  });
-  containerGesture.enabled(!disabled && !!useRelativeDrag);
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {
@@ -268,22 +236,15 @@ const Slider = React.memo(props => {
 
   /** renders */
   const renderThumb = type => {
-    return <Thumb start={type === ThumbType.DEFAULT ? start : defaultThumbOffset} end={type === ThumbType.DEFAULT ? rangeThumbOffset : end} offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset} gap={rangeGap} secondary={type !== ThumbType.DEFAULT} onSeekStart={_onSeekStart} onSeekEnd={_onSeekEnd} shouldDisableRTL={shouldDisableRTL} disabled={disabled} pointerEvents={useRelativeDrag ? 'none' : undefined} isActive={useRelativeDrag ? isContainerDragging : undefined} disableActiveStyling={disableActiveStyling} defaultStyle={_thumbStyle} activeStyle={_activeThumbStyle} hitSlop={thumbHitSlop} shouldBounceToStep={shouldBounceToStep} stepInterpolatedValue={stepInterpolatedValue} enableShadow={enableThumbShadow} />;
+    return <Thumb start={type === ThumbType.DEFAULT ? start : defaultThumbOffset} end={type === ThumbType.DEFAULT ? rangeThumbOffset : end} offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset} gap={rangeGap} secondary={type !== ThumbType.DEFAULT} onSeekStart={_onSeekStart} onSeekEnd={_onSeekEnd} shouldDisableRTL={shouldDisableRTL} disabled={disabled} disableActiveStyling={disableActiveStyling} defaultStyle={_thumbStyle} activeStyle={_activeThumbStyle} hitSlop={thumbHitSlop} shouldBounceToStep={shouldBounceToStep} stepInterpolatedValue={stepInterpolatedValue} enableShadow={enableThumbShadow} />;
   };
   const _renderTrack = () => {
-    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={useRelativeDrag ? undefined : onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
+    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
   };
-  const renderSliderContent = () => <>
+  return <GestureHandlerRootView style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]} testID={testID} {...accessibilityProps}>
       {_renderTrack()}
       {renderThumb(ThumbType.DEFAULT)}
       {useRange && renderThumb(ThumbType.RANGE)}
-    </>;
-  return <GestureHandlerRootView style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]} testID={testID} {...accessibilityProps}>
-      {useRelativeDrag ? <GestureDetector gesture={containerGesture}>
-          <View style={styles.gestureContainer}>
-            {renderSliderContent()}
-          </View>
-        </GestureDetector> : renderSliderContent()}
     </GestureHandlerRootView>;
 });
 Slider.displayName = 'Incubator.Slider';
@@ -293,10 +254,6 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE + SHADOW_RADIUS,
     justifyContent: 'center'
   },
-  gestureContainer: {
-    flex: 1,
-    justifyContent: 'center'
-  },
   disableRTL: {
     transform: [{
       scaleX: -1