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

package/src/components/screenFooter/types.js

@@ -0,0 +1,39 @@
+export let ScreenFooterLayouts = /*#__PURE__*/function (ScreenFooterLayouts) {
+  ScreenFooterLayouts["HORIZONTAL"] = "horizontal";
+  ScreenFooterLayouts["VERTICAL"] = "vertical";
+  return ScreenFooterLayouts;
+}({});
+export let ScreenFooterBackgrounds = /*#__PURE__*/function (ScreenFooterBackgrounds) {
+  ScreenFooterBackgrounds["FADING"] = "fading";
+  ScreenFooterBackgrounds["SOLID"] = "solid";
+  ScreenFooterBackgrounds["TRANSPARENT"] = "transparent";
+  return ScreenFooterBackgrounds;
+}({});
+export let FooterAlignment = /*#__PURE__*/function (FooterAlignment) {
+  FooterAlignment["START"] = "start";
+  FooterAlignment["CENTER"] = "center";
+  FooterAlignment["END"] = "end";
+  return FooterAlignment;
+}({});
+export let HorizontalItemsDistribution = /*#__PURE__*/function (HorizontalItemsDistribution) {
+  HorizontalItemsDistribution["STACK"] = "stack";
+  HorizontalItemsDistribution["SPREAD"] = "spread";
+  return HorizontalItemsDistribution;
+}({});
+export let ItemsFit = /*#__PURE__*/function (ItemsFit) {
+  ItemsFit["FIT"] = "fit";
+  ItemsFit["STRETCH"] = "stretch";
+  ItemsFit["FIXED"] = "fixed";
+  return ItemsFit;
+}({});
+export let KeyboardBehavior = /*#__PURE__*/function (KeyboardBehavior) {
+  KeyboardBehavior["STICKY"] = "sticky";
+  KeyboardBehavior["HOISTED"] = "hoisted";
+  return KeyboardBehavior;
+}({});
+export let ScreenFooterShadow = /*#__PURE__*/function (ScreenFooterShadow) {
+  ScreenFooterShadow["SH10"] = "sh10";
+  ScreenFooterShadow["SH20"] = "sh20";
+  ScreenFooterShadow["SH30"] = "sh30";
+  return ScreenFooterShadow;
+}({});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, ViewProps, View as RNView } from 'react-native';
+import { ViewStyle, ViewProps, View as RNView, Animated } from 'react-native';
 export interface ThumbProps extends ViewProps {
     /**
      * The thumb style
@@ -27,6 +27,10 @@ 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,6 +18,7 @@ const Thumb = forwardRef((props, ref) => {
     thumbHitSlop,
     onTouchStart,
     onTouchEnd,
+    scaleAnimation,
     ...others
   } = props;
   const thumbRef = useCombinedRefs(ref);
@@ -82,7 +83,7 @@ const Thumb = forwardRef((props, ref) => {
     backgroundColor: disabled ? DEFAULT_COLOR : thumbTintColor || ACTIVE_COLOR
   }, {
     transform: [{
-      scale: thumbScaleAnimation.current
+      scale: scaleAnimation ?? thumbScaleAnimation.current
     }]
   }]} />;
 });

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

@@ -23,6 +23,7 @@ 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,4 +1,5 @@
 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";
@@ -55,6 +56,8 @@ 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;
@@ -85,6 +88,15 @@ 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
@@ -203,6 +215,41 @@ 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 */
 
@@ -463,6 +510,9 @@ class Slider extends PureComponent {
   onThumbLayout = nativeEvent => {
     this.handleMeasure('thumbSize', nativeEvent);
   };
+  handleContainerShouldSetResponder = () => {
+    return !this.props.disabled;
+  };
   handleTrackPress = event => {
     if (this.props.disabled) {
       return;
@@ -536,7 +586,8 @@ class Slider extends PureComponent {
       disableActiveStyling,
       disabled,
       thumbTintColor,
-      thumbHitSlop
+      thumbHitSlop,
+      useRelativeDrag
     } = this.props;
     const {
       thumbSize
@@ -556,16 +607,23 @@ class Slider extends PureComponent {
       activeThumbStyle,
       disableActiveStyling,
       thumbHitSlop: thumbHitSlop ?? calculatedHitSlop,
-      onLayout: this.onThumbLayout
+      onLayout: this.onThumbLayout,
+      scaleAnimation: useRelativeDrag ? this._containerThumbScale : undefined
     };
   };
 
   /* Renders */
   renderMinThumb = () => {
-    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={this.onMinTouchStart} {...this.panResponder.panHandlers} />;
+    const {
+      useRelativeDrag
+    } = this.props;
+    return <Thumb {...this.getThumbProps()} ref={this.minThumb} onTouchStart={useRelativeDrag ? undefined : this.onMinTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
   };
   renderThumb = () => {
-    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={this.onTouchStart} {...this.panResponder.panHandlers} />;
+    const {
+      useRelativeDrag
+    } = this.props;
+    return <Thumb {...this.getThumbProps()} ref={this.thumb} onTouchStart={useRelativeDrag ? undefined : this.onTouchStart} pointerEvents={useRelativeDrag ? 'none' : undefined} {...useRelativeDrag ? {} : this.panResponder.panHandlers} />;
   };
   renderTrack() {
     const {
@@ -607,14 +665,18 @@ class Slider extends PureComponent {
     const {
       containerStyle,
       testID,
-      migrate
+      migrate,
+      useRelativeDrag
     } = this.props;
     if (migrate) {
       return <IncubatorSlider {...this.props} />;
     }
-    return <View style={[styles.container, containerStyle]} onLayout={this.onContainerLayout} onAccessibilityAction={this.onAccessibilityAction} testID={testID} {...this.getAccessibilityProps()}>
+    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()}>
         {this.renderTrack()}
-        <View style={styles.touchArea} onTouchEnd={this.handleTrackPress} />
         {this.renderRangeThumb()}
         {this.renderThumb()}
       </View>;
@@ -636,9 +698,5 @@ const styles = StyleSheet.create({
   },
   trackDisableRTL: {
     right: 0
-  },
-  touchArea: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent'
   }
 });

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

@@ -140,6 +140,12 @@
       "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,6 +97,11 @@ 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/hooks/index.d.ts

@@ -6,6 +6,7 @@ export { default as useModifiers } from './useModifiers';
 export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';
+export { default as useScrollToHide } from './useScrollToHide';
 export { default as useScrollToItem } from './useScrollToItem';
 export { default as useScrollTo } from './useScrollTo';
 export { default as useThemeProps } from './useThemeProps';

package/src/hooks/index.js

@@ -6,6 +6,7 @@ export { default as useModifiers } from "./useModifiers";
 export { default as useOrientation } from "./useOrientation";
 export { default as useScrollEnabler } from "./useScrollEnabler";
 export { default as useScrollReached } from "./useScrollReached";
+export { default as useScrollToHide } from "./useScrollToHide";
 export { default as useScrollToItem } from "./useScrollToItem";
 export { default as useScrollTo } from "./useScrollTo";
 export { default as useThemeProps } from "./useThemeProps";

package/src/hooks/useScrollToHide/index.d.ts

@@ -0,0 +1,24 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export type ScrollToHideProps = {
+    /**
+     * The threshold (in pixels) to ignore small scroll movements before updating visibility.
+     * Defaults to 0 (immediate reaction).
+     */
+    scrollingThreshold?: number;
+};
+export type ScrollToHideResult = {
+    /**
+     * onScroll callback (should be passed to your ScrollView/FlatList onScroll prop).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Whether the footer should be visible based on scroll direction.
+     */
+    visible: boolean;
+};
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+declare const useScrollToHide: (props?: ScrollToHideProps) => ScrollToHideResult;
+export default useScrollToHide;

package/src/hooks/useScrollToHide/index.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useRef } from 'react';
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+const useScrollToHide = (props = {}) => {
+  const {
+    scrollingThreshold = 0
+  } = props;
+  const [visible, setVisible] = useState(true);
+  const prevContentOffset = useRef(0);
+  const onScroll = useCallback(event => {
+    const {
+      nativeEvent: {
+        contentOffset: {
+          y: currentOffset
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
+        }
+      }
+    } = event;
+
+    // Ignore bounces (iOS)
+    if (currentOffset < 0 || currentOffset > contentHeight - layoutHeight) {
+      return;
+    }
+    const diff = currentOffset - prevContentOffset.current;
+    if (Math.abs(diff) > scrollingThreshold) {
+      if (diff > 0 && visible) {
+        // Scrolling Down -> Hide
+        setVisible(false);
+      } else if (diff < 0 && !visible) {
+        // Scrolling Up -> Show
+        setVisible(true);
+      }
+      prevContentOffset.current = currentOffset;
+    }
+  }, [visible, scrollingThreshold]);
+  return {
+    onScroll,
+    visible
+  };
+};
+export default useScrollToHide;

package/src/incubator/expandableOverlay/index.js

@@ -33,11 +33,15 @@ const ExpandableOverlay = (props, ref) => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
-  const closeExpandable = useCallback(() => {
+  const dismissOverlay = useCallback(() => {
     setExpandableVisible(false);
     focusAccessibility();
+  }, [focusAccessibility]);
+  const closeExpandable = useCallback(() => {
+    dismissOverlay();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dismissOverlay, dialogProps?.onDismiss, modalProps?.onDismiss]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -45,7 +49,7 @@ const ExpandableOverlay = (props, ref) => {
     toggleExpandable
   }));
   const renderModal = () => {
-    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
+    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={dismissOverlay} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps} />}
         {expandableContent}
       </Modal>;

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

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

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

@@ -126,6 +126,11 @@ 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,13 +2,14 @@ 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 } from 'react-native-gesture-handler';
+import { GestureHandlerRootView, GestureDetector, Gesture } 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) {
@@ -54,6 +55,7 @@ const Slider = React.memo(props => {
     accessible = true,
     testID,
     enableThumbShadow = true,
+    useRelativeDrag,
     throttleTime = 200
   } = themeProps;
   const accessibilityProps = useMemo(() => {
@@ -215,6 +217,36 @@ 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 {
@@ -236,15 +268,22 @@ 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} 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} pointerEvents={useRelativeDrag ? 'none' : undefined} isActive={useRelativeDrag ? isContainerDragging : undefined} disableActiveStyling={disableActiveStyling} defaultStyle={_thumbStyle} activeStyle={_activeThumbStyle} hitSlop={thumbHitSlop} shouldBounceToStep={shouldBounceToStep} stepInterpolatedValue={stepInterpolatedValue} enableShadow={enableThumbShadow} />;
   };
   const _renderTrack = () => {
-    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
+    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={useRelativeDrag ? undefined : onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
   };
-  return <GestureHandlerRootView style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]} testID={testID} {...accessibilityProps}>
+  const renderSliderContent = () => <>
       {_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';
@@ -254,6 +293,10 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE + SHADOW_RADIUS,
     justifyContent: 'center'
   },
+  gestureContainer: {
+    flex: 1,
+    justifyContent: 'center'
+  },
   disableRTL: {
     transform: [{
       scaleX: -1

package/src/index.d.ts

@@ -38,6 +38,7 @@ export { default as ExpandableSection, ExpandableSectionProps } from './componen
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
 export { default as FeatureHighlight, FeatureHighlightProps } from './components/featureHighlight';
 export { default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts } from './components/floatingButton';
+export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './components/screenFooter';
 export { default as Gradient, GradientProps, GradientTypes } from './components/gradient';
 export { default as Slider } from './components/slider';
 export { default as GradientSlider } from './components/slider/GradientSlider';