From c283cc4b321f19d3f12253954e740f044d56aab6 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 22 Jan 2025 14:44:44 +0200
Subject: [PATCH 01/17] Remove old dialog

---
 .../componentScreens/ActionSheetScreen.tsx    |   2 -
 .../componentScreens/DateTimePickerScreen.tsx |   5 -
 .../IncubatorExpandableOverlayScreen.tsx      |   1 -
 src/components/actionSheet/index.tsx          |  61 +---
 .../dateTimePicker/__tests__/index.spec.tsx   |   1 -
 src/components/dateTimePicker/index.tsx       |  14 +-
 .../dialog/DialogDismissibleView.tsx          | 262 ---------------
 .../dialog/OverlayFadingBackground.tsx        |  63 ----
 src/components/dialog/dialog.api.json         |  60 ----
 src/components/dialog/index.tsx               | 301 ------------------
 .../picker/__tests__/index.spec.tsx           |   2 +-
 src/components/picker/index.tsx               |   1 -
 src/incubator/dialog/index.tsx                |   4 +-
 src/incubator/dialog/types.ts                 |  23 --
 .../__tests__/index.spec.tsx                  |   2 +-
 src/incubator/expandableOverlay/index.tsx     |  10 +-
 src/index.ts                                  |   2 +-
 17 files changed, 22 insertions(+), 792 deletions(-)
 delete mode 100644 src/components/dialog/DialogDismissibleView.tsx
 delete mode 100644 src/components/dialog/OverlayFadingBackground.tsx
 delete mode 100644 src/components/dialog/dialog.api.json
 delete mode 100644 src/components/dialog/index.tsx

diff --git a/demo/src/screens/componentScreens/ActionSheetScreen.tsx b/demo/src/screens/componentScreens/ActionSheetScreen.tsx
index 8ad4320d64..a9f2dedf8f 100644
--- a/demo/src/screens/componentScreens/ActionSheetScreen.tsx
+++ b/demo/src/screens/componentScreens/ActionSheetScreen.tsx
@@ -64,7 +64,6 @@ export default class ActionSheetScreen extends Component {
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
-          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -80,7 +79,6 @@ export default class ActionSheetScreen extends Component {
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
-          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},
diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
index 24d0b0d39e..eb2e12b0e3 100644
--- a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
+++ b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -62,7 +62,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
-            migrateDialog
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
@@ -72,7 +71,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
-            migrateDialog
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -83,14 +81,12 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             Disabled
           </Text>
           <DateTimePicker
-            migrateDialog
             containerStyle={{marginBottom: 20}}
             editable={false}
             label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
-            migrateDialog
             editable={false}
             mode={'time'}
             label={'Time'}
@@ -111,7 +107,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
-            migrateDialog
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}
diff --git a/demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx
index c57f0184cb..74261e42a1 100644
--- a/demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx
@@ -112,7 +112,6 @@ export default class TextFieldScreen extends Component {
           useDialog
           expandableContent={this.renderPickerContent()}
           dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
-          migrateDialog
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>
diff --git a/src/components/actionSheet/index.tsx b/src/components/actionSheet/index.tsx
index 155a132f90..dd5947a2e2 100644
--- a/src/components/actionSheet/index.tsx
+++ b/src/components/actionSheet/index.tsx
@@ -3,7 +3,6 @@ import React, {Component} from 'react';
 import {ActionSheetIOS, StyleSheet, StyleProp, ViewStyle, ImageProps, ImageSourcePropType} from 'react-native';
 import {Colors} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
-import Dialog, {DialogProps} from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {ButtonProps} from '../button';
@@ -11,17 +10,12 @@ import Image from '../image';
 //@ts-ignore
 import ListItem from '../listItem';
 import PanningProvider from '../panningViews/panningProvider';
-import {Dialog as IncubatorDialog, DialogProps as IncubatorDialogProps} from '../../incubator';
-import {LogService} from '../../services';
+import {Dialog, DialogProps} from '../../incubator';
 
 const VERTICAL_PADDING = 8;
 type ActionSheetOnOptionPress = (index: number) => void;
 
 type ActionSheetProps = {
-  /**
-   * Migrate to the Incubator.Dialog component
-   */
-  migrateDialog?: boolean;
   /**
    * Whether to show the action sheet or not
    */
@@ -81,11 +75,6 @@ type ActionSheetProps = {
    * Note: you will need to call onOptionPress so the option's onPress will be called
    */
   renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
-  /**
-   * @deprecated
-   * Called once the modal has been dismissed completely
-   */
-  onModalDismissed?: DialogProps['onDialogDismissed'];
   /**
    * Whether or not to handle SafeArea
    */
@@ -96,7 +85,7 @@ type ActionSheetProps = {
   dialogProps?: Omit<
     DialogProps,
     'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'
-  > | IncubatorDialogProps;
+  > | DialogProps;
   /**
    * testID for e2e tests
    */
@@ -220,42 +209,11 @@ class ActionSheet extends Component<ActionSheetProps> {
     );
   }
 
-  renderOldDialog() {
-    const {useNativeIOS, visible, onDismiss, dialogStyle, onModalDismissed, testID, useSafeArea, dialogProps} =
-      this.props;
-
-    if (Constants.isIOS && useNativeIOS) {
-      return null;
-    }
+  render() {
+    const {visible, onDismiss, dialogStyle, testID, useSafeArea, dialogProps} = this.props;
 
     return (
       <Dialog
-        bottom
-        centerH
-        width="100%"
-        panDirection={PanningProvider.Directions.DOWN}
-        {...dialogProps}
-        useSafeArea={useSafeArea}
-        testID={testID}
-        containerStyle={[styles.dialog, dialogStyle]}
-        visible={visible}
-        onDismiss={onDismiss}
-        onDialogDismissed={onModalDismissed}
-      >
-        {this.renderSheet()}
-      </Dialog>
-    );
-  }
-
-  renderNewDialog() {
-    const {visible, onDismiss, dialogStyle, onModalDismissed, testID, useSafeArea, dialogProps} = this.props;
-
-    if (onModalDismissed) {
-      LogService.deprecationWarn({component: 'ActionSheet', oldProp: 'onModalDismissed', newProp: 'onDismiss'});
-    }
-
-    return (
-      <IncubatorDialog
         bottom
         centerH
         width="100%"
@@ -268,18 +226,9 @@ class ActionSheet extends Component<ActionSheetProps> {
         onDismiss={onDismiss}
       >
         {this.renderSheet()}
-      </IncubatorDialog>
+      </Dialog>
     );
   }
-
-  render() {
-    const {migrateDialog} = this.props;
-    if (migrateDialog) {
-      return this.renderNewDialog();
-    } else {
-      return this.renderOldDialog();
-    }
-  }
 }
 
 export default asBaseComponent<ActionSheetProps>(ActionSheet);
diff --git a/src/components/dateTimePicker/__tests__/index.spec.tsx b/src/components/dateTimePicker/__tests__/index.spec.tsx
index a05ac7266b..51ab30d52c 100644
--- a/src/components/dateTimePicker/__tests__/index.spec.tsx
+++ b/src/components/dateTimePicker/__tests__/index.spec.tsx
@@ -10,7 +10,6 @@ const someDateNextHour = new Date(someDate.getTime() + 60 * 60 * 1000);
 const TestCase = (props: Partial<Omit<DateTimePickerProps, 'dialogProps'>>) => {
   const defaultProps: DateTimePickerProps = {
     value: someDate,
-    migrateDialog: true,
     testID
   };
   return <DateTimePicker {...defaultProps} {...props}/>;
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
index 71bc5d83e9..582ea71c90 100644
--- a/src/components/dateTimePicker/index.tsx
+++ b/src/components/dateTimePicker/index.tsx
@@ -15,8 +15,7 @@ import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
 import TextField, {TextFieldProps, TextFieldMethods} from '../textField';
-import type {DialogMigrationProps} from '../../incubator/dialog';
-import {DialogProps} from '../dialog';
+import type {DialogProps} from '../../incubator/dialog';
 import View from '../view';
 import Button, {ButtonProps} from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
@@ -27,8 +26,7 @@ import {LogService} from 'services';
 export type DateTimePickerMode = 'date' | 'time';
 
 export type DateTimePickerProps = OldApiProps &
-  Omit<TextFieldProps, 'value' | 'onChange'> &
-  DialogMigrationProps & {
+  Omit<TextFieldProps, 'value' | 'onChange'> & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -37,6 +35,10 @@ export type DateTimePickerProps = OldApiProps &
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -145,7 +147,6 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
-    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -192,7 +193,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         'landscape',
         'landscape-left',
         'landscape-right'
-      ] as DialogProps['supportedOrientations'],
+      ],
       ...dialogProps
     };
   }, [dialogProps, testID]);
@@ -339,7 +340,6 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined}
         useDialog
         dialogProps={_dialogProps}
-        migrateDialog={migrateDialog}
         disabled={editable === false}
         // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
         renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined}
diff --git a/src/components/dialog/DialogDismissibleView.tsx b/src/components/dialog/DialogDismissibleView.tsx
deleted file mode 100644
index a6db019395..0000000000
--- a/src/components/dialog/DialogDismissibleView.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import _ from 'lodash';
-import React, {useEffect, useRef, useCallback, useContext} from 'react';
-import {Animated, Easing, StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native';
-import {Constants} from '../../commons/new';
-import View from '../view';
-import PanningContext from '../panningViews/panningContext';
-import PanningProvider, {
-  PanningDirections,
-  PanAmountsProps,
-  PanDirectionsProps,
-  PanLocationProps
-} from '../panningViews/panningProvider';
-import PanResponderView from '../panningViews/panResponderView';
-
-const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
-
-// TODO: move this to panningContext
-interface PanContextProps {
-  isPanning: boolean;
-  dragDeltas: PanAmountsProps;
-  swipeDirections: PanDirectionsProps;
-}
-
-interface DialogDismissibleProps {
-  /**
-   * Additional styling
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The direction of the allowed pan (default is DOWN)
-   * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
-   */
-  direction?: PanningDirections;
-  /**
-   * onDismiss callback
-   */
-  onDismiss?: () => void;
-  /**
-   * The dialog`s container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Whether to show the dialog or not
-   */
-  visible?: boolean;
-}
-
-interface Props extends DialogDismissibleProps {
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-interface LocationProps {
-  left: number;
-  top: number;
-}
-
-const DEFAULT_DIRECTION = PanningProvider.Directions.DOWN;
-
-const DialogDismissibleView = (props: Props) => {
-  const {
-    direction = DEFAULT_DIRECTION,
-    visible: propsVisible,
-    containerStyle,
-    style,
-    children,
-    onDismiss = () => {}
-  } = props;
-  // @ts-expect-error
-  const {isPanning, dragDeltas, swipeDirections} = useContext<PanContextProps>(PanningContext);
-
-  const width = useRef<number>(Constants.screenWidth);
-  const height = useRef<number>(Constants.screenHeight);
-  const TOP_INSET = useRef<number>(Constants.isIphoneX ? Constants.getSafeAreaInsets().top : Constants.isIOS ? 20 : 0);
-  const BOTTOM_INSET = useRef<number>(Constants.isIphoneX ? Constants.getSafeAreaInsets().bottom : Constants.isIOS ? 20 : 0);
-  const thresholdX = useRef<number>(0);
-  const thresholdY = useRef<number>(0);
-  const dragsCounter = useRef<number>(0);
-  const containerRef = useRef<typeof View>();
-  const animatedValue = useRef<Animated.AnimatedValue>(new Animated.Value(0));
-  const mutableSwipeDirections = useRef<PanDirectionsProps>({});
-  const prevDragDeltas = useRef<PanAmountsProps>();
-  const prevSwipeDirections = useRef<PanDirectionsProps>();
-  const visible = useRef<boolean>(Boolean(propsVisible));
-
-  const getHiddenLocation = useCallback((left: number, top: number) => {
-    const result = {left: 0, top: 0};
-    switch (direction) {
-      case PanningProvider.Directions.LEFT:
-        result.left = -left - width.current;
-        break;
-      case PanningProvider.Directions.RIGHT:
-        result.left = Constants.screenWidth - left;
-        break;
-      case PanningProvider.Directions.UP:
-        result.top = -top - height.current - TOP_INSET.current;
-        break;
-      case PanningProvider.Directions.DOWN:
-      default:
-        result.top = Constants.screenHeight - top + BOTTOM_INSET.current;
-        break;
-    }
-
-    return result;
-  },
-  [direction]);
-
-  const hiddenLocation = useRef<LocationProps>(getHiddenLocation(0, 0));
-
-  const animateTo = useCallback((toValue: number, animationEndCallback?: Animated.EndCallback) => {
-    Animated.timing(animatedValue.current, {
-      toValue,
-      duration: 300,
-      easing: Easing.bezier(0.2, 0, 0.35, 1),
-      useNativeDriver: true
-    }).start(animationEndCallback);
-  }, []);
-
-  const isSwiping = useCallback(() => {
-    return !_.isUndefined(mutableSwipeDirections.current.x) || !_.isUndefined(mutableSwipeDirections.current.y);
-  }, []);
-
-  const resetSwipe = useCallback(() => {
-    dragsCounter.current = 0;
-    mutableSwipeDirections.current = {};
-  }, []);
-
-  const onDrag = useCallback(() => {
-    if (isSwiping()) {
-      if (dragsCounter.current < MAXIMUM_DRAGS_AFTER_SWIPE) {
-        dragsCounter.current += 1;
-      } else {
-        resetSwipe();
-      }
-    }
-  }, [isSwiping, resetSwipe]);
-
-  const hide = useCallback(() => {
-    // TODO: test we're not animating?
-    animateTo(0, () => {
-      visible.current = false;
-      onDismiss?.();
-    });
-  }, [animateTo, onDismiss]);
-
-  useEffect(() => {
-    if (
-      isPanning &&
-      (dragDeltas.x || dragDeltas.y) &&
-      (dragDeltas.x !== prevDragDeltas.current?.x || dragDeltas.y !== prevDragDeltas.current?.y)
-    ) {
-      onDrag();
-      prevDragDeltas.current = dragDeltas;
-    }
-  }, [isPanning, dragDeltas, onDrag, hide]);
-
-  useEffect(() => {
-    if (
-      isPanning &&
-      (swipeDirections.x || swipeDirections.y) &&
-      (swipeDirections.x !== prevSwipeDirections.current?.x || swipeDirections.y !== prevSwipeDirections.current?.y)
-    ) {
-      mutableSwipeDirections.current = swipeDirections;
-    }
-  }, [isPanning, swipeDirections, hide]);
-
-  useEffect(() => {
-    if (visible.current && !propsVisible) {
-      hide();
-    }
-  }, [propsVisible, hide]);
-
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    // DO NOT move the width\height into the measureInWindow - it causes errors with orientation change
-    const layout = event.nativeEvent.layout;
-    width.current = layout.width;
-    height.current = layout.height;
-    thresholdX.current = width.current / 2;
-    thresholdY.current = height.current / 2;
-    if (containerRef.current) {
-      // @ts-ignore TODO: can we fix this on ViewProps \ View?
-      containerRef.current.measureInWindow((x: number, y: number) => {
-        hiddenLocation.current = getHiddenLocation(x, y);
-        animateTo(1);
-      });
-    }
-  },
-  [getHiddenLocation, animateTo]);
-
-  const getAnimationStyle = useCallback(() => {
-    return {
-      transform: [
-        {
-          translateX: animatedValue.current.interpolate({
-            inputRange: [0, 1],
-            outputRange: [hiddenLocation.current.left, 0]
-          })
-        },
-        {
-          translateY: animatedValue.current.interpolate({
-            inputRange: [0, 1],
-            outputRange: [hiddenLocation.current.top, 0]
-          })
-        }
-      ]
-    };
-  }, []);
-
-  const resetToShown = useCallback((left: number, top: number, direction: PanningDirections) => {
-    const toValue =
-        //@ts-expect-error
-        [PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT].includes(direction)
-          ? 1 + left / hiddenLocation.current.left
-          : 1 + top / hiddenLocation.current.top;
-
-    animateTo(toValue);
-  },
-  [animateTo]);
-
-  const onPanLocationChanged = useCallback(({left = 0, top = 0}: PanLocationProps) => {
-    const endValue = {x: Math.round(left), y: Math.round(top)};
-    if (isSwiping()) {
-      hide();
-    } else {
-      resetSwipe();
-      if (
-        (direction === PanningProvider.Directions.LEFT && endValue.x <= -thresholdX.current) ||
-          (direction === PanningProvider.Directions.RIGHT && endValue.x >= thresholdX.current) ||
-          (direction === PanningProvider.Directions.UP && endValue.y <= -thresholdY.current) ||
-          (direction === PanningProvider.Directions.DOWN && endValue.y >= thresholdY.current)
-      ) {
-        hide();
-      } else {
-        resetToShown(left, top, direction);
-      }
-    }
-  },
-  [isSwiping, hide, resetSwipe, direction, resetToShown]);
-
-  return (
-    // @ts-ignore
-    <View ref={containerRef} style={containerStyle} onLayout={onLayout}>
-      <PanResponderView
-        // !visible.current && styles.hidden is done to fix a bug is iOS
-        style={[style, getAnimationStyle(), !visible.current && styles.hidden]}
-        isAnimated
-        onPanLocationChanged={onPanLocationChanged}
-      >
-        {children}
-      </PanResponderView>
-    </View>
-  );
-};
-
-DialogDismissibleView.displayName = 'IGNORE';
-
-export default DialogDismissibleView;
-
-const styles = StyleSheet.create({
-  hidden: {
-    opacity: 0
-  }
-});
diff --git a/src/components/dialog/OverlayFadingBackground.tsx b/src/components/dialog/OverlayFadingBackground.tsx
deleted file mode 100644
index 162d194220..0000000000
--- a/src/components/dialog/OverlayFadingBackground.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {useRef, useEffect, useCallback, useMemo} from 'react';
-import View from '../view';
-import {Animated} from 'react-native';
-
-interface Props {
-  testID?: string;
-  dialogVisibility?: boolean;
-  modalVisibility?: boolean;
-  overlayBackgroundColor?: string;
-  onFadeDone?: () => void;
-  fadeOut?: boolean;
-}
-
-const OverlayFadingBackground = ({
-  testID,
-  dialogVisibility,
-  modalVisibility,
-  overlayBackgroundColor,
-  onFadeDone: propsOnFadeDone,
-  fadeOut
-}: Props) => {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-  const isAnimating = useRef(false);
-
-  const onFadeDone = useCallback(() => {
-    isAnimating.current = false;
-    propsOnFadeDone?.();
-  }, [propsOnFadeDone]);
-
-  const animateFading = useCallback((toValue: number) => {
-    isAnimating.current = true;
-    Animated.timing(fadeAnimation, {
-      toValue,
-      duration: 400,
-      useNativeDriver: true
-    }).start(onFadeDone);
-  }, [fadeAnimation, onFadeDone]);
-
-  useEffect(() => {
-    if (!isAnimating.current && (!dialogVisibility || fadeOut)) {
-      animateFading(0);
-    }
-  }, [dialogVisibility, animateFading, fadeOut]);
-
-  useEffect(() => {
-    if (modalVisibility) {
-      animateFading(1);
-    }
-  }, [modalVisibility, animateFading]);
-
-  const style = useMemo(() => {
-    return {
-      opacity: fadeAnimation,
-      backgroundColor: overlayBackgroundColor
-    };
-  }, [overlayBackgroundColor, fadeAnimation]);
-
-  return <View testID={testID} absF animated style={style} pointerEvents="none"/>;
-};
-
-OverlayFadingBackground.displayName = 'IGNORE';
-
-export default OverlayFadingBackground;
diff --git a/src/components/dialog/dialog.api.json b/src/components/dialog/dialog.api.json
deleted file mode 100644
index dc152e41fb..0000000000
--- a/src/components/dialog/dialog.api.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "name": "Dialog",
-  "category": "overlays",
-  "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
-  "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
-  "props": [
-    {"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
-    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
-    {
-      "name": "overlayBackgroundColor",
-      "type": "string",
-      "description": "The color of the overlay background",
-      "default": "Colors.rgba(Colors.grey10, 0.6)"
-    },
-    {"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
-    {"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
-    {
-      "name": "panDirection",
-      "type": "UP | DOWN | LEFT | RIGHT",
-      "description": "The direction of the allowed pan",
-      "default": "PanningProvider.Directions.DOWN"
-    },
-    {"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
-    {
-      "name": "onDialogDismissed",
-      "type": "(props: any) => void",
-      "description": "Called once the dialog has been dismissed completely"
-    },
-    {
-      "name": "renderPannableHeader",
-      "type": "(props: any) => JSX.Element",
-      "description": "For scrollable content (the children of the dialog)",
-      "note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
-    },
-    {
-      "name": "pannableHeaderProps",
-      "type": "any",
-      "description": "The props that will be passed to the pannable header"
-    },
-    {
-      "name": "useSafeArea",
-      "type": "boolean",
-      "description": "In iOS, use safe area, in case component attached to the bottom"
-    },
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
-  ],
-  "snippet": [
-    "<Dialog", 
-    " visible={isVisible$1}",
-    " onDismiss={() => console.log('dismissed')$2}",
-    " panDirection={PanningProvider.Directions.DOWN$3}",
-    ">",
-    " <Text text60>Content</Text>$4",
-    "</Dialog>"
-  ]
-}
diff --git a/src/components/dialog/index.tsx b/src/components/dialog/index.tsx
deleted file mode 100644
index 0cfa421d8a..0000000000
--- a/src/components/dialog/index.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import _ from 'lodash';
-import React, {Component} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, type DimensionValue} from 'react-native';
-import {Colors} from '../../style';
-import {AlignmentModifiers, extractAlignmentsValues} from '../../commons/modifiers';
-import {Constants, asBaseComponent} from '../../commons/new';
-import Modal, {ModalProps} from '../modal';
-import View from '../view';
-import PanListenerView from '../panningViews/panListenerView';
-import DialogDismissibleView from './DialogDismissibleView';
-import OverlayFadingBackground from './OverlayFadingBackground';
-import PanningProvider, {PanningDirections, PanningDirectionsEnum} from '../panningViews/panningProvider';
-export {PanningDirections as DialogDirections, PanningDirectionsEnum as DialogDirectionsEnum};
-
-// TODO: KNOWN ISSUES
-// 1. iOS pressing on the background while enter animation is happening will not call onDismiss
-//    Touch events are not registered?
-// 2. SafeArea is transparent
-// 3. Check why we need the state change in DialogDismissibleView -> onLayout -> animateTo
-
-interface RNPartialProps
-  extends Pick<ModalPropsIOS, 'supportedOrientations'>,
-    Pick<AccessibilityProps, 'accessibilityLabel'> {}
-
-export interface DialogProps extends AlignmentModifiers, RNPartialProps {
-  /**
-   * Control visibility of the dialog
-   */
-  visible?: boolean;
-  /**
-   * Dismiss callback for when clicking on the background
-   */
-  onDismiss?: (props?: any) => void;
-  /**
-   * Whether or not to ignore background press
-   */
-  ignoreBackgroundPress?: boolean;
-  /**
-   * The color of the overlay background
-   */
-  overlayBackgroundColor?: string;
-  /**
-   * The dialog width (default: 90%)
-   */
-  width?: DimensionValue;
-  /**
-   * The dialog height (default: undefined)
-   */
-  height?: DimensionValue;
-  /**
-   * The direction of the allowed pan (default is DOWN).
-   * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).
-   * Pass null to remove pan.
-   */
-  panDirection?: PanningDirections;
-  /**
-   * Whether or not to handle SafeArea
-   */
-  useSafeArea?: boolean;
-  /**
-   * Called once the dialog has been dismissed completely
-   */
-  onDialogDismissed?: (props: any) => void;
-  /**
-   * If this is added only the header will be pannable;
-   * this allows for scrollable content (the children of the dialog)
-   * props are transferred to the renderPannableHeader
-   */
-  renderPannableHeader?: (props: any) => JSX.Element;
-  /**
-   * The props that will be passed to the pannable header
-   */
-  pannableHeaderProps?: any;
-  /**
-   * Additional props for the modal.
-   */
-  modalProps?: ModalProps;
-  /**
-   * The Dialog`s container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Used as a testing identifier
-   */
-  testID?: string;
-  children?: React.ReactNode;
-}
-
-interface DialogState {
-  alignments: AlignmentModifiers;
-  modalVisibility?: boolean;
-  dialogVisibility?: boolean;
-  fadeOut?: boolean;
-}
-
-const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.$backgroundInverted, 0.3);
-
-/**
- * @description: Dialog component for displaying custom content inside a popup dialog
- * @notes: Use alignment modifiers to control the dialog position
- * (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)
- * @modifiers: alignment
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true
- */
-class Dialog extends Component<DialogProps, DialogState> {
-  static displayName = 'Dialog';
-  static directions = PanningDirectionsEnum;
-
-  static defaultProps = {
-    overlayBackgroundColor: DEFAULT_OVERLAY_BACKGROUND_COLOR
-  };
-
-  private styles: any;
-
-  constructor(props: DialogProps) {
-    super(props);
-
-    this.state = {
-      alignments: extractAlignmentsValues(props),
-      modalVisibility: props.visible,
-      dialogVisibility: props.visible
-    };
-
-    this.styles = createStyles(this.props);
-    this.setAlignment();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: DialogProps) {
-    const {visible: nexVisible} = nextProps;
-    const {visible} = this.props;
-
-    if (nexVisible && !visible) {
-      this.setState({modalVisibility: true, dialogVisibility: true});
-    } else if (visible && !nexVisible) {
-      this.hideDialogView();
-    }
-  }
-
-  setAlignment() {
-    const {alignments} = this.state;
-    if (_.isEmpty(alignments)) {
-      this.styles.alignments = this.styles.centerContent;
-    } else {
-      this.styles.alignments = alignments;
-    }
-  }
-
-  // TODO: revert adding this workaround once RN fixes https://github.com/facebook/react-native/issues/29455
-  onFadeDone = () => {
-    if (!this.state.modalVisibility) {
-      setTimeout(() => {
-        // unfortunately this is needed if a modal needs to open on iOS
-        this.props.onDialogDismissed?.(this.props);
-      }, 100);
-    }
-  };
-
-  _onDismiss = () => {
-    this.setState({modalVisibility: false, fadeOut: false}, () => {
-      const props = this.props;
-      if (props.visible) {
-        props.onDismiss?.(props);
-      }
-      // Parity with iOS Modal's onDismiss
-      if (Constants.isAndroid) {
-        props.onDialogDismissed?.(props);
-      }
-    });
-  };
-
-  onDismiss = () => {
-    const fadeOut = Constants.isIOS && this.props.visible;
-
-    if (fadeOut) {
-      this.setState({fadeOut}, this._onDismiss);
-    } else {
-      this._onDismiss();
-    }
-  };
-
-  hideDialogView = () => {
-    this.setState({dialogVisibility: false});
-  };
-
-  renderPannableHeader = (directions: PanningDirections[]) => {
-    const {renderPannableHeader, pannableHeaderProps} = this.props;
-    if (renderPannableHeader) {
-      return <PanListenerView directions={directions}>{renderPannableHeader(pannableHeaderProps)}</PanListenerView>;
-    }
-  };
-
-  getContainerType = () => {
-    const {panDirection, renderPannableHeader} = this.props;
-    if (!panDirection || renderPannableHeader) {
-      return View;
-    }
-    return PanListenerView;
-  };
-
-  renderDialogView = () => {
-    const {children, panDirection = PanningProvider.Directions.DOWN, containerStyle, testID} = this.props;
-    const {dialogVisibility} = this.state;
-    const Container = this.getContainerType();
-
-    return (
-      <View testID={testID} style={[this.styles.dialogViewSize]} pointerEvents="box-none">
-        <PanningProvider>
-          <DialogDismissibleView
-            direction={panDirection}
-            visible={dialogVisibility}
-            onDismiss={this.onDismiss}
-            containerStyle={this.styles.flexType}
-            style={this.styles.flexType}
-          >
-            <Container
-              directions={[panDirection]}
-              style={[this.styles.overflow, !Constants.isWeb && this.styles.flexType, containerStyle]}
-            >
-              {this.renderPannableHeader([panDirection])}
-              {children}
-            </Container>
-          </DialogDismissibleView>
-        </PanningProvider>
-      </View>
-    );
-  };
-
-  // TODO: renderOverlay {_.invoke(this.props, 'renderOverlay')}
-  renderDialogContainer = () => {
-    const {modalVisibility, dialogVisibility, fadeOut} = this.state;
-    const {useSafeArea, bottom, overlayBackgroundColor, testID} = this.props;
-    const addBottomSafeArea = Constants.isIphoneX && useSafeArea && bottom;
-    const bottomInsets = Constants.getSafeAreaInsets().bottom - 8; // TODO: should this be here or in the input style?
-    const onFadeDone = Constants.isIOS ? this.onFadeDone : undefined;
-
-    return (
-      <View
-        useSafeArea={useSafeArea}
-        style={[this.styles.centerHorizontal, this.styles.alignments, this.styles.container]}
-        pointerEvents="box-none"
-      >
-        <OverlayFadingBackground
-          testID={`${testID}.overlayFadingBackground`}
-          modalVisibility={modalVisibility}
-          dialogVisibility={dialogVisibility}
-          overlayBackgroundColor={overlayBackgroundColor}
-          onFadeDone={onFadeDone}
-          fadeOut={fadeOut}
-        />
-        {this.renderDialogView()}
-        {addBottomSafeArea && <View style={{marginTop: bottomInsets}}/>}
-      </View>
-    );
-  };
-
-  render = () => {
-    const {modalVisibility} = this.state;
-    const {testID, supportedOrientations, accessibilityLabel, ignoreBackgroundPress, modalProps} = this.props;
-    const onBackgroundPress = !ignoreBackgroundPress ? this.hideDialogView : undefined;
-
-    return (
-      <Modal
-        testID={`${testID}.modal`}
-        transparent
-        visible={modalVisibility}
-        animationType={'none'}
-        onBackgroundPress={onBackgroundPress}
-        onRequestClose={onBackgroundPress}
-        supportedOrientations={supportedOrientations}
-        accessibilityLabel={accessibilityLabel}
-        {...modalProps}
-      >
-        {this.renderDialogContainer()}
-      </Modal>
-    );
-  };
-}
-
-function createStyles(props: DialogProps) {
-  const {width = '90%', height} = props;
-  const flexType = height ? {flex: 1} : {flex: 0};
-  return StyleSheet.create({
-    dialogViewSize: {width, height: height ?? undefined},
-    flexType,
-    container: {
-      flex: 1
-    },
-    centerHorizontal: {
-      alignItems: 'center'
-    },
-    centerContent: {
-      justifyContent: 'center'
-    },
-    overflow: {
-      overflow: 'hidden'
-    }
-  });
-}
-
-export default asBaseComponent<DialogProps, typeof Dialog>(Dialog);
diff --git a/src/components/picker/__tests__/index.spec.tsx b/src/components/picker/__tests__/index.spec.tsx
index 90cd39eeae..f91632bc97 100644
--- a/src/components/picker/__tests__/index.spec.tsx
+++ b/src/components/picker/__tests__/index.spec.tsx
@@ -159,7 +159,7 @@ describe('Picker', () => {
   });
 
   describe('Dialog', () => {
-    const dialogProps = {useDialog: true, customPickerProps: {migrateDialog: true}};
+    const dialogProps = {useDialog: true};
 
     describe('Test value', () => {
       it('Get correct value of a single item', () => {
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index a0382dbf34..5010946226 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -310,7 +310,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
           ref={pickerExpandable}
           useDialog={useDialog || useWheelPicker}
           dialogProps={DEFAULT_DIALOG_PROPS}
-          migrateDialog
           expandableContent={expandableModalContent}
           renderCustomOverlay={renderOverlay ? _renderOverlay : undefined}
           onPress={onPress}
diff --git a/src/incubator/dialog/index.tsx b/src/incubator/dialog/index.tsx
index bf64bb2856..83eab737c3 100644
--- a/src/incubator/dialog/index.tsx
+++ b/src/incubator/dialog/index.tsx
@@ -25,8 +25,8 @@ import {extractAlignmentsValues} from '../../commons/modifiers';
 import useHiddenLocation from '../hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
 import useDialogContent from './useDialogContent';
-import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps} from './types';
-export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps};
+import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
+export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps};
 
 const THRESHOLD_VELOCITY = 750;
 
diff --git a/src/incubator/dialog/types.ts b/src/incubator/dialog/types.ts
index f89127a2ce..eb039a6e65 100644
--- a/src/incubator/dialog/types.ts
+++ b/src/incubator/dialog/types.ts
@@ -1,7 +1,6 @@
 import {PropsWithChildren, ReactElement} from 'react';
 import {type DimensionValue, type StyleProp, type TextStyle, type ViewStyle} from 'react-native';
 import {AlignmentModifiers} from '../../commons/modifiers';
-import {DialogProps as DialogPropsOld} from '../../components/dialog';
 import {ButtonProps} from '../../components/button';
 import {ModalProps} from '../../components/modal';
 import {PanningDirections, PanningDirectionsEnum} from '../panView';
@@ -134,25 +133,3 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
 }
 
 export type DialogProps = PropsWithChildren<_DialogProps>;
-
-// For migration purposes
-export interface _DialogPropsOld {
-  /**
-   * The props to pass to the dialog expandable container
-   */
-  dialogProps?: DialogPropsOld;
-  migrateDialog?: false;
-}
-
-export interface _DialogPropsNew {
-  /**
-   * The props to pass to the dialog expandable container
-   */
-  dialogProps?: DialogProps;
-  /**
-   * Migrate the Dialog to DialogNew (make sure you use only new props in dialogProps)
-   */
-  migrateDialog: true;
-}
-
-export type DialogMigrationProps = _DialogPropsOld | _DialogPropsNew;
diff --git a/src/incubator/expandableOverlay/__tests__/index.spec.tsx b/src/incubator/expandableOverlay/__tests__/index.spec.tsx
index 8188b0abda..1b8074262a 100644
--- a/src/incubator/expandableOverlay/__tests__/index.spec.tsx
+++ b/src/incubator/expandableOverlay/__tests__/index.spec.tsx
@@ -17,7 +17,7 @@ const universe = 'Hello Universe';
 
 const TestCase = (props: Omit<ExpandableOverlayProps, 'testID'>) => {
   return (
-    <ExpandableOverlay migrateDialog expandableContent={<Text>{universe}</Text>} {...props} testID={testID}>
+    <ExpandableOverlay expandableContent={<Text>{universe}</Text>} {...props} testID={testID}>
       <View>
         <Text>{helloWorld}</Text>
       </View>
diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx
index 22f06452fc..bf97c02953 100644
--- a/src/incubator/expandableOverlay/index.tsx
+++ b/src/incubator/expandableOverlay/index.tsx
@@ -3,8 +3,7 @@ import {AccessibilityInfo, findNodeHandle} from 'react-native';
 import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
 import View from '../../components/view';
 import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
-import DialogOld from '../../components/dialog';
-import DialogNew, {DialogMigrationProps} from '../dialog';
+import Dialog, {DialogProps} from '../dialog';
 import {Colors} from 'style';
 
 export interface ExpandableOverlayMethods {
@@ -18,7 +17,6 @@ export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
 }
 
 export type ExpandableOverlayProps = TouchableOpacityProps &
-  DialogMigrationProps &
   PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
@@ -28,6 +26,10 @@ export type ExpandableOverlayProps = TouchableOpacityProps &
      * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
      */
     useDialog?: boolean;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
     /**
      * The props to pass to the modal expandable container
      */
@@ -57,7 +59,6 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
     useDialog,
     modalProps,
     dialogProps,
-    migrateDialog,
     showTopBar,
     topBarProps,
     renderCustomOverlay,
@@ -115,7 +116,6 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   };
 
   const renderDialog = () => {
-    const Dialog = migrateDialog ? DialogNew : DialogOld;
     return (
       <Dialog testID={`${testID}.overlay`} {...dialogProps} visible={visible} onDismiss={closeExpandable}>
         {expandableContent}
diff --git a/src/index.ts b/src/index.ts
index b8fdcec2fe..5df44c1b1b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,7 +64,7 @@ export {default as ColorSwatch, ColorSwatchProps, ColorInfo} from './components/
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';
 export {default as Dash, DashProps} from './components/dash';
 export {default as DateTimePicker, DateTimePickerProps, DateTimePickerMode} from './components/dateTimePicker';
-export {default as Dialog, DialogProps, DialogDirections, DialogDirectionsEnum} from './components/dialog';
+export {default as Dialog, DialogProps, DialogDirections, DialogDirectionsEnum} from './incubator/dialog';
 export {default as Drawer, DrawerProps, DrawerItemProps} from './components/drawer';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';

From 64da54118eae6c841ff0931ab7e13b1a83ec1c02 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 22 Jan 2025 15:09:29 +0200
Subject: [PATCH 02/17] Move Incubator.Dialog to Dialog

---
 demo/src/index.js                             |   3 -
 demo/src/screens/MenuStructure.js             |   1 -
 .../screens/componentScreens/DialogScreen.js  | 343 ------------------
 .../DialogScreen.tsx}                         |  12 +-
 .../screens/componentScreens/PickerScreen.tsx |   6 +-
 .../componentScreens/WheelPickerScreen.tsx    |   6 +-
 demo/src/screens/incubatorScreens/index.js    |   1 -
 src/components/actionSheet/index.tsx          |   2 +-
 .../colorPicker/ColorPickerDialog.tsx         |   2 +-
 src/components/dateTimePicker/index.tsx       |   2 +-
 .../dialog/Dialog.driver.new.ts               |   0
 .../dialog/DialogHeader.tsx                   |   0
 .../dialog/__tests__/index.new.spec.tsx       |   2 +-
 .../dialog/dialog.api.json                    |   2 +-
 .../dialog/dialogHeader.api.json              |   2 +-
 .../dialog/index.tsx                          |   4 +-
 src/{incubator => components}/dialog/types.ts |   2 +-
 .../dialog/useDialogContent.tsx               |   0
 src/components/picker/Picker.driver.new.ts    |   2 +-
 src/components/picker/index.tsx               |   2 +-
 .../ExpandableOverlay.driver.ts               |   2 +-
 src/incubator/expandableOverlay/index.tsx     |   2 +-
 src/incubator/index.ts                        |   1 -
 src/index.ts                                  |  10 +-
 src/testkit/index.ts                          |   2 +-
 webDemo/src/examples/Picker.tsx               |   6 +-
 26 files changed, 38 insertions(+), 379 deletions(-)
 delete mode 100644 demo/src/screens/componentScreens/DialogScreen.js
 rename demo/src/screens/{incubatorScreens/IncubatorDialogScreen.tsx => componentScreens/DialogScreen.tsx} (88%)
 rename src/{incubator => components}/dialog/Dialog.driver.new.ts (100%)
 rename src/{incubator => components}/dialog/DialogHeader.tsx (100%)
 rename src/{incubator => components}/dialog/__tests__/index.new.spec.tsx (98%)
 rename src/{incubator => components}/dialog/dialog.api.json (97%)
 rename src/{incubator => components}/dialog/dialogHeader.api.json (96%)
 rename src/{incubator => components}/dialog/index.tsx (98%)
 rename src/{incubator => components}/dialog/types.ts (97%)
 rename src/{incubator => components}/dialog/useDialogContent.tsx (100%)

diff --git a/demo/src/index.js b/demo/src/index.js
index bc0c42b433..5a4dde2499 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -251,9 +251,6 @@ module.exports = {
       get IncubatorSlider() {
         return require('./screens/incubatorScreens/IncubatorSliderScreen').default;
       },
-      get IncubatorDialog() {
-        return require('./screens/incubatorScreens/IncubatorDialogScreen').default;
-      },
       get IncubatorToast() {
         return require('./screens/incubatorScreens/IncubatorToastScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index c755c44436..60240d1662 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -194,7 +194,6 @@ export const navigationData = {
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
-      {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',
diff --git a/demo/src/screens/componentScreens/DialogScreen.js b/demo/src/screens/componentScreens/DialogScreen.js
deleted file mode 100644
index f56fbb56f7..0000000000
--- a/demo/src/screens/componentScreens/DialogScreen.js
+++ /dev/null
@@ -1,343 +0,0 @@
-import React, {Component} from 'react';
-import {FlatList, ScrollView, StyleSheet, Alert} from 'react-native';
-import {
-  Text,
-  View,
-  Button,
-  Dialog,
-  Colors,
-  PanningProvider,
-  RadioGroup,
-  RadioButton,
-  Switch,
-  Constants
-} from 'react-native-ui-lib'; // eslint-disable-line
-
-export default class DialogScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.SCROLL_TYPE = {
-      NONE: 'none',
-      VERTICAL: 'vertical',
-      HORIZONTAL: 'horizontal'
-    };
-
-    this.pannableTitle = {title: 'This is a pannable header Dialog'};
-    this.title = 'This is a Dialog';
-    this.supportedOrientations = ['portrait', 'landscape'];
-    this.colors = [
-      {value: Colors.red10, label: 'Red10'},
-      {value: Colors.red30, label: 'Red30'},
-      {value: Colors.red50, label: 'Red50'},
-      {value: Colors.red70, label: 'Red70'},
-      {value: Colors.blue10, label: 'Blue10'},
-      {value: Colors.blue30, label: 'Blue30'},
-      {value: Colors.blue50, label: 'Blue50'},
-      {value: Colors.blue70, label: 'Blue70'},
-      {value: Colors.purple10, label: 'Purple10'},
-      {value: Colors.purple30, label: 'Purple30'},
-      {value: Colors.purple50, label: 'Purple50'},
-      {value: Colors.purple70, label: 'Purple70'},
-      {value: Colors.green10, label: 'Green10'},
-      {value: Colors.green30, label: 'Green30'},
-      {value: Colors.green50, label: 'Green50'},
-      {value: Colors.green70, label: 'Green70'},
-      {value: Colors.yellow10, label: 'Yellow10'},
-      {value: Colors.yellow30, label: 'Yellow30'},
-      {value: Colors.yellow50, label: 'Yellow50'},
-      {value: Colors.yellow70, label: 'Yellow70'}
-    ];
-
-    this.state = {
-      panDirection: Dialog.directions.DOWN,
-      position: 'bottom',
-      scroll: this.SCROLL_TYPE.NONE,
-      showHeader: true,
-      isRounded: true,
-      showDialog: false,
-      ignoreBackgroundPress: false
-    };
-  }
-
-  titlePressed = ({title}) => {
-    Alert.alert('Pressed on', title);
-  };
-
-  setPanDirection = panDirection => {
-    if (panDirection !== this.state.panDirection) {
-      this.setState({panDirection});
-    }
-  };
-
-  setPosition = position => {
-    if (position !== this.state.position) {
-      this.setState({position});
-    }
-  };
-
-  setScroll = scroll => {
-    if (scroll !== this.state.scroll) {
-      this.setState({scroll});
-    }
-  };
-
-  toggleShowHeader = () => {
-    this.setState({
-      showHeader: !this.state.showHeader
-    });
-  };
-
-  toggleIsRounded = () => {
-    this.setState({
-      isRounded: !this.state.isRounded
-    });
-  };
-
-  toggleIgnoreBackgroundPress = () => {
-    this.setState({
-      ignoreBackgroundPress: !this.state.ignoreBackgroundPress
-    });
-  };
-
-  showDialog = () => {
-    this.setState({showDialog: true});
-  };
-
-  hideDialog = () => {
-    this.setState({showDialog: false});
-  };
-
-  getWarning = () => {
-    const {showHeader, scroll, panDirection} = this.state;
-    if (!showHeader && scroll !== this.SCROLL_TYPE.NONE) {
-      return (
-        <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with scrollable content</Text>
-      );
-    } else if (showHeader && panDirection !== Dialog.directions.DOWN) {
-      return <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with direction=down</Text>;
-    }
-  };
-
-  getMessage = () => {
-    const {panDirection, position, scroll} = this.state;
-
-    return `Panning direction: ${panDirection ? panDirection : 'none'}
-Position: ${position ? position : 'center'}
-Scroll: ${scroll}`;
-  };
-
-  renderPannableHeader = props => {
-    const {title} = props;
-    return (
-      <View>
-        <View margin-20>
-          <Text $textDefault>{title}</Text>
-        </View>
-        <View height={2} bg-grey70/>
-      </View>
-    );
-  };
-
-  renderPlainContent = () => {
-    return (
-      <View margin-20 right>
-        <Button text60 label="Done" link onPress={this.hideDialog}/>
-      </View>
-    );
-  };
-
-  keyExtractor = item => {
-    return item.value;
-  };
-
-  renderVerticalItem = ({item: color}) => {
-    return (
-      <Text $textDefault text50 margin-20 color={color.value}>
-        {color.label}
-      </Text>
-    );
-  };
-
-  renderVerticalScroll = () => {
-    return (
-      <FlatList
-        showsVerticalScrollIndicator={false}
-        style={styles.verticalScroll}
-        data={this.colors}
-        renderItem={this.renderVerticalItem}
-        keyExtractor={this.keyExtractor}
-      />
-    );
-  };
-
-  renderHorizontalItem = ({item: color}) => {
-    return <View flex width={100} height={1000} style={{backgroundColor: color.value}}/>;
-  };
-
-  renderHorizontalScroll = () => {
-    return (
-      <View marginT-20 pointerEvents="box-none">
-        <FlatList
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          data={this.colors}
-          renderItem={this.renderHorizontalItem}
-          keyExtractor={this.keyExtractor}
-        />
-        <View row pointerEvents="none" style={styles.horizontalTextContainer}>
-          <Text>
-            {'\u25c0'} Scroll me {'\u25b6'}
-          </Text>
-        </View>
-      </View>
-    );
-  };
-
-  renderContent = () => {
-    const {scroll, showHeader} = this.state;
-
-    let content;
-    switch (scroll) {
-      case this.SCROLL_TYPE.VERTICAL:
-        content = this.renderVerticalScroll();
-        break;
-      case this.SCROLL_TYPE.HORIZONTAL:
-        content = this.renderHorizontalScroll();
-        break;
-      case this.SCROLL_TYPE.NONE:
-      default:
-        content = this.renderPlainContent();
-        break;
-    }
-
-    const data = (
-      <View spread flex={scroll !== this.SCROLL_TYPE.NONE}>
-        <View marginT-20 marginH-20>
-          {!showHeader && <Text $textDefault text50>{this.title}</Text>}
-          <Text $textDefault marginT-20={!showHeader}>{this.getMessage()}</Text>
-          {this.getWarning()}
-        </View>
-        {content}
-      </View>
-    );
-
-    return data;
-  };
-
-  getDialogKey = height => {
-    const {position} = this.state;
-    return `dialog-key-${position}-${height}`;
-  };
-
-  renderDialog = () => {
-    const {showDialog, panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
-    const renderPannableHeader = showHeader ? this.renderPannableHeader : undefined;
-    const height = scroll !== this.SCROLL_TYPE.NONE ? '70%' : undefined;
-
-    return (
-      <Dialog
-        useSafeArea
-        key={this.getDialogKey(height)}
-        top={position === 'top'}
-        bottom={position === 'bottom'}
-        height={height}
-        panDirection={panDirection}
-        containerStyle={isRounded ? styles.roundedDialog : styles.dialog}
-        visible={showDialog}
-        onDismiss={this.hideDialog}
-        renderPannableHeader={renderPannableHeader}
-        pannableHeaderProps={this.pannableTitle}
-        supportedOrientations={this.supportedOrientations}
-        ignoreBackgroundPress={ignoreBackgroundPress}
-      >
-        {this.renderContent()}
-      </Dialog>
-    );
-  };
-
-  render() {
-    const {panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
-
-    return (
-      <ScrollView>
-        <View flex padding-12>
-          <Text $textDefault text30 marginB-20>
-            Dialog
-          </Text>
-
-          <RadioGroup marginT-20 initialValue={panDirection} onValueChange={this.setPanDirection}>
-            <Text $textDefault>Panning Direction:</Text>
-            <View row marginV-10>
-              <RadioButton value={null} label={'None'}/>
-              <RadioButton value={Dialog.directions.UP} label={'Up'} marginL-10/>
-              <RadioButton value={Dialog.directions.DOWN} label={'Down'} marginL-10/>
-              <RadioButton value={Dialog.directions.LEFT} label={'Left'} marginL-10/>
-              <RadioButton value={Dialog.directions.RIGHT} label={'Right'} marginL-10/>
-            </View>
-          </RadioGroup>
-
-          <RadioGroup marginT-20 initialValue={position} onValueChange={this.setPosition}>
-            <Text $textDefault>Position:</Text>
-            <View row marginV-10>
-              <RadioButton value={'top'} label={'Top'}/>
-              <RadioButton value={null} label={'Center'} marginL-10/>
-              <RadioButton value={'bottom'} label={'Bottom'} marginL-10/>
-            </View>
-          </RadioGroup>
-
-          <RadioGroup marginT-20 initialValue={scroll} onValueChange={this.setScroll}>
-            <Text $textDefault>Scroll:</Text>
-            <View row marginV-10>
-              <RadioButton value={this.SCROLL_TYPE.NONE} label={'None'}/>
-              <RadioButton value={this.SCROLL_TYPE.VERTICAL} label={'Vertical'} marginL-10/>
-              <RadioButton value={this.SCROLL_TYPE.HORIZONTAL} label={'Horizontal'} marginL-10/>
-            </View>
-          </RadioGroup>
-
-          <View row marginT-20 centerV>
-            <Text $textDefault>Toggle pannable header:</Text>
-            <Switch value={showHeader} onValueChange={this.toggleShowHeader} marginL-10/>
-          </View>
-
-          <View row marginT-20 centerV>
-            <Text $textDefault>Add some style:</Text>
-            <Switch value={isRounded} onValueChange={this.toggleIsRounded} marginL-10/>
-          </View>
-
-          <View row marginT-20 centerV>
-            <Text $textDefault>Ignore Background Press:</Text>
-            <Switch value={ignoreBackgroundPress} onValueChange={this.toggleIgnoreBackgroundPress} marginL-10/>
-          </View>
-
-          <Button marginT-50 label={'Show dialog'} onPress={this.showDialog}/>
-
-          {this.renderDialog()}
-        </View>
-      </ScrollView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  dialog: {
-    backgroundColor: Colors.$backgroundDefault
-  },
-  roundedDialog: {
-    backgroundColor: Colors.$backgroundDefault,
-    marginBottom: Constants.isIphoneX ? 0 : 20,
-    borderRadius: 12
-  },
-  button: {
-    margin: 5,
-    alignSelf: 'flex-start'
-  },
-  verticalScroll: {
-    marginTop: 20
-  },
-  horizontalTextContainer: {
-    alignSelf: 'center',
-    position: 'absolute',
-    top: 10
-  }
-});
diff --git a/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx b/demo/src/screens/componentScreens/DialogScreen.tsx
similarity index 88%
rename from demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx
rename to demo/src/screens/componentScreens/DialogScreen.tsx
index eb7948adab..b18f984c7d 100644
--- a/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx
+++ b/demo/src/screens/componentScreens/DialogScreen.tsx
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, Spacings, ModalProps} from 'react-native-ui-lib';
+import {View, Text, Card, Button, Dialog, DialogHeaderProps, Colors, Spacings, ModalProps} from 'react-native-ui-lib';
 
 interface Item {
   value: string;
@@ -31,10 +31,10 @@ const colors: Item[] = [
   {value: Colors.yellow70, label: 'Yellow70'}
 ];
 
-export default class IncubatorDialogScreen extends Component {
+export default class DialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
-  headerProps: Incubator.DialogHeaderProps = {title: 'Title (swipe here)'};
+  headerProps: DialogHeaderProps = {title: 'Title (swipe here)'};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
@@ -67,13 +67,13 @@ export default class IncubatorDialogScreen extends Component {
       <View bg-$backgroundNeutralLight flex padding-20>
         <Card height={100} center padding-20>
           <Text $textDefault text50>
-            IncubatorDialogScreen
+            DialogScreen
           </Text>
         </Card>
         <View flex center>
           <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Incubator.Dialog
+        <Dialog
           useSafeArea
           visible={visible}
           onDismiss={this.onDismiss}
@@ -89,7 +89,7 @@ export default class IncubatorDialogScreen extends Component {
             renderItem={this.renderVerticalItem}
             keyExtractor={this.keyExtractor}
           />
-        </Incubator.Dialog>
+        </Dialog>
       </View>
     );
   }
diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 489a23372a..0c8650691d 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -5,7 +5,7 @@ import {
   Assets,
   Colors,
   Typography,
-  Incubator,
+  Dialog,
   View,
   Text,
   Button,
@@ -130,7 +130,7 @@ export default class PickerScreen extends Component {
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
     return (
-      <Incubator.Dialog
+      <Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -145,7 +145,7 @@ export default class PickerScreen extends Component {
         headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Incubator.Dialog>
+      </Dialog>
     );
   };
 
diff --git a/demo/src/screens/componentScreens/WheelPickerScreen.tsx b/demo/src/screens/componentScreens/WheelPickerScreen.tsx
index 6b4f33b01c..8d12da940b 100644
--- a/demo/src/screens/componentScreens/WheelPickerScreen.tsx
+++ b/demo/src/screens/componentScreens/WheelPickerScreen.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
-import {View, Text, Incubator, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
+import {View, Text, Dialog, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
 
 const monthItems = _.map([
   'January',
@@ -88,7 +88,7 @@ export default () => {
       <View center marginT-40>
         <Text h3 marginB-20>Days</Text>
         <Button size={Button.sizes.small} label={'Pick Days'} onPress={onPickDaysPress}/>
-        <Incubator.Dialog
+        <Dialog
           width={'90%'}
           bottom
           visible={showDialog}
@@ -96,7 +96,7 @@ export default () => {
           headerProps={{showKnob: false, showDivider: false}}
         >
           <WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
-        </Incubator.Dialog>
+        </Dialog>
       </View>
     </View>
   );
diff --git a/demo/src/screens/incubatorScreens/index.js b/demo/src/screens/incubatorScreens/index.js
index 247080359c..a9cfa67103 100644
--- a/demo/src/screens/incubatorScreens/index.js
+++ b/demo/src/screens/incubatorScreens/index.js
@@ -1,7 +1,6 @@
 export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
-  registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
diff --git a/src/components/actionSheet/index.tsx b/src/components/actionSheet/index.tsx
index dd5947a2e2..5b1e3515c4 100644
--- a/src/components/actionSheet/index.tsx
+++ b/src/components/actionSheet/index.tsx
@@ -10,7 +10,7 @@ import Image from '../image';
 //@ts-ignore
 import ListItem from '../listItem';
 import PanningProvider from '../panningViews/panningProvider';
-import {Dialog, DialogProps} from '../../incubator';
+import Dialog, {type DialogProps} from '../dialog';
 
 const VERTICAL_PADDING = 8;
 type ActionSheetOnOptionPress = (index: number) => void;
diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
index 6b63641a5b..5eba9b19f2 100644
--- a/src/components/colorPicker/ColorPickerDialog.tsx
+++ b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -4,7 +4,7 @@ import {LayoutAnimation, StyleSheet, Keyboard, StyleProp, ViewStyle} from 'react
 import {Constants, asBaseComponent} from '../../commons/new';
 import {Colors} from '../../style';
 import {ModalProps} from '../../components/modal';
-import Dialog, {DialogProps} from '../../incubator/dialog';
+import Dialog, {DialogProps} from '../dialog';
 import {getColorValue, getValidColorString, getTextColor, BORDER_RADIUS, HSLColor} from './ColorPickerPresenter';
 import ColorPickerDialogHeader from './ColorPickerDialogHeader';
 import ColorPickerPreview from './ColorPickerPreview';
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
index 582ea71c90..9cf4109abb 100644
--- a/src/components/dateTimePicker/index.tsx
+++ b/src/components/dateTimePicker/index.tsx
@@ -15,7 +15,7 @@ import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
 import TextField, {TextFieldProps, TextFieldMethods} from '../textField';
-import type {DialogProps} from '../../incubator/dialog';
+import type {DialogProps} from '../dialog';
 import View from '../view';
 import Button, {ButtonProps} from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
diff --git a/src/incubator/dialog/Dialog.driver.new.ts b/src/components/dialog/Dialog.driver.new.ts
similarity index 100%
rename from src/incubator/dialog/Dialog.driver.new.ts
rename to src/components/dialog/Dialog.driver.new.ts
diff --git a/src/incubator/dialog/DialogHeader.tsx b/src/components/dialog/DialogHeader.tsx
similarity index 100%
rename from src/incubator/dialog/DialogHeader.tsx
rename to src/components/dialog/DialogHeader.tsx
diff --git a/src/incubator/dialog/__tests__/index.new.spec.tsx b/src/components/dialog/__tests__/index.new.spec.tsx
similarity index 98%
rename from src/incubator/dialog/__tests__/index.new.spec.tsx
rename to src/components/dialog/__tests__/index.new.spec.tsx
index 52bc002e7f..febc30d736 100644
--- a/src/incubator/dialog/__tests__/index.new.spec.tsx
+++ b/src/components/dialog/__tests__/index.new.spec.tsx
@@ -55,7 +55,7 @@ const getDriver = (Element: React.JSX.Element) => {
   return {renderTree, dialogDriver};
 };
 
-describe('Incubator.Dialog sanity checks', () => {
+describe('Dialog sanity checks', () => {
   it('Should show dialog', () => {
     const {dialogDriver} = getDriver(<TestCase1 visible/>);
     expect(dialogDriver.isVisible()).toBeTruthy();
diff --git a/src/incubator/dialog/dialog.api.json b/src/components/dialog/dialog.api.json
similarity index 97%
rename from src/incubator/dialog/dialog.api.json
rename to src/components/dialog/dialog.api.json
index 0a56b6f248..00af596eda 100644
--- a/src/incubator/dialog/dialog.api.json
+++ b/src/components/dialog/dialog.api.json
@@ -4,7 +4,7 @@
   "description": "Component for displaying custom content inside a popup dialog",
   "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
   "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
     {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
     {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
diff --git a/src/incubator/dialog/dialogHeader.api.json b/src/components/dialog/dialogHeader.api.json
similarity index 96%
rename from src/incubator/dialog/dialogHeader.api.json
rename to src/components/dialog/dialogHeader.api.json
index 47687bc3a9..9757dd7017 100644
--- a/src/incubator/dialog/dialogHeader.api.json
+++ b/src/components/dialog/dialogHeader.api.json
@@ -2,7 +2,7 @@
   "name": "Dialog.Header",
   "category": "incubator",
   "description": "Component for displaying the header of a popup dialog",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
     {"name": "title", "type": "string", "description": "Title"},
     {"name": "titleStyle", "type": "StyleProp<TextStyle>", "description": "Title text style"},
diff --git a/src/incubator/dialog/index.tsx b/src/components/dialog/index.tsx
similarity index 98%
rename from src/incubator/dialog/index.tsx
rename to src/components/dialog/index.tsx
index 83eab737c3..f046247353 100644
--- a/src/incubator/dialog/index.tsx
+++ b/src/components/dialog/index.tsx
@@ -22,7 +22,7 @@ import {asBaseComponent, Constants} from '../../commons/new';
 import View from '../../components/view';
 import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
-import useHiddenLocation from '../hooks/useHiddenLocation';
+import useHiddenLocation from '../../incubator/hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
 import useDialogContent from './useDialogContent';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
@@ -249,7 +249,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   );
 };
 
-Dialog.displayName = 'Incubator.Dialog';
+Dialog.displayName = 'Dialog';
 Dialog.directions = DialogDirectionsEnum;
 Dialog.Header = DialogHeader;
 
diff --git a/src/incubator/dialog/types.ts b/src/components/dialog/types.ts
similarity index 97%
rename from src/incubator/dialog/types.ts
rename to src/components/dialog/types.ts
index eb039a6e65..6d5fcb5c98 100644
--- a/src/incubator/dialog/types.ts
+++ b/src/components/dialog/types.ts
@@ -3,7 +3,7 @@ import {type DimensionValue, type StyleProp, type TextStyle, type ViewStyle} fro
 import {AlignmentModifiers} from '../../commons/modifiers';
 import {ButtonProps} from '../../components/button';
 import {ModalProps} from '../../components/modal';
-import {PanningDirections, PanningDirectionsEnum} from '../panView';
+import {PanningDirections, PanningDirectionsEnum} from '../../incubator/panView';
 import {TextProps} from '../../components/text';
 import {ViewProps} from '../../components/view';
 type DialogDirections = PanningDirections;
diff --git a/src/incubator/dialog/useDialogContent.tsx b/src/components/dialog/useDialogContent.tsx
similarity index 100%
rename from src/incubator/dialog/useDialogContent.tsx
rename to src/components/dialog/useDialogContent.tsx
diff --git a/src/components/picker/Picker.driver.new.ts b/src/components/picker/Picker.driver.new.ts
index c501f08b79..715f247182 100644
--- a/src/components/picker/Picker.driver.new.ts
+++ b/src/components/picker/Picker.driver.new.ts
@@ -1,7 +1,7 @@
 import {ComponentProps} from '../../testkit/new/Component.driver';
 import {TextFieldDriver} from '../textField/TextField.driver.new';
 import {ModalDriver} from '../modal/Modal.driver.new';
-import {DialogDriver} from '../../incubator/dialog/Dialog.driver.new';
+import {DialogDriver} from '../dialog/Dialog.driver.new';
 import {ButtonDriver} from '../button/Button.driver.new';
 import {ExpandableOverlayDriver} from '../../incubator/expandableOverlay/ExpandableOverlay.driver';
 
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 5010946226..3cf21536d8 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -31,7 +31,7 @@ import {
   PickerMethods,
   PickerSelectionStatusProps
 } from './types';
-import {DialogProps} from '../../incubator/dialog';
+import {DialogProps} from '../dialog';
 
 const DEFAULT_DIALOG_PROPS: DialogProps = {
   bottom: true,
diff --git a/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts b/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts
index ebcdd42e90..a231504106 100644
--- a/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts
+++ b/src/incubator/expandableOverlay/ExpandableOverlay.driver.ts
@@ -1,5 +1,5 @@
 import {ModalDriver} from '../../components/modal/Modal.driver.new';
-import {DialogDriver} from '../dialog/Dialog.driver.new';
+import {DialogDriver} from '../../components/dialog/Dialog.driver.new';
 import {type ComponentProps, useComponentDriver} from '../../testkit/new/Component.driver';
 import {usePressableDriver} from '../../testkit/new/usePressable.driver';
 
diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx
index bf97c02953..a084fd567e 100644
--- a/src/incubator/expandableOverlay/index.tsx
+++ b/src/incubator/expandableOverlay/index.tsx
@@ -3,7 +3,7 @@ import {AccessibilityInfo, findNodeHandle} from 'react-native';
 import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
 import View from '../../components/view';
 import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
-import Dialog, {DialogProps} from '../dialog';
+import Dialog, {DialogProps} from '../../components/dialog';
 import {Colors} from 'style';
 
 export interface ExpandableOverlayMethods {
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
index b230c0c8be..f7677cc6ef 100644
--- a/src/incubator/index.ts
+++ b/src/incubator/index.ts
@@ -14,7 +14,6 @@ export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
 export {default as Slider, SliderRef, SliderProps} from './slider';
-export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods} from './dialog';
 // TODO: delete exports after fully removing from private
 export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps} from '../components/chipsInput';
 export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue} from '../components/WheelPicker';
diff --git a/src/index.ts b/src/index.ts
index 5df44c1b1b..548c9fa358 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,7 +64,15 @@ export {default as ColorSwatch, ColorSwatchProps, ColorInfo} from './components/
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';
 export {default as Dash, DashProps} from './components/dash';
 export {default as DateTimePicker, DateTimePickerProps, DateTimePickerMode} from './components/dateTimePicker';
-export {default as Dialog, DialogProps, DialogDirections, DialogDirectionsEnum} from './incubator/dialog';
+export {
+  default as Dialog,
+  DialogProps,
+  DialogHeaderProps,
+  DialogStatics,
+  DialogImperativeMethods,
+  DialogDirections,
+  DialogDirectionsEnum
+} from './components/dialog';
 export {default as Drawer, DrawerProps, DrawerItemProps} from './components/drawer';
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
diff --git a/src/testkit/index.ts b/src/testkit/index.ts
index 5b0ffc28d2..b912f75fce 100644
--- a/src/testkit/index.ts
+++ b/src/testkit/index.ts
@@ -10,7 +10,7 @@ export {TextDriver} from '../components/text/Text.driver.new';
 export {TextFieldDriver} from '../components/textField/TextField.driver.new';
 export {ViewDriver} from '../components/view/View.driver.new';
 export {ModalDriver} from '../components/modal/Modal.driver.new';
-export {DialogDriver} from '../incubator/dialog/Dialog.driver.new';
+export {DialogDriver} from '../components/dialog/Dialog.driver.new';
 export {ButtonDriver} from '../components/button/Button.driver.new';
 export {ImageDriver} from '../components/image/Image.driver.new';
 export {SwitchDriver} from '../components/switch/switch.driver';
diff --git a/webDemo/src/examples/Picker.tsx b/webDemo/src/examples/Picker.tsx
index ac3fba3838..eeb0c62bb4 100644
--- a/webDemo/src/examples/Picker.tsx
+++ b/webDemo/src/examples/Picker.tsx
@@ -5,7 +5,7 @@ import {
   Colors,
   View,
   Text,
-  Incubator,
+  Dialog,
   PickerProps,
   RenderCustomModalProps,
   PanningProvider
@@ -42,7 +42,7 @@ const PickerWrapper = () => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
-      <Incubator.Dialog
+      <Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -57,7 +57,7 @@ const PickerWrapper = () => {
         headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Incubator.Dialog>
+      </Dialog>
     );
   };
 

From 7f3b7eb0f1fb1e428a803f9bb55eb80f5cb71da7 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 13:21:01 +0200
Subject: [PATCH 03/17] Remove PanGestureView

---
 src/components/index.js                       |   3 -
 .../panningViews/panGestureView.tsx           | 203 ------------------
 src/index.ts                                  |   1 -
 3 files changed, 207 deletions(-)
 delete mode 100644 src/components/panningViews/panGestureView.tsx

diff --git a/src/components/index.js b/src/components/index.js
index 78422ac93e..18f48f69ff 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -113,9 +113,6 @@ export default {
   get PanningProvider() {
     return require('./panningViews/panningProvider').default;
   },
-  get PanGestureView() {
-    return require('./panningViews/panGestureView').default;
-  },
   get PanListenerView() {
     return require('./panningViews/panListenerView').default;
   },
diff --git a/src/components/panningViews/panGestureView.tsx b/src/components/panningViews/panGestureView.tsx
deleted file mode 100644
index 17f45525bd..0000000000
--- a/src/components/panningViews/panGestureView.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, {Component} from 'react';
-import {
-  PanResponder,
-  Animated,
-  PanResponderInstance,
-  GestureResponderEvent,
-  PanResponderGestureState,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  StyleProp,
-  ViewStyle
-} from 'react-native';
-import {Constants, asBaseComponent} from '../../commons/new';
-
-export enum GestureDirections {
-  // VERTICAL
-  UP = 'up',
-  DOWN = 'down'
-}
-
-export interface PanGestureViewProps {
-  /**
-   * Additional styling
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * onDismiss callback
-   */
-  onDismiss?: () => void;
-  /**
-   * The direction of the allowed pan (default is down)
-   */
-  direction?: GestureDirections | `${GestureDirections}`;
-  children?: React.ReactNode;
-}
-
-const SWIPE_VELOCITY = 1.8;
-const SPEED = 20;
-const BOUNCINESS = 6;
-
-interface State {
-  deltaY: Animated.AnimatedValue;
-}
-
-/**
- * @description: PanGestureView component for drag and swipe gestures (supports only vertical gestures at the moment)
- */
-class PanGestureView extends Component<PanGestureViewProps, State> {
-  static displayName = 'IGNORE';
-
-  static defaultProps: Partial<PanGestureViewProps> = {
-    direction: GestureDirections.DOWN
-  };
-
-  static directions = GestureDirections;
-
-  private panResponder: PanResponderInstance;
-  private swipe?: boolean;
-  private layout?: LayoutRectangle;
-
-  constructor(props: PanGestureViewProps) {
-    super(props);
-
-    this.state = {
-      deltaY: new Animated.Value(0)
-    };
-
-    this.panResponder = PanResponder.create({
-      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
-      onPanResponderGrant: this.handlePanResponderGrant,
-      onPanResponderMove: this.handlePanResponderMove,
-      onPanResponderRelease: this.handlePanResponderEnd,
-      onPanResponderTerminate: this.handlePanResponderEnd
-    });
-  }
-
-  handleMoveShouldSetPanResponder = (_e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean => {
-    // return true if user is swiping, return false if it's a single click
-    const {dy} = gestureState;
-    return dy > 5 || dy < -5;
-  };
-  handlePanResponderGrant = () => {
-    this.swipe = false;
-  };
-  handlePanResponderMove = (_e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-    const {direction} = this.props;
-    let newValue = 0;
-
-    // VERTICAL
-    const up = direction === GestureDirections.UP;
-    const panDeltaY = gestureState.dy;
-    const panVelocityY = gestureState.vy;
-
-    if (Math.abs(panVelocityY) >= SWIPE_VELOCITY) {
-      if ((up && panVelocityY < 0) || (!up && panVelocityY > 0)) {
-        // Swipe
-        this.swipe = true;
-      }
-    } else if ((up && panDeltaY < 0) || (!up && panDeltaY > 0)) {
-      // Drag
-      newValue = panDeltaY;
-      this.animateDeltaY(Math.round(newValue));
-    }
-  };
-  handlePanResponderEnd = () => {
-    if (!this.swipe) {
-      const {direction} = this.props;
-
-      // VERTICAL
-      const up = direction === GestureDirections.UP;
-      const {deltaY} = this.state;
-      // @ts-ignore
-      const threshold = this.layout.height / 2;
-      // @ts-ignore
-      const endValue = Math.round(deltaY._value);
-
-      if ((up && endValue <= -threshold) || (!up && endValue >= threshold)) {
-        this.animateDismiss();
-      } else {
-        // back to initial position
-        this.animateDeltaY(0);
-      }
-    } else {
-      this.animateDismiss();
-    }
-  };
-
-  animateDeltaY(toValue: number) {
-    const {deltaY} = this.state;
-
-    Animated.spring(deltaY, {
-      toValue,
-      useNativeDriver: true,
-      speed: SPEED,
-      bounciness: BOUNCINESS
-    }).start();
-  }
-
-  animateDismiss() {
-    const {direction} = this.props;
-
-    // VERTICAL
-    const up = direction === GestureDirections.UP;
-    const {deltaY} = this.state;
-    // @ts-ignore
-    const newValue = up ? -this.layout.height - Constants.statusBarHeight : deltaY._value + Constants.screenHeight;
-
-    Animated.timing(deltaY, {
-      toValue: Math.round(newValue),
-      useNativeDriver: true,
-      duration: 280
-    }).start(this.onAnimatedFinished);
-  }
-
-  onAnimatedFinished = ({finished}: {finished: boolean}) => {
-    if (finished) {
-      this.onDismiss();
-    }
-  };
-
-  onDismiss = () => {
-    this.initPositions();
-    this.props.onDismiss?.();
-  };
-
-  initPositions() {
-    this.setState({
-      deltaY: new Animated.Value(0)
-    });
-  }
-
-  onLayout = (event: LayoutChangeEvent) => {
-    this.layout = event.nativeEvent.layout;
-  };
-
-  render() {
-    const {style} = this.props;
-
-    // VERTICAL
-    const {deltaY} = this.state;
-
-    return (
-      <Animated.View
-        style={[
-          style,
-          {
-            transform: [
-              {
-                translateY: deltaY
-              }
-            ]
-          }
-        ]}
-        {...this.panResponder.panHandlers}
-        onLayout={this.onLayout}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-}
-
-export default asBaseComponent<PanGestureViewProps>(PanGestureView);
diff --git a/src/index.ts b/src/index.ts
index 548c9fa358..159a9c7c06 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -107,7 +107,6 @@ export {
   PanDismissibleViewProps,
   DismissibleAnimationProps
 } from './components/panningViews/panDismissibleView';
-export {default as PanGestureView, PanGestureViewProps} from './components/panningViews/panGestureView';
 export {default as PanListenerView, PanListenerViewProps} from './components/panningViews/panListenerView';
 export {default as PanningContext} from './components/panningViews/panningContext';
 export {

From 1efe294acff5ef8e514941942be80913778667d1 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 13:34:57 +0200
Subject: [PATCH 04/17] Remove PanDismissibleView

---
 demo/src/index.js                             |   3 -
 demo/src/screens/MenuStructure.js             |   1 -
 .../componentScreens/PanDismissibleScreen.tsx | 112 -----
 demo/src/screens/componentScreens/index.js    |   1 -
 src/components/index.js                       |   3 -
 .../panningViews/panDismissibleView.tsx       | 409 ------------------
 src/index.ts                                  |   5 -
 7 files changed, 534 deletions(-)
 delete mode 100644 demo/src/screens/componentScreens/PanDismissibleScreen.tsx
 delete mode 100644 src/components/panningViews/panDismissibleView.tsx

diff --git a/demo/src/index.js b/demo/src/index.js
index 5a4dde2499..ca9b5ccf05 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -87,9 +87,6 @@ module.exports = {
       get PageControlScreen() {
         return require('./screens/componentScreens/PageControlScreen').default;
       },
-      get PanDismissibleScreen() {
-        return require('./screens/componentScreens/PanDismissibleScreen').default;
-      },
       get PanListenerScreen() {
         return require('./screens/componentScreens/PanListenerScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 60240d1662..ea2e5c392f 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -183,7 +183,6 @@ export const navigationData = {
         screen: 'unicorn.components.ProgressiveImageScreen'
       },
       {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
-      {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
       {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
       {title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'}
     ]
diff --git a/demo/src/screens/componentScreens/PanDismissibleScreen.tsx b/demo/src/screens/componentScreens/PanDismissibleScreen.tsx
deleted file mode 100644
index b4c98eb612..0000000000
--- a/demo/src/screens/componentScreens/PanDismissibleScreen.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {
-  Button,
-  View,
-  Text,
-  Switch,
-  Colors,
-  Typography,
-  PanListenerView,
-  PanningProvider,
-  PanDismissibleView
-} from 'react-native-ui-lib';
-
-const PAN_LISTENER_VIEW_HEIGHT = 100;
-
-export default class PanDismissibleScreen extends Component {
-  state = {
-    location: {left: 50, top: 50},
-    isCoupled: true,
-    key: false
-  };
-
-  switchExample = () => {
-    const {isCoupled, location} = this.state;
-    if (isCoupled) {
-      this.setState({
-        isCoupled: false,
-        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT}
-      });
-    } else {
-      this.setState({
-        isCoupled: true,
-        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT}
-      });
-    }
-  };
-
-  reset = () => {
-    this.setState({key: !this.state.key});
-  };
-
-  renderPanListener = () => {
-    return (
-      <PanListenerView style={styles.panListener}>
-        <Text style={styles.largeText}>Drag\Swipe here</Text>
-      </PanListenerView>
-    );
-  };
-
-  render() {
-    const {isCoupled, key} = this.state;
-    const panListener = this.renderPanListener();
-
-    return (
-      <View flex bg-grey80>
-        <Text style={styles.largeText}>Pan Dismissible</Text>
-        <View style={styles.container}>
-          <Switch value={isCoupled} onValueChange={this.switchExample} style={styles.switch}/>
-          <Text style={styles.smallText}>{isCoupled ? 'Coupled' : 'Uncoupled'}</Text>
-        </View>
-        <Button label="Reset" size={Button.sizes.medium} outline style={styles.button} onPress={this.reset}/>
-        <View centerH>
-          <PanningProvider>
-            {!isCoupled && panListener}
-            <PanDismissibleView
-              key={key.toString()}
-              style={[styles.panDismissible, {marginTop: isCoupled ? PAN_LISTENER_VIEW_HEIGHT : undefined}]}
-            >
-              {isCoupled && panListener}
-            </PanDismissibleView>
-          </PanningProvider>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  largeText: {
-    ...Typography.text50,
-    margin: 20
-  },
-  container: {
-    flexDirection: 'row',
-    marginBottom: 20,
-    alignSelf: 'center'
-  },
-  panDismissible: {
-    width: 250,
-    height: 250,
-    backgroundColor: Colors.blue30
-  },
-  panListener: {
-    width: '100%',
-    height: PAN_LISTENER_VIEW_HEIGHT,
-    backgroundColor: Colors.blue60,
-    justifyContent: 'center'
-  },
-  smallText: {
-    ...Typography.text70,
-    marginLeft: 20
-  },
-  switch: {
-    marginLeft: 20,
-    alignSelf: 'center'
-  },
-  button: {
-    alignSelf: 'center',
-    marginBottom: 20
-  }
-});
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 3007fb4bfd..147b983ddc 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -33,7 +33,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
-  registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
diff --git a/src/components/index.js b/src/components/index.js
index 18f48f69ff..6baa4235fa 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -116,9 +116,6 @@ export default {
   get PanListenerView() {
     return require('./panningViews/panListenerView').default;
   },
-  get PanDismissibleView() {
-    return require('./panningViews/panDismissibleView').default;
-  },
   get PanResponderView() {
     return require('./panningViews/panResponderView').default;
   },
diff --git a/src/components/panningViews/panDismissibleView.tsx b/src/components/panningViews/panDismissibleView.tsx
deleted file mode 100644
index 08371df52c..0000000000
--- a/src/components/panningViews/panDismissibleView.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-import _ from 'lodash';
-import React, {PureComponent} from 'react';
-import {Animated, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
-import {Constants} from '../../commons/new';
-import asPanViewConsumer from './asPanViewConsumer';
-import PanningProvider, {
-  PanningDirections,
-  PanAmountsProps,
-  PanDirectionsProps
-} from './panningProvider';
-
-export interface DismissibleAnimationProps {
-  /**
-   * The return animation speed (default is 20)
-   */
-  speed?: number;
-  /**
-   * The return animation bounciness (default is 6)
-   */
-  bounciness?: number;
-  /**
-   * The dismiss animation duration (default is 280)
-   */
-  duration?: number;
-}
-
-export interface PanDismissibleViewProps {
-  /**
-   * Additional styling
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The directions of the allowed pan (default allows all directions)
-   * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
-   */
-  directions?: PanningDirections[];
-  /**
-   * onDismiss callback
-   */
-  onDismiss?: () => void;
-  /**
-   * Some animation options to choose from, defaults are set for:
-   * speed - the animation speed (default is 20)
-   * bounciness - the animation bounciness (default is 6)
-   * duration - the dismiss animation duration (default is 280)
-   */
-  animationOptions?: DismissibleAnimationProps;
-  /**
-   * Override the default threshold (height/2 and width/2) with different values.
-   */
-  threshold?: PanAmountsProps;
-  /**
-   * Allow diagonal dismiss, this is false by default,
-   * since it looks better and most cases.
-   */
-  allowDiagonalDismiss?: boolean;
-  children?: React.ReactNode;
-}
-
-const DEFAULT_DIRECTIONS = [
-  PanningProvider.Directions.UP,
-  PanningProvider.Directions.DOWN,
-  PanningProvider.Directions.LEFT,
-  PanningProvider.Directions.RIGHT
-];
-const DEFAULT_SPEED = 20;
-const DEFAULT_BOUNCINESS = 6;
-const DEFAULT_DISMISS_ANIMATION_DURATION = 280;
-const DEFAULT_ANIMATION_OPTIONS = {
-  speed: DEFAULT_SPEED,
-  bounciness: DEFAULT_BOUNCINESS,
-  duration: DEFAULT_DISMISS_ANIMATION_DURATION
-};
-const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
-
-interface DismissProps {
-  isPanning: boolean;
-  dragDirections: PanDirectionsProps;
-  dragDeltas: PanAmountsProps;
-  swipeDirections: PanDirectionsProps;
-  swipeVelocities: PanAmountsProps;
-}
-
-interface Props extends PanDismissibleViewProps {
-  context: DismissProps;
-}
-
-interface State {
-  isAnimating?: boolean;
-}
-
-/**
- * @description: PanDismissibleView component created to making listening to swipe and drag events easier,
- * @notes: Has to be used as a child of a PanningProvider that also has a PanListenerView.
- *         The PanListenerView is the one that sends the drag\swipe events.
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanDismissibleView/PanDismissibleView.gif?raw=true
- */
-class PanDismissibleView extends PureComponent<Props, State> {
-  static displayName = 'IGNORE';
-
-  static defaultProps: Partial<Props> = {
-    directions: DEFAULT_DIRECTIONS,
-    animationOptions: DEFAULT_ANIMATION_OPTIONS,
-    onDismiss: _.noop,
-    allowDiagonalDismiss: false
-  };
-
-  private shouldDismissAfterReset = false;
-  private ref = React.createRef<any>();
-  private animTranslateX = new Animated.Value(0);
-  private animTranslateY = new Animated.Value(0);
-  private left = 0;
-  private top = 0;
-  private width = 0;
-  private height = 0;
-  private thresholdX = 0;
-  private thresholdY = 0;
-  private swipe: PanDirectionsProps = {};
-  private counter = 0;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      isAnimating: false
-    };
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const {isAnimating} = this.state;
-    const {isPanning, dragDeltas, swipeDirections} = this.props.context;
-    const {
-      isPanning: prevIsPanning,
-      dragDeltas: prevDragDeltas,
-      swipeDirections: prevSwipeDirections
-    } = prevProps.context;
-    if (isPanning !== prevIsPanning) {
-      if (isPanning && !isAnimating) {
-        // do not start a new pan if we're still animating
-        this.onPanStart();
-      } else {
-        this.onPanEnd();
-      }
-    }
-
-    if (
-      isPanning &&
-      (dragDeltas.x || dragDeltas.y) &&
-      (dragDeltas.x !== prevDragDeltas.x || dragDeltas.y !== prevDragDeltas.y)
-    ) {
-      this.onDrag(dragDeltas);
-    }
-
-    if (
-      isPanning &&
-      (swipeDirections.x || swipeDirections.y) &&
-      (swipeDirections.x !== prevSwipeDirections.x || swipeDirections.y !== prevSwipeDirections.y)
-    ) {
-      this.onSwipe(swipeDirections);
-    }
-  }
-
-  onLayout = (event: LayoutChangeEvent) => {
-    if (this.height === 0) {
-      const layout = event.nativeEvent.layout;
-      const {threshold} = this.props;
-      this.height = layout.height;
-      this.thresholdY = _.get(threshold, 'y', layout.height / 2);
-      this.width = layout.width;
-      this.thresholdX = _.get(threshold, 'x', layout.width / 2);
-      this.initPositions();
-    }
-  };
-
-  initPositions = (extraDataForSetState?: State, runAfterSetState?: () => void) => {
-    this.setNativeProps(0, 0);
-    this.animTranslateX = new Animated.Value(0);
-    this.animTranslateY = new Animated.Value(0);
-    this.setState({...extraDataForSetState}, runAfterSetState);
-  };
-
-  onPanStart = () => {
-    this.swipe = {};
-    this.counter = 0;
-  };
-
-  onDrag = (deltas: PanAmountsProps) => {
-    const left = deltas.x ? Math.round(deltas.x) : 0;
-    const top = deltas.y ? Math.round(deltas.y) : 0;
-    this.setNativeProps(left, top);
-    if (this.swipe.x || this.swipe.y) {
-      if (this.counter < MAXIMUM_DRAGS_AFTER_SWIPE) {
-        this.counter += 1;
-      } else {
-        this.swipe = {};
-      }
-    }
-  };
-
-  setNativeProps = (left: number, top: number) => {
-    if (this.ref.current) {
-      this.ref.current?.setNativeProps?.({style: {left, top}});
-      this.left = left;
-      this.top = top;
-    }
-  };
-
-  onSwipe = (swipeDirections: PanDirectionsProps) => {
-    this.swipe = swipeDirections;
-  };
-
-  onPanEnd = () => {
-    const {directions = DEFAULT_DIRECTIONS} = this.props;
-    if (this.swipe.x || this.swipe.y) {
-      const {isRight, isDown} = this.getDismissAnimationDirection();
-      this._animateDismiss(isRight, isDown);
-    } else {
-      const endValue = {x: Math.round(this.left), y: Math.round(this.top)};
-      if (
-        (directions.includes(PanningProvider.Directions.LEFT) && endValue.x <= -this.thresholdX) ||
-        (directions.includes(PanningProvider.Directions.RIGHT) && endValue.x >= this.thresholdX) ||
-        (directions.includes(PanningProvider.Directions.UP) && endValue.y <= -this.thresholdY) ||
-        (directions.includes(PanningProvider.Directions.DOWN) && endValue.y >= this.thresholdY)
-      ) {
-        const {isRight, isDown} = this.getDismissAnimationDirection();
-        this._animateDismiss(isRight, isDown);
-      } else {
-        this.resetPosition();
-      }
-    }
-  };
-
-  resetPosition = () => {
-    const {animationOptions} = this.props;
-    const {speed, bounciness} = animationOptions || DEFAULT_ANIMATION_OPTIONS;
-    const toX = -this.left;
-    const toY = -this.top;
-    const animations: Animated.CompositeAnimation[] = [];
-    if (!_.isUndefined(toX)) {
-      animations.push(Animated.spring(this.animTranslateX, {
-        toValue: Math.round(toX),
-        useNativeDriver: true,
-        speed,
-        bounciness
-      }));
-    }
-
-    if (!_.isUndefined(toY)) {
-      animations.push(Animated.spring(this.animTranslateY, {
-        toValue: Math.round(toY),
-        useNativeDriver: true,
-        speed,
-        bounciness
-      }));
-    }
-
-    this.setState({isAnimating: true}, () => {
-      Animated.parallel(animations).start(this.onResetPositionFinished);
-    });
-  };
-
-  onResetPositionFinished = () => {
-    const runAfterSetState = this.shouldDismissAfterReset ? this.animateDismiss : undefined;
-    this.shouldDismissAfterReset = false;
-    this.initPositions({isAnimating: false}, runAfterSetState);
-  };
-
-  getDismissAnimationDirection = () => {
-    const {allowDiagonalDismiss} = this.props;
-    const {swipeDirections, swipeVelocities, dragDirections, dragDeltas} = this.props.context;
-    const hasHorizontalSwipe = !_.isUndefined(swipeDirections.x);
-    const hasVerticalSwipe = !_.isUndefined(swipeDirections.y);
-    let isRight;
-    let isDown;
-
-    if (hasHorizontalSwipe || hasVerticalSwipe) {
-      if (!allowDiagonalDismiss && hasHorizontalSwipe && hasVerticalSwipe) {
-        // @ts-ignore
-        if (Math.abs(swipeVelocities.y) > Math.abs(swipeVelocities.x)) {
-          isDown = swipeDirections.y === PanningProvider.Directions.DOWN;
-        } else {
-          isRight = swipeDirections.x === PanningProvider.Directions.RIGHT;
-        }
-
-        return {isRight, isDown};
-      }
-
-      if (hasHorizontalSwipe) {
-        isRight = swipeDirections.x === PanningProvider.Directions.RIGHT;
-      }
-
-      if (hasVerticalSwipe) {
-        isDown = swipeDirections.y === PanningProvider.Directions.DOWN;
-      }
-    } else {
-      // got here from a drag beyond threshold
-      const hasHorizontalDrag = !_.isUndefined(dragDirections.x);
-      const hasVerticalDrag = !_.isUndefined(dragDirections.y);
-      if (!allowDiagonalDismiss && hasHorizontalDrag && hasVerticalDrag) {
-        // @ts-ignore
-        if (Math.abs(dragDeltas.y) > Math.abs(dragDeltas.x)) {
-          isDown = dragDirections.y === PanningProvider.Directions.DOWN;
-        } else {
-          isRight = dragDirections.x === PanningProvider.Directions.RIGHT;
-        }
-
-        return {isRight, isDown};
-      }
-
-      if (hasHorizontalDrag) {
-        isRight = dragDirections.x === PanningProvider.Directions.RIGHT;
-      }
-
-      if (hasVerticalDrag) {
-        isDown = dragDirections.y === PanningProvider.Directions.DOWN;
-      }
-    }
-
-    return {isRight, isDown};
-  };
-
-  // Send undefined to not animate in the horizontal\vertical direction
-  // isRight === true --> animate to the right
-  // isRight === false --> animate to the left
-  // isDown === true --> animate to the bottom
-  // isDown === false --> animate to the top
-  animateDismiss = () => {
-    const {isAnimating} = this.state;
-    if (isAnimating) {
-      this.shouldDismissAfterReset = true;
-    } else {
-      const {directions = []} = this.props;
-      const hasUp = directions.includes(PanningProvider.Directions.UP);
-      const hasRight = directions.includes(PanningProvider.Directions.RIGHT);
-      const hasLeft = directions.includes(PanningProvider.Directions.LEFT);
-      const hasDown = !hasUp && !hasLeft && !hasRight; // default
-      const verticalDismiss = hasDown ? true : hasUp ? false : undefined;
-      const horizontalDismiss = hasRight ? true : hasLeft ? false : undefined;
-      this._animateDismiss(horizontalDismiss, verticalDismiss);
-    }
-  };
-
-  _animateDismiss = (isRight?: boolean, isDown?: boolean) => {
-    const {animationOptions} = this.props;
-    const {duration} = animationOptions || DEFAULT_ANIMATION_OPTIONS;
-    const animations: Animated.CompositeAnimation[] = [];
-    let toX;
-    let toY;
-
-    if (!_.isUndefined(isRight)) {
-      const maxSize = Constants.screenWidth + this.width;
-      toX = isRight ? maxSize : -maxSize;
-    }
-
-    if (!_.isUndefined(isDown)) {
-      const maxSize = Constants.screenHeight + this.height;
-      toY = isDown ? maxSize : -maxSize;
-    }
-
-    if (!_.isUndefined(toX)) {
-      animations.push(Animated.timing(this.animTranslateX, {
-        toValue: Math.round(toX),
-        useNativeDriver: true,
-        duration
-      }));
-    }
-
-    if (!_.isUndefined(toY)) {
-      animations.push(Animated.timing(this.animTranslateY, {
-        toValue: Math.round(toY),
-        useNativeDriver: true,
-        duration
-      }));
-    }
-
-    this.setState({isAnimating: true}, () => {
-      Animated.parallel(animations).start(this.onDismissAnimationFinished);
-    });
-  };
-
-  onDismissAnimationFinished = ({finished}: {finished: boolean}) => {
-    if (finished) {
-      this.props.onDismiss?.();
-    }
-  };
-
-  render() {
-    const {style} = this.props;
-    const {isAnimating} = this.state;
-    const transform = isAnimating ? [{translateX: this.animTranslateX}, {translateY: this.animTranslateY}] : [];
-
-    return (
-      <Animated.View
-        // @ts-ignore
-        ref={this.ref}
-        style={[
-          style,
-          {
-            transform
-          }
-        ]}
-        onLayout={this.onLayout}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-}
-
-export default asPanViewConsumer<PanDismissibleViewProps>(PanDismissibleView);
diff --git a/src/index.ts b/src/index.ts
index 159a9c7c06..1041aa0841 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -102,11 +102,6 @@ export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal
 export {default as NumberInput, NumberInputProps, NumberInputData} from './components/numberInput';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as PageControl, PageControlProps} from './components/pageControl';
-export {
-  default as PanDismissibleView,
-  PanDismissibleViewProps,
-  DismissibleAnimationProps
-} from './components/panningViews/panDismissibleView';
 export {default as PanListenerView, PanListenerViewProps} from './components/panningViews/panListenerView';
 export {default as PanningContext} from './components/panningViews/panningContext';
 export {

From 8d88280a532d68b6bca96c1b369ba64e0861d1bb Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 13:51:25 +0200
Subject: [PATCH 05/17] Remove PanResponderView

---
 demo/src/index.js                             |   3 -
 demo/src/screens/MenuStructure.js             |   3 +-
 .../componentScreens/PanResponderScreen.tsx   |  99 ----------------
 demo/src/screens/componentScreens/index.js    |   1 -
 src/components/index.js                       |   3 -
 .../panningViews/panResponderView.tsx         | 108 ------------------
 src/index.ts                                  |   1 -
 7 files changed, 1 insertion(+), 217 deletions(-)
 delete mode 100644 demo/src/screens/componentScreens/PanResponderScreen.tsx
 delete mode 100644 src/components/panningViews/panResponderView.tsx

diff --git a/demo/src/index.js b/demo/src/index.js
index ca9b5ccf05..fd4b31d772 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -90,9 +90,6 @@ module.exports = {
       get PanListenerScreen() {
         return require('./screens/componentScreens/PanListenerScreen').default;
       },
-      get PanResponderScreen() {
-        return require('./screens/componentScreens/PanResponderScreen').default;
-      },
       get PickerScreen() {
         return require('./screens/componentScreens/PickerScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index ea2e5c392f..287c7277f5 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -183,8 +183,7 @@ export const navigationData = {
         screen: 'unicorn.components.ProgressiveImageScreen'
       },
       {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
-      {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},
-      {title: 'Pan Responder', tags: 'pan swipe drag responder', screen: 'unicorn.components.PanResponderScreen'}
+      {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'}
     ]
   },
   Incubator: {
diff --git a/demo/src/screens/componentScreens/PanResponderScreen.tsx b/demo/src/screens/componentScreens/PanResponderScreen.tsx
deleted file mode 100644
index 9652475354..0000000000
--- a/demo/src/screens/componentScreens/PanResponderScreen.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import _ from 'lodash';
-import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {
-  View,
-  Text,
-  Switch,
-  Colors,
-  Typography,
-  PanListenerView,
-  PanningProvider,
-  PanResponderView
-} from 'react-native-ui-lib';
-
-const PAN_LISTENER_VIEW_HEIGHT = 100;
-
-export default class PanResponderScreen extends Component {
-  state = {
-    location: {left: 50, top: 50},
-    isCoupled: false
-  };
-
-  switchExample = () => {
-    const {isCoupled, location} = this.state;
-    if (isCoupled) {
-      this.setState({
-        isCoupled: false,
-        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT}
-      });
-    } else {
-      this.setState({
-        isCoupled: true,
-        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT}
-      });
-    }
-  };
-
-  renderPanListener = () => {
-    return (
-      <PanListenerView style={styles.panListener}>
-        <Text style={styles.largeText}>Drag here</Text>
-      </PanListenerView>
-    );
-  };
-
-  render() {
-    const {isCoupled} = this.state;
-    const panListener = this.renderPanListener();
-
-    return (
-      <View flex bg-grey80>
-        <View style={styles.container}>
-          <Text style={styles.largeText}>Pan Responder</Text>
-          <Switch value={isCoupled} onValueChange={this.switchExample} style={styles.switch} />
-          <Text style={styles.smallText}>{isCoupled ? 'Coupled' : 'Uncoupled'}</Text>
-        </View>
-        <PanningProvider>
-          {!isCoupled && panListener}
-          <PanResponderView
-            style={[styles.panResponder, {marginTop: isCoupled ? PAN_LISTENER_VIEW_HEIGHT : undefined}]}
-          >
-            {isCoupled && panListener}
-          </PanResponderView>
-        </PanningProvider>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    height: 50,
-    alignItems: 'center'
-  },
-  panResponder: {
-    width: 250,
-    height: 250,
-    backgroundColor: Colors.blue30
-  },
-  panListener: {
-    width: '100%',
-    height: PAN_LISTENER_VIEW_HEIGHT,
-    backgroundColor: Colors.blue60,
-    justifyContent: 'center'
-  },
-  largeText: {
-    ...Typography.text50,
-    marginLeft: 40
-  },
-  smallText: {
-    ...Typography.text70,
-    marginLeft: 20
-  },
-  switch: {
-    marginLeft: 20,
-    alignSelf: 'center'
-  }
-});
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 147b983ddc..4a504f264e 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -34,7 +34,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
-  registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
diff --git a/src/components/index.js b/src/components/index.js
index 6baa4235fa..c54ba5fc6a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -116,9 +116,6 @@ export default {
   get PanListenerView() {
     return require('./panningViews/panListenerView').default;
   },
-  get PanResponderView() {
-    return require('./panningViews/panResponderView').default;
-  },
   get Picker() {
     return require('./picker').default;
   },
diff --git a/src/components/panningViews/panResponderView.tsx b/src/components/panningViews/panResponderView.tsx
deleted file mode 100644
index 449de94be7..0000000000
--- a/src/components/panningViews/panResponderView.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, {PureComponent} from 'react';
-import View, {ViewProps} from '../view';
-import asPanViewConsumer from './asPanViewConsumer';
-import {PanLocationProps, PanAmountsProps} from './panningProvider';
-
-export interface PanResponderViewProps extends ViewProps {
-    /**
-     * Will be called with the current location ({left, top}) when the pan has ended
-     */
-    onPanLocationChanged?: (location: PanLocationProps) => void;
-    /**
-     * Ignore panning events while this is true
-     */
-    ignorePanning?: boolean;
-    /**
-     * Allow the view to be animated (send animation via style; default is false)
-     */
-    isAnimated?: boolean;
-}
-
-interface PanResponderProps {
-  isPanning: boolean;
-  dragDeltas: PanAmountsProps;
-}
-
-interface Props extends PanResponderViewProps {
-  context: PanResponderProps;
-}
-
-/**
- * @description: panResponderView component created to making listening to swipe and drag events easier.
- * @notes: Has to be used as a child of a PanningProvider that also has a PanListenerView.
- *         The PanListenerView is the one that sends the drag\swipe events.
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanResponderScreen.tsx
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanResponderView/PanResponderView.gif?raw=true
- */
-class PanResponderView extends PureComponent<Props> {
-  static displayName = 'IGNORE';
-
-  static defaultProps = {
-    isAnimated: false
-  };
-
-  private left?: number;
-  private top?: number;
-  private initialLeft = 0;
-  private initialTop = 0;
-  private ref = React.createRef<any>();
-
-  componentDidMount() {
-    this.setNativeProps(this.initialLeft, this.initialTop);
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const {ignorePanning} = this.props;
-    const {isPanning, dragDeltas} = this.props.context;
-    const {isPanning: prevIsPanning, dragDeltas: prevDragDeltas} = prevProps.context;
-
-    if (!ignorePanning && !isPanning && prevIsPanning) {
-      this.onPanEnd();
-    }
-
-    if (
-      !ignorePanning &&
-      isPanning &&
-      (dragDeltas.x || dragDeltas.y) &&
-      (dragDeltas.x !== prevDragDeltas.x || dragDeltas.y !== prevDragDeltas.y)
-    ) {
-      this.onDrag(dragDeltas);
-    }
-  }
-
-  onPanEnd() {
-    const location: PanLocationProps = {left: this.left, top: this.top};
-    this.initialLeft = this.left || this.initialLeft;
-    this.initialTop = this.top || this.initialTop;
-    this.props.onPanLocationChanged?.(location);
-    //@ts-expect-error
-    this.props.context.onPanLocationChanged?.(location);
-  }
-
-  onDrag(deltas: PanAmountsProps) {
-    const left = this.initialLeft + (deltas.x ? Math.round(deltas.x) : 0);
-    const top = this.initialTop + (deltas.y ? Math.round(deltas.y) : 0);
-
-    this.setNativeProps(left, top);
-  }
-
-  setNativeProps(left: number, top: number) {
-    if (this.ref.current) {
-      this.ref.current?.setNativeProps?.({style: {left, top}});
-      this.left = left;
-      this.top = top;
-    }
-  }
-
-  render() {
-    const {isAnimated, ...others} = this.props;
-
-    return (
-      <View animated={isAnimated} ref={this.ref} pointerEvents={'box-none'} {...others}>
-        {this.props.children}
-      </View>
-    );
-  }
-}
-
-export default asPanViewConsumer<PanResponderViewProps>(PanResponderView);
diff --git a/src/index.ts b/src/index.ts
index 1041aa0841..ba88903e5e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -111,7 +111,6 @@ export {
   PanAmountsProps,
   PanDirectionsProps
 } from './components/panningViews/panningProvider';
-export {default as PanResponderView, PanResponderViewProps} from './components/panningViews/panResponderView';
 export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
 export {
   default as Picker,

From 06e32198a2b911bb5713ff989e3c3be611372798 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 14:48:59 +0200
Subject: [PATCH 06/17] Remove PanListenerView

---
 demo/src/index.js                             |   3 -
 demo/src/screens/MenuStructure.js             |   3 +-
 .../componentScreens/PanListenerScreen.tsx    |  63 -----
 demo/src/screens/componentScreens/index.js    |   1 -
 src/components/index.js                       |   3 -
 .../panningViews/panListenerView.tsx          | 237 ------------------
 src/index.ts                                  |   1 -
 7 files changed, 1 insertion(+), 310 deletions(-)
 delete mode 100644 demo/src/screens/componentScreens/PanListenerScreen.tsx
 delete mode 100644 src/components/panningViews/panListenerView.tsx

diff --git a/demo/src/index.js b/demo/src/index.js
index fd4b31d772..215c2b60d7 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -87,9 +87,6 @@ module.exports = {
       get PageControlScreen() {
         return require('./screens/componentScreens/PageControlScreen').default;
       },
-      get PanListenerScreen() {
-        return require('./screens/componentScreens/PanListenerScreen').default;
-      },
       get PickerScreen() {
         return require('./screens/componentScreens/PickerScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 287c7277f5..eaddc0d42f 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -182,8 +182,7 @@ export const navigationData = {
         tags: 'progressive image cover overlay',
         screen: 'unicorn.components.ProgressiveImageScreen'
       },
-      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
-      {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'}
+      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'}
     ]
   },
   Incubator: {
diff --git a/demo/src/screens/componentScreens/PanListenerScreen.tsx b/demo/src/screens/componentScreens/PanListenerScreen.tsx
deleted file mode 100644
index b6d071a713..0000000000
--- a/demo/src/screens/componentScreens/PanListenerScreen.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {Component} from 'react';
-import {View, Text, PanListenerView, PanDirectionsProps, PanAmountsProps} from 'react-native-ui-lib';
-
-export default class PanListenerScreen extends Component {
-  state = {
-    locationText: '',
-    endType: ''
-  };
-
-  onDrag = ({directions}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => {
-    this.setState({locationText: `Dragged: ${directions.x}, ${directions.y}`});
-  };
-
-  onSwipe = ({directions}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => {
-    this.setState({locationText: `Swiped: ${directions.x}, ${directions.y}`});
-  };
-
-  onPanStart = () => {
-    this.setState({endType: 'Panning'});
-  };
-
-  onPanRelease = () => {
-    this.setState({endType: 'Released'});
-  };
-
-  onPanTerminated = () => {
-    this.setState({endType: 'Terminated'});
-  };
-
-  render() {
-    const {locationText, endType} = this.state;
-
-    return (
-      <View flex bg-grey80>
-        <Text text50 margin-40>
-          Pan Listener
-        </Text>
-        <PanListenerView
-          bg-grey70
-          centerV
-          height={300}
-          width="100%"
-          //   directions={[PanningProvider.Directions.UP, PanningProvider.Directions.DOWN]}
-          onDrag={this.onDrag}
-          onSwipe={this.onSwipe}
-          onPanStart={this.onPanStart}
-          onPanRelease={this.onPanRelease}
-          onPanTerminated={this.onPanTerminated}
-        >
-          <Text text50 margin-40>
-            Drag\swipe here
-          </Text>
-        </PanListenerView>
-        <Text text50 margin-40>
-          {locationText}
-        </Text>
-        <Text text50 margin-40>
-          {endType}
-        </Text>
-      </View>
-    );
-  }
-}
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 4a504f264e..ae48f3eb5c 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -33,7 +33,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
-  registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
diff --git a/src/components/index.js b/src/components/index.js
index c54ba5fc6a..95da2559d2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -113,9 +113,6 @@ export default {
   get PanningProvider() {
     return require('./panningViews/panningProvider').default;
   },
-  get PanListenerView() {
-    return require('./panningViews/panListenerView').default;
-  },
   get Picker() {
     return require('./picker').default;
   },
diff --git a/src/components/panningViews/panListenerView.tsx b/src/components/panningViews/panListenerView.tsx
deleted file mode 100644
index 8de0548a0f..0000000000
--- a/src/components/panningViews/panListenerView.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import _ from 'lodash';
-import React, {PureComponent} from 'react';
-import {
-  PanResponder,
-  PanResponderInstance,
-  GestureResponderEvent,
-  PanResponderGestureState
-} from 'react-native';
-import asPanViewConsumer from './asPanViewConsumer';
-import PanningProvider, {
-  PanningDirections,
-  PanDirectionsProps,
-  PanAmountsProps
-} from './panningProvider';
-import View, {ViewProps} from '../view';
-
-interface PanningProps {
-    /**
-     * This is were you will get notified when a drag occurs
-     * onDrag = ({directions, deltas}) => {...}
-     * directions - array of directions
-     * deltas - array of deltas (same length and order as directions)
-     * Both arrays will have {x, y} - if no x or y drag has occurred this value will be undefined
-     */
-    onDrag?: ({directions, deltas}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => void;
-    /**
-     * This is were you will get notified when a swipe occurs
-     * onSwipe = ({directions, velocities}) => {...}
-     * directions - array of directions
-     * velocities - array of velocities (same length and order as directions)
-     * Both arrays will have {x, y} - if no x or y swipe has occurred this value will be undefined
-     */
-    onSwipe?: ({directions, velocities}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => void;
-    /**
-     * This is were you will get notified when the pan starts
-     */
-    onPanStart?: () => void;
-    /**
-     * This is were you will get notified when the pan ends
-     * The user has released all touches while this view is the responder.
-     * This typically means a gesture has succeeded
-     */
-    onPanRelease?: () => void;
-    /**
-     * This is were you will get notified when the pan ends
-     * Another component has become the responder,
-     * so this gesture should be cancelled
-     */
-    onPanTerminated?: () => void;
-}
-
-export interface PanListenerViewProps extends PanningProps, ViewProps {
-    /**
-     * The directions of the allowed pan (default allows all directions)
-     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
-     */
-    directions?: PanningDirections[];
-    /**
-     * The sensitivity beyond which a pan is no longer considered a single click (default is 5)
-     */
-    panSensitivity?: number;
-    /**
-     * The sensitivity beyond which a pan is no longer considered a drag, but a swipe (default is 1.8)
-     * Note: a pan would have to occur (i.e. the panSensitivity has already been surpassed)
-     */
-    swipeVelocitySensitivity?: number;
-    /**
-     * Is there a view that is clickable (has onPress etc.) in the PanListenerView.
-     * This can affect the panability of this component.
-     */
-    isClickable?: boolean;
-}
-
-interface Props extends PanListenerViewProps {
-  context?: PanningProps;
-}
-
-interface PanningResultProps {
-  selectedDirections: PanDirectionsProps;
-  selectedAmounts: PanAmountsProps;
-}
-
-const DEFAULT_DIRECTIONS = [
-  PanningProvider.Directions.UP,
-  PanningProvider.Directions.DOWN,
-  PanningProvider.Directions.LEFT,
-  PanningProvider.Directions.RIGHT
-];
-const DEFAULT_PAN_SENSITIVITY = 5;
-const DEFAULT_SWIPE_VELOCITY = 1.8;
-
-/**
- * @description: PanListenerView component created to making listening to swipe and drag events easier
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanListenerScreen.tsx
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanListenerView/PanListenerView.gif?raw=true
- */
-class PanListenerView extends PureComponent<Props> {
-  static displayName = 'IGNORE';
-  
-  public static defaultProps: Partial<Props> = {
-    directions: DEFAULT_DIRECTIONS,
-    panSensitivity: DEFAULT_PAN_SENSITIVITY,
-    swipeVelocitySensitivity: DEFAULT_SWIPE_VELOCITY
-  };
-
-  private panResponder: PanResponderInstance;
-
-  constructor(props: PanListenerViewProps) {
-    super(props);
-
-    const {isClickable} = props;
-    this.panResponder = PanResponder.create({
-      onStartShouldSetPanResponder: isClickable ? this.shouldPan : this.yes,
-      onMoveShouldSetPanResponder: this.shouldPan,
-      onStartShouldSetPanResponderCapture: this.no,
-      onMoveShouldSetPanResponderCapture: this.no,
-      onPanResponderGrant: this.handlePanStart,
-      onPanResponderMove: this.handlePanMove,
-      onPanResponderRelease: this.handlePanRelease,
-      onPanResponderTerminate: this.handlePanTerminate
-    });
-  }
-
-  yes = () => {
-    return true;
-  };
-
-  no = () => {
-    return false;
-  };
-
-  shouldPan = (_e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean => {
-    // return true if user is swiping, return false if it's a single click
-    const {dy, dx} = gestureState;
-    const {directions, panSensitivity = DEFAULT_PAN_SENSITIVITY} = this.props;
-
-    return Boolean(
-      directions &&
-      ((directions.includes(PanningProvider.Directions.UP) && dy < -panSensitivity) ||
-        (directions.includes(PanningProvider.Directions.DOWN) && dy > panSensitivity) ||
-        (directions.includes(PanningProvider.Directions.LEFT) && dx < -panSensitivity) ||
-        (directions.includes(PanningProvider.Directions.RIGHT) && dx > panSensitivity))
-    );
-  };
-
-  handlePanStart = () => {
-    this.props.onPanStart?.();
-    this.props.context?.onPanStart?.();
-  };
-
-  getSwipeDirection = ({vx, vy}: ({vx: number, vy: number})): PanningResultProps => {
-    const {swipeVelocitySensitivity = DEFAULT_SWIPE_VELOCITY} = this.props;
-    return this.getDirectionsOverSensitivity(vx, vy, swipeVelocitySensitivity);
-  };
-
-  getDragDirection = ({dx, dy}: ({dx: number, dy: number})): PanningResultProps => {
-    return this.getDirectionsOverSensitivity(dx, dy, 0);
-  };
-
-  getDirectionsOverSensitivity = (x: number, y: number, sensitivity: number): PanningResultProps => {
-    const {directions = DEFAULT_DIRECTIONS} = this.props;
-    const selectedDirections: PanDirectionsProps = {};
-    const selectedAmounts: PanAmountsProps = {};
-
-    if (directions.includes(PanningProvider.Directions.LEFT) && x < -sensitivity) {
-      selectedDirections.x = PanningProvider.Directions.LEFT;
-      selectedAmounts.x = x;
-    } else if (directions.includes(PanningProvider.Directions.RIGHT) && x > sensitivity) {
-      selectedDirections.x = PanningProvider.Directions.RIGHT;
-      selectedAmounts.x = x;
-    }
-
-    if (directions.includes(PanningProvider.Directions.UP) && y < -sensitivity) {
-      selectedDirections.y = PanningProvider.Directions.UP;
-      selectedAmounts.y = y;
-    } else if (directions.includes(PanningProvider.Directions.DOWN) && y > sensitivity) {
-      selectedDirections.y = PanningProvider.Directions.DOWN;
-      selectedAmounts.y = y;
-    }
-
-    return {selectedDirections, selectedAmounts};
-  };
-
-  panResultHasValue = (panResult?: PanningResultProps): boolean => {
-    return Boolean(panResult && (panResult.selectedDirections.x || panResult.selectedDirections.y));
-  };
-
-  handlePanMove = (_e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-    const {onSwipe, onDrag, context} = this.props;
-    const hasSwipe = !_.isUndefined(onSwipe);
-    const hasDrag = !_.isUndefined(onDrag);
-    const hasContext = !_.isUndefined(context);
-    let panResult;
-    if (hasSwipe || hasContext) {
-      panResult = this.getSwipeDirection(gestureState);
-    }
-
-    if (this.panResultHasValue(panResult)) {
-      // @ts-ignore
-      const data = {directions: panResult.selectedDirections, velocities: panResult.selectedAmounts};
-      this.props.onSwipe?.(data);
-      context?.onSwipe?.(data);
-    } else if (hasDrag || hasContext) {
-      panResult = this.getDragDirection(gestureState);
-      if (this.panResultHasValue(panResult)) {
-        const data = {directions: panResult.selectedDirections, deltas: panResult.selectedAmounts};
-        this.props.onDrag?.(data);
-        context?.onDrag?.(data);
-  
-      }
-    }
-  };
-
-  handlePanRelease = () => {
-    this.props.onPanRelease?.();
-    this.props.context?.onPanRelease?.();
-
-  };
-
-  handlePanTerminate = () => {
-    this.props.onPanTerminated?.();
-    this.props.context?.onPanTerminated?.();
-
-  };
-
-  render() {
-    const {children, ...others} = this.props;
-
-    return (
-      <View {...others} {...this.panResponder.panHandlers}>
-        {children}
-      </View>
-    );
-  }
-}
-
-export default asPanViewConsumer<PanListenerViewProps>(PanListenerView);
diff --git a/src/index.ts b/src/index.ts
index ba88903e5e..9f6584229c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -102,7 +102,6 @@ export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal
 export {default as NumberInput, NumberInputProps, NumberInputData} from './components/numberInput';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as PageControl, PageControlProps} from './components/pageControl';
-export {default as PanListenerView, PanListenerViewProps} from './components/panningViews/panListenerView';
 export {default as PanningContext} from './components/panningViews/panningContext';
 export {
   default as PanningProvider,

From 79da1a1b3216dea85a289208d50817f1ca247e2b Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 15:03:46 +0200
Subject: [PATCH 07/17] Remove PanningProvider

---
 .../screens/componentScreens/PickerScreen.tsx |   3 +-
 .../snippets/snippets.code-snippets           |   2 +-
 src/components/actionSheet/index.tsx          |   3 +-
 src/components/dialog/dialog.api.json         |   2 +-
 src/components/index.js                       |   3 -
 .../panningViews/panningProvider.tsx          | 118 ------------------
 src/index.ts                                  |   7 --
 webDemo/src/examples/Picker.tsx               |   5 +-
 8 files changed, 6 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/panningViews/panningProvider.tsx

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 0c8650691d..e8b293169d 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -12,7 +12,6 @@ import {
   Icon,
   Avatar,
   Picker,
-  PanningProvider,
   PickerProps,
   RenderCustomModalProps,
   PickerMethods,
@@ -141,7 +140,7 @@ export default class PickerScreen extends Component {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        direction={PanningProvider.Directions.DOWN}
+        direction={Dialog.directions.DOWN}
         headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
diff --git a/extensions/rnuilib-snippets/snippets/snippets.code-snippets b/extensions/rnuilib-snippets/snippets/snippets.code-snippets
index 019ff9a2e4..c2e366ca1c 100644
--- a/extensions/rnuilib-snippets/snippets/snippets.code-snippets
+++ b/extensions/rnuilib-snippets/snippets/snippets.code-snippets
@@ -309,7 +309,7 @@
       "<Dialog",
       "  visible={isVisible$1}",
       "  onDismiss={() => console.log('dismissed')$2}",
-      "  panDirection={PanningProvider.Directions.DOWN$3}",
+      "  panDirection={Dialog.directions.DOWN$3}",
       ">",
       "  <Text text60>Content</Text>$4",
       "</Dialog>"
diff --git a/src/components/actionSheet/index.tsx b/src/components/actionSheet/index.tsx
index 5b1e3515c4..283d0779e0 100644
--- a/src/components/actionSheet/index.tsx
+++ b/src/components/actionSheet/index.tsx
@@ -9,7 +9,6 @@ import {ButtonProps} from '../button';
 import Image from '../image';
 //@ts-ignore
 import ListItem from '../listItem';
-import PanningProvider from '../panningViews/panningProvider';
 import Dialog, {type DialogProps} from '../dialog';
 
 const VERTICAL_PADDING = 8;
@@ -217,7 +216,7 @@ class ActionSheet extends Component<ActionSheetProps> {
         bottom
         centerH
         width="100%"
-        direction={PanningProvider.Directions.DOWN}
+        direction={Dialog.directions.DOWN}
         {...dialogProps}
         useSafeArea={useSafeArea}
         testID={testID}
diff --git a/src/components/dialog/dialog.api.json b/src/components/dialog/dialog.api.json
index 00af596eda..819e0b4d26 100644
--- a/src/components/dialog/dialog.api.json
+++ b/src/components/dialog/dialog.api.json
@@ -46,7 +46,7 @@
     "<Dialog",
     "  visible={isVisible$1}",
     "  onDismiss={() => console.log('dismissed')$2}",
-    "  panDirection={PanningProvider.Directions.DOWN$3}",
+    "  direction={Dialog.directions.DOWN$3}",
     ">",
     "  <Text text60>Content</Text>$4",
     "</Dialog>"
diff --git a/src/components/index.js b/src/components/index.js
index 95da2559d2..3b0ecb02d8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -110,9 +110,6 @@ export default {
   get PageControl() {
     return require('./pageControl').default;
   },
-  get PanningProvider() {
-    return require('./panningViews/panningProvider').default;
-  },
   get Picker() {
     return require('./picker').default;
   },
diff --git a/src/components/panningViews/panningProvider.tsx b/src/components/panningViews/panningProvider.tsx
deleted file mode 100644
index af51d7cc11..0000000000
--- a/src/components/panningViews/panningProvider.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, {Component} from 'react';
-import PanningContext from './panningContext';
-
-export enum PanningDirectionsEnum {
-  UP = 'up',
-  DOWN = 'down',
-  LEFT = 'left',
-  RIGHT = 'right'
-}
-
-export type PanningDirectionsUnion = `${PanningDirectionsEnum}`;
-
-export type PanningDirections = PanningDirectionsEnum | PanningDirectionsUnion;
-
-export interface PanLocationProps {
-  left?: number;
-  top?: number;
-}
-
-export interface PanDirectionsProps {
-  x?: PanningDirections;
-  y?: PanningDirections;
-}
-
-export interface PanAmountsProps {
-  x?: number;
-  y?: number;
-}
-
-interface State {
-  isPanning: boolean;
-  wasTerminated: boolean;
-  dragDirections: PanDirectionsProps;
-  dragDeltas: PanAmountsProps;
-  swipeDirections: PanDirectionsProps;
-  swipeVelocities: PanAmountsProps;
-  panLocation: PanLocationProps;
-}
-
-/**
- * @description: Wraps the panResponderView and panListenerView to provide a shared context
- */
-export default class PanningProvider extends Component<any, State> {
-  static displayName = 'IGNORE';
-  static Directions = PanningDirectionsEnum;
-
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      isPanning: false,
-      wasTerminated: false,
-      dragDirections: {},
-      dragDeltas: {},
-      swipeDirections: {},
-      swipeVelocities: {},
-      panLocation: {}
-    };
-  }
-
-  getProviderContextValue = () => {
-    const {
-      isPanning,
-      wasTerminated,
-      dragDirections,
-      dragDeltas,
-      swipeDirections,
-      swipeVelocities,
-      panLocation
-    } = this.state;
-
-    return {
-      onPanStart: this.onPanStart,
-      onPanRelease: this.onPanRelease,
-      onPanTerminated: this.onPanTerminated,
-      isPanning,
-      wasTerminated,
-      onDrag: this.onDrag,
-      dragDirections,
-      dragDeltas,
-      onSwipe: this.onSwipe,
-      swipeDirections,
-      swipeVelocities,
-      onPanLocationChanged: this.onPanLocationChanged,
-      panLocation
-    };
-  };
-
-  onPanStart = () => {
-    this.setState({isPanning: true, wasTerminated: false});
-  };
-
-  onPanRelease = () => {
-    this.setState({isPanning: false});
-  };
-
-  onPanTerminated = () => {
-    this.setState({isPanning: false, wasTerminated: true});
-  };
-
-  onDrag = ({directions, deltas}: {directions: PanDirectionsProps, deltas: PanAmountsProps}) => {
-    this.setState({dragDirections: directions, dragDeltas: deltas, swipeDirections: {}, swipeVelocities: {}});
-  };
-
-  onSwipe = ({directions, velocities}: {directions: PanDirectionsProps, velocities: PanAmountsProps}) => {
-    this.setState({swipeDirections: directions, swipeVelocities: velocities, dragDirections: {}, dragDeltas: {}});
-  };
-
-  onPanLocationChanged = (location: PanLocationProps) => {
-    this.setState({panLocation: location});
-  };
-
-  render() {
-    return (
-      <PanningContext.Provider value={this.getProviderContextValue()}>{this.props.children}</PanningContext.Provider>
-    );
-  }
-}
diff --git a/src/index.ts b/src/index.ts
index 9f6584229c..69e355b0c9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -103,13 +103,6 @@ export {default as NumberInput, NumberInputProps, NumberInputData} from './compo
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as PageControl, PageControlProps} from './components/pageControl';
 export {default as PanningContext} from './components/panningViews/panningContext';
-export {
-  default as PanningProvider,
-  PanningDirections,
-  PanLocationProps,
-  PanAmountsProps,
-  PanDirectionsProps
-} from './components/panningViews/panningProvider';
 export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
 export {
   default as Picker,
diff --git a/webDemo/src/examples/Picker.tsx b/webDemo/src/examples/Picker.tsx
index eeb0c62bb4..df045b56c2 100644
--- a/webDemo/src/examples/Picker.tsx
+++ b/webDemo/src/examples/Picker.tsx
@@ -7,8 +7,7 @@ import {
   Text,
   Dialog,
   PickerProps,
-  RenderCustomModalProps,
-  PanningProvider
+  RenderCustomModalProps
 } from 'react-native-ui-lib';
 
 const options = [
@@ -53,7 +52,7 @@ const PickerWrapper = () => {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        direction={PanningProvider.Directions.DOWN}
+        direction={Dialog.directions.DOWN}
         headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>

From 068332a84ba467728258c21411d260dffa843e37 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 15:04:42 +0200
Subject: [PATCH 08/17] Remove asPanViewConsumer

---
 .../panningViews/asPanViewConsumer.tsx        | 24 -------------------
 src/index.ts                                  |  1 -
 2 files changed, 25 deletions(-)
 delete mode 100644 src/components/panningViews/asPanViewConsumer.tsx

diff --git a/src/components/panningViews/asPanViewConsumer.tsx b/src/components/panningViews/asPanViewConsumer.tsx
deleted file mode 100644
index 7f6f073d9a..0000000000
--- a/src/components/panningViews/asPanViewConsumer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {Component, Ref} from 'react';
-import PanningContext from './panningContext';
-
-function asPanViewConsumer<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS> {
-  class PanViewConsumer extends Component<PROPS> {
-    contentRef: any;
-
-    saveRef = (r: Ref<React.Component<any>>) => {
-      this.contentRef = r;
-    };
-
-    render() {
-      return (
-        <PanningContext.Consumer>
-          {context => <WrappedComponent ref={this.saveRef} context={context} {...this.props}/>}
-        </PanningContext.Consumer>
-      );
-    }
-  }
-
-  return PanViewConsumer as any;
-}
-
-export default asPanViewConsumer;
diff --git a/src/index.ts b/src/index.ts
index 69e355b0c9..4f6861a933 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -103,7 +103,6 @@ export {default as NumberInput, NumberInputProps, NumberInputData} from './compo
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as PageControl, PageControlProps} from './components/pageControl';
 export {default as PanningContext} from './components/panningViews/panningContext';
-export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
 export {
   default as Picker,
   PickerProps,

From 4a2128a006222fdf5c91ca59da471ff5ea04e074 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 15:05:49 +0200
Subject: [PATCH 09/17] Remove PanningContext

---
 src/components/panningViews/panningContext.ts | 5 -----
 src/index.ts                                  | 1 -
 2 files changed, 6 deletions(-)
 delete mode 100644 src/components/panningViews/panningContext.ts

diff --git a/src/components/panningViews/panningContext.ts b/src/components/panningViews/panningContext.ts
deleted file mode 100644
index 06c675c6f1..0000000000
--- a/src/components/panningViews/panningContext.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const PanningContext = React.createContext({});
-PanningContext.displayName = 'IGNORE';
-export default PanningContext;
diff --git a/src/index.ts b/src/index.ts
index 4f6861a933..cca39401c8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -102,7 +102,6 @@ export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal
 export {default as NumberInput, NumberInputProps, NumberInputData} from './components/numberInput';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as PageControl, PageControlProps} from './components/pageControl';
-export {default as PanningContext} from './components/panningViews/panningContext';
 export {
   default as Picker,
   PickerProps,

From 3c63f2aa093d267ad1dc6d1aaab2a86b9dd49782 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 29 Jan 2025 15:28:59 +0200
Subject: [PATCH 10/17] Promote PanView and hooks from Incubator to standard
 components

---
 demo/src/index.js                             |  4 ++--
 demo/src/screens/MenuStructure.js             |  2 +-
 .../PanViewScreen.tsx                         |  3 +--
 demo/src/screens/componentScreens/index.js    |  1 +
 demo/src/screens/incubatorScreens/index.js    |  1 -
 src/components/dialog/index.tsx               |  2 +-
 src/components/dialog/types.ts                |  2 +-
 .../panView/__tests__/panningUtil.spec.js     |  0
 .../panView/index.tsx                         | 11 ++++-------
 .../panView/panningUtil.ts                    |  0
 .../panView/usePanGesture.ts                  |  2 +-
 .../useHiddenLocation/index.ts}               |  2 +-
 .../useHiddenLocation/index.web.ts}           |  2 +-
 src/incubator/index.ts                        |  1 -
 src/incubator/toast/index.tsx                 |  2 +-
 src/index.ts                                  | 19 ++++++++++---------
 16 files changed, 25 insertions(+), 29 deletions(-)
 rename demo/src/screens/{incubatorScreens => componentScreens}/PanViewScreen.tsx (99%)
 rename src/{incubator => components}/panView/__tests__/panningUtil.spec.js (100%)
 rename src/{incubator => components}/panView/index.tsx (89%)
 rename src/{incubator => components}/panView/panningUtil.ts (100%)
 rename src/{incubator => components}/panView/usePanGesture.ts (98%)
 rename src/{incubator/hooks/useHiddenLocation.ts => hooks/useHiddenLocation/index.ts} (96%)
 rename src/{incubator/hooks/useHiddenLocation.web.ts => hooks/useHiddenLocation/index.web.ts} (96%)

diff --git a/demo/src/index.js b/demo/src/index.js
index 215c2b60d7..4d42f52330 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -235,10 +235,10 @@ module.exports = {
       get SortableGridList() {
         return require('./screens/componentScreens/SortableGridListScreen').default;
       },
-      // Incubator
       get PanViewScreen() {
-        return require('./screens/incubatorScreens/PanViewScreen').default;
+        return require('./screens/componentScreens/PanViewScreen').default;
       },
+      // Incubator
       get IncubatorSlider() {
         return require('./screens/incubatorScreens/IncubatorSliderScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index eaddc0d42f..9fb9010be2 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -197,7 +197,7 @@ export const navigationData = {
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
+      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.components.PanViewScreen'}
     ]
   },
   Inspirations: {
diff --git a/demo/src/screens/incubatorScreens/PanViewScreen.tsx b/demo/src/screens/componentScreens/PanViewScreen.tsx
similarity index 99%
rename from demo/src/screens/incubatorScreens/PanViewScreen.tsx
rename to demo/src/screens/componentScreens/PanViewScreen.tsx
index 662d3958eb..e65226e438 100644
--- a/demo/src/screens/incubatorScreens/PanViewScreen.tsx
+++ b/demo/src/screens/componentScreens/PanViewScreen.tsx
@@ -6,7 +6,7 @@ import {
   View,
   Text,
   Colors,
-  Incubator,
+  PanView,
   Card,
   Constants,
   Modal,
@@ -14,7 +14,6 @@ import {
   Icon,
   TouchableOpacity
 } from 'react-native-ui-lib';
-const {PanView} = Incubator;
 
 interface Item {
   value: string;
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index ae48f3eb5c..a273ee202c 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -32,6 +32,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
   registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
+  registrar('unicorn.components.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
diff --git a/demo/src/screens/incubatorScreens/index.js b/demo/src/screens/incubatorScreens/index.js
index a9cfa67103..e999c7aace 100644
--- a/demo/src/screens/incubatorScreens/index.js
+++ b/demo/src/screens/incubatorScreens/index.js
@@ -3,6 +3,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
-  registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
 }
diff --git a/src/components/dialog/index.tsx b/src/components/dialog/index.tsx
index f046247353..13b6dbb75f 100644
--- a/src/components/dialog/index.tsx
+++ b/src/components/dialog/index.tsx
@@ -22,7 +22,7 @@ import {asBaseComponent, Constants} from '../../commons/new';
 import View from '../../components/view';
 import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
-import useHiddenLocation from '../../incubator/hooks/useHiddenLocation';
+import useHiddenLocation from '../../hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
 import useDialogContent from './useDialogContent';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
diff --git a/src/components/dialog/types.ts b/src/components/dialog/types.ts
index 6d5fcb5c98..eb039a6e65 100644
--- a/src/components/dialog/types.ts
+++ b/src/components/dialog/types.ts
@@ -3,7 +3,7 @@ import {type DimensionValue, type StyleProp, type TextStyle, type ViewStyle} fro
 import {AlignmentModifiers} from '../../commons/modifiers';
 import {ButtonProps} from '../../components/button';
 import {ModalProps} from '../../components/modal';
-import {PanningDirections, PanningDirectionsEnum} from '../../incubator/panView';
+import {PanningDirections, PanningDirectionsEnum} from '../panView';
 import {TextProps} from '../../components/text';
 import {ViewProps} from '../../components/view';
 type DialogDirections = PanningDirections;
diff --git a/src/incubator/panView/__tests__/panningUtil.spec.js b/src/components/panView/__tests__/panningUtil.spec.js
similarity index 100%
rename from src/incubator/panView/__tests__/panningUtil.spec.js
rename to src/components/panView/__tests__/panningUtil.spec.js
diff --git a/src/incubator/panView/index.tsx b/src/components/panView/index.tsx
similarity index 89%
rename from src/incubator/panView/index.tsx
rename to src/components/panView/index.tsx
index 0c2ae1577e..fcd2a1a356 100644
--- a/src/incubator/panView/index.tsx
+++ b/src/components/panView/index.tsx
@@ -3,16 +3,15 @@ import {StyleProp, View as RNView, ViewStyle} from 'react-native';
 import {useAnimatedStyle} from 'react-native-reanimated';
 import {GestureDetector, gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {asBaseComponent} from '../../commons/new';
-import View, {ViewProps} from '../../components/view';
-import useHiddenLocation from '../hooks/useHiddenLocation';
+import View, {ViewProps} from '../view';
+import useHiddenLocation from '../../hooks/useHiddenLocation';
 import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
 import usePanGesture, {
   PanGestureProps,
   PanViewDirections,
   PanViewDirectionsEnum,
   PanViewDismissThreshold,
-  DEFAULT_DIRECTIONS,
-  DEFAULT_ANIMATION_CONFIG
+  DEFAULT_DIRECTIONS
 } from './usePanGesture';
 
 export {
@@ -20,9 +19,7 @@ export {
   PanningDirectionsEnum,
   PanViewDirections,
   PanViewDirectionsEnum,
-  PanViewDismissThreshold,
-  DEFAULT_DIRECTIONS,
-  DEFAULT_ANIMATION_CONFIG
+  PanViewDismissThreshold
 };
 
 export interface PanViewProps extends Omit<PanGestureProps, 'hiddenLocation'>, ViewProps {
diff --git a/src/incubator/panView/panningUtil.ts b/src/components/panView/panningUtil.ts
similarity index 100%
rename from src/incubator/panView/panningUtil.ts
rename to src/components/panView/panningUtil.ts
diff --git a/src/incubator/panView/usePanGesture.ts b/src/components/panView/usePanGesture.ts
similarity index 98%
rename from src/incubator/panView/usePanGesture.ts
rename to src/components/panView/usePanGesture.ts
index 9e811d147a..922b995d4b 100644
--- a/src/incubator/panView/usePanGesture.ts
+++ b/src/components/panView/usePanGesture.ts
@@ -10,7 +10,7 @@ import {
   getDismissVelocity,
   DEFAULT_THRESHOLD
 } from './panningUtil';
-import type {HiddenLocation} from '../hooks/useHiddenLocation';
+import type {HiddenLocation} from '../../hooks/useHiddenLocation';
 
 export type PanViewDirections = PanningDirections;
 export const PanViewDirectionsEnum = PanningDirectionsEnum;
diff --git a/src/incubator/hooks/useHiddenLocation.ts b/src/hooks/useHiddenLocation/index.ts
similarity index 96%
rename from src/incubator/hooks/useHiddenLocation.ts
rename to src/hooks/useHiddenLocation/index.ts
index a52307d48a..c7db81be47 100644
--- a/src/incubator/hooks/useHiddenLocation.ts
+++ b/src/hooks/useHiddenLocation/index.ts
@@ -2,7 +2,7 @@ import {isEqual} from 'lodash';
 import {useCallback, useRef, useState, RefCallback} from 'react';
 import {View, LayoutChangeEvent, LayoutRectangle} from 'react-native';
 import {Constants} from '../../commons/new';
-import {PanningDirectionsEnum} from '../panView';
+import {PanningDirectionsEnum} from '../../components/panView';
 
 type HiddenLocationRecord = Record<PanningDirectionsEnum, number>;
 
diff --git a/src/incubator/hooks/useHiddenLocation.web.ts b/src/hooks/useHiddenLocation/index.web.ts
similarity index 96%
rename from src/incubator/hooks/useHiddenLocation.web.ts
rename to src/hooks/useHiddenLocation/index.web.ts
index 4ce447ef46..0271c4c258 100644
--- a/src/incubator/hooks/useHiddenLocation.web.ts
+++ b/src/hooks/useHiddenLocation/index.web.ts
@@ -2,7 +2,7 @@ import {isEqual} from 'lodash';
 import {useCallback, useRef, useState, RefCallback} from 'react';
 import {View, LayoutChangeEvent, LayoutRectangle} from 'react-native';
 import {Constants} from '../../commons/new';
-import {PanningDirectionsEnum} from '../panView';
+import {PanningDirectionsEnum} from '../../components/panView';
 
 type HiddenLocationRecord = Record<PanningDirectionsEnum, number>;
 
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
index f7677cc6ef..a2bc9cc46a 100644
--- a/src/incubator/index.ts
+++ b/src/incubator/index.ts
@@ -12,7 +12,6 @@ export {
 } from '../components/textField';
 export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
-export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
 export {default as Slider, SliderRef, SliderProps} from './slider';
 // TODO: delete exports after fully removing from private
 export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps} from '../components/chipsInput';
diff --git a/src/incubator/toast/index.tsx b/src/incubator/toast/index.tsx
index ae5a6c5f23..a3ef664f18 100644
--- a/src/incubator/toast/index.tsx
+++ b/src/incubator/toast/index.tsx
@@ -14,7 +14,7 @@ import View from '../../components/view';
 import Text from '../../components/text';
 import Icon from '../../components/icon';
 import Button from '../../components/button';
-import PanView from '../panView';
+import PanView from '../../components/panView';
 import {ToastProps, ToastPresets} from './types';
 import useToastTimer from './helpers/useToastTimer';
 import useToastPresets from './helpers/useToastPresets';
diff --git a/src/index.ts b/src/index.ts
index cca39401c8..0ce88ed624 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,15 +27,7 @@ export {
 export {BaseComponent, PureBaseComponent} from './commons';
 
 import * as Incubator from './incubator';
-export {
-  ExpandableOverlayProps,
-  ExpandableOverlayMethods,
-  ToastProps,
-  ToastPresets,
-  PanViewProps,
-  PanViewDirections,
-  PanViewDismissThreshold
-} from './incubator';
+export {ExpandableOverlayProps, ExpandableOverlayMethods, ToastProps, ToastPresets} from './incubator';
 import * as Hooks from './hooks';
 import * as Modifiers from './commons/modifiers';
 export {default as LogService} from './services/LogService';
@@ -115,6 +107,15 @@ export {
   PickerMethods,
   PickerSelectionStatusProps
 } from './components/picker';
+export {
+  default as PanView,
+  PanViewProps,
+  PanningDirections,
+  PanningDirectionsEnum,
+  PanViewDirections,
+  PanViewDirectionsEnum,
+  PanViewDismissThreshold
+} from './components/panView';
 export {default as PieChart, type PieChartProps, PieChartSegmentProps} from './components/pieChart';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
 export {default as ProgressiveImage, ProgressiveImageProps} from './components/progressiveImage';

From 27813ca7f3558f231dabed97e4fc97550f96dd3a Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Thu, 6 Feb 2025 11:41:20 +0200
Subject: [PATCH 11/17] Fix category

---
 src/components/dialog/dialog.api.json       | 2 +-
 src/components/dialog/dialogHeader.api.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog.api.json b/src/components/dialog/dialog.api.json
index 819e0b4d26..025f30d927 100644
--- a/src/components/dialog/dialog.api.json
+++ b/src/components/dialog/dialog.api.json
@@ -1,6 +1,6 @@
 {
   "name": "Dialog",
-  "category": "incubator",
+  "category": "overlays",
   "description": "Component for displaying custom content inside a popup dialog",
   "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
   "modifiers": ["alignment"],
diff --git a/src/components/dialog/dialogHeader.api.json b/src/components/dialog/dialogHeader.api.json
index 9757dd7017..a1f5967d53 100644
--- a/src/components/dialog/dialogHeader.api.json
+++ b/src/components/dialog/dialogHeader.api.json
@@ -1,6 +1,6 @@
 {
   "name": "Dialog.Header",
-  "category": "incubator",
+  "category": "overlays",
   "description": "Component for displaying the header of a popup dialog",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [

From 8669cedde24dc0f26d3b5ed2a71b3bd114b782f4 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Thu, 6 Feb 2025 12:59:26 +0200
Subject: [PATCH 12/17] Add v8 doc

---
 docs/getting-started/v8.md | 71 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 docs/getting-started/v8.md

diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md
new file mode 100644
index 0000000000..db8ff61069
--- /dev/null
+++ b/docs/getting-started/v8.md
@@ -0,0 +1,71 @@
+---
+sidebar_position: 5
+sidebar_label: Migrating v7 -> v8
+title: "Migrating v7 -> v8"
+# path: "/getting-started/v8"
+---
+## `react-native-ui-lib@8.x.x`
+
+## Components
+
+### ActionSheet
+This component is affected by the Dialog migration  
+
+### asPanViewConsumer
+Removed (use `PanView` instead)  
+
+### DateTimePicker
+This component is affected by the Dialog migration  
+
+### Dialog
+The component was refactored completely with some API changes. 
+
+Props migration:
+- `helperText` -> `hint`
+- `panDirection` -> `direction`
+- `onDialogDismissed` -> `onDismiss`
+- `pannableHeaderProps` -> `headerProps`  
+  Some props from `pannableHeaderProps` has moved \ changed their name:  
+  - `titleNumOfLines` -> `titleProps.numOfLines`
+  - `titleAccessibilityLabel` -> `titleProps.accessibilityLabel`
+  - `message` -> `subtitle`
+  - `leftCustomElement` -> `leadingAccessory`
+  - `rightCustomElement` -> `trailingAccessory`
+  - `bottomCustomElement` -> `bottomAccessory`
+- `overlayBackgroundColor` -> `modalProps.overlayBackgroundColor`
+- `supportedOrientations` -> `modalProps.supportedOrientations`
+- `accessibilityLabel` -> `modalProps.accessibilityLabel`
+- `renderPannableHeader` -> `headerProps`
+
+
+Additional notes:  
+- If you have a ScrollView or FlatList as a child of the `Dialog`, make sure to import them from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).  
+- The new onDismiss has no parameters (`() => void`)  
+
+Check out the full API: https://wix.github.io/react-native-ui-lib/docs/components/overlays/Dialog
+
+### ExpandableOverlay (Incubator)
+This component is affected by the Dialog migration  
+
+### PanView (new)
+ One component to replace all the previous views (`PanGestureView`, `PanDismissibleView`, `PanResponderView`, `PanListenerView`, `PanningProvider`, `asPanViewConsumer` and `PanningContext`).
+- Use `PanView.PanningDirections.X` (or `Dialog.directions.X` where relevant) instead of `PanningProvider.Directions.X`.  
+
+### PanDismissibleView
+Removed (use `PanView` instead)
+
+### PanGestureView
+Removed (use `PanView` instead)
+
+### PanListenerView
+Removed (use `PanView` instead)
+
+### PanningContext
+Removed (use `PanView` instead)
+
+### PanningProvider
+Removed (use `PanView` instead)
+
+### PanResponderView
+Removed (use `PanView` instead)
+

From 5b00e0a6fed690303837fab3f6d871bda01926b5 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Tue, 3 Jun 2025 09:32:10 +0300
Subject: [PATCH 13/17] Move PanViewScreen and sort a little

---
 demo/src/screens/MenuStructure.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index a60baf19b0..bdff8128dd 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -183,13 +183,14 @@ export const navigationData = {
     title: 'Animations & Gestures',
     screens: [
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
+      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
       {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
+      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.components.PanViewScreen'},
       {
         title: 'ProgressiveImage',
         tags: 'progressive image cover overlay',
         screen: 'unicorn.components.ProgressiveImageScreen'
-      },
-      {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'}
+      }
     ]
   },
   Incubator: {
@@ -203,8 +204,7 @@ export const navigationData = {
         title: 'ExpandableOverlay',
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
-      },
-      {title: 'PanView', tags: 'pan swipe drag', screen: 'unicorn.components.PanViewScreen'}
+      }
     ]
   },
   Inspirations: {

From 02a89aad61ecf511b08a389c3c0e5f82cc6b604e Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Tue, 3 Jun 2025 12:34:32 +0300
Subject: [PATCH 14/17] Add StackAggregator doc (#3745)

---
 docs/getting-started/v8.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md
index db8ff61069..589e2a6737 100644
--- a/docs/getting-started/v8.md
+++ b/docs/getting-started/v8.md
@@ -69,3 +69,7 @@ Removed (use `PanView` instead)
 ### PanResponderView
 Removed (use `PanView` instead)
 
+### StackAggregator
+Use the `backgroundColor` prop instead of `contentContainerStyle={{backgroundColor}}`
+Fix card being transparent on Android
+`onCollapseChanged` will now be called after the animation has ended (as was intended)

From 5785fb28fcb86bc9f155dd386551f4b20ed098d0 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Mon, 9 Jun 2025 12:36:09 +0300
Subject: [PATCH 15/17] Remove SharedTransition

---
 demo/src/index.js                             |   3 -
 demo/src/screens/MenuStructure.js             |   5 -
 .../SharedTransitionScreen.js                 | 143 ----------------
 demo/src/screens/componentScreens/index.js    |   1 -
 docs/getting-started/v8.md                    |   3 +
 src/components/index.js                       |   4 -
 .../ShareTransitionContext.js                 |   3 -
 src/components/sharedTransition/SharedArea.js | 153 ------------------
 .../sharedTransition/SourceElement.js         |  44 -----
 .../sharedTransition/TargetElement.js         |  38 -----
 src/components/sharedTransition/index.js      |   9 --
 src/index.ts                                  |   2 -
 12 files changed, 3 insertions(+), 405 deletions(-)
 delete mode 100644 demo/src/screens/componentScreens/SharedTransitionScreen.js
 delete mode 100644 src/components/sharedTransition/ShareTransitionContext.js
 delete mode 100644 src/components/sharedTransition/SharedArea.js
 delete mode 100644 src/components/sharedTransition/SourceElement.js
 delete mode 100644 src/components/sharedTransition/TargetElement.js
 delete mode 100644 src/components/sharedTransition/index.js

diff --git a/demo/src/index.js b/demo/src/index.js
index 4d42f52330..3c76bff534 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -99,9 +99,6 @@ module.exports = {
       get SegmentedControlScreen() {
         return require('./screens/componentScreens/SegmentedControlScreen').default;
       },
-      get SharedTransitionScreen() {
-        return require('./screens/componentScreens/SharedTransitionScreen').default;
-      },
       get SkeletonViewScreen() {
         return require('./screens/componentScreens/SkeletonViewScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index bdff8128dd..e97fae56c9 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -39,11 +39,6 @@ export const navigationData = {
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
       {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
       {title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
-      {
-        title: 'Shared Transition',
-        tags: 'shared transition element',
-        screen: 'unicorn.components.SharedTransitionScreen'
-      },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
       {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
diff --git a/demo/src/screens/componentScreens/SharedTransitionScreen.js b/demo/src/screens/componentScreens/SharedTransitionScreen.js
deleted file mode 100644
index a52ffdad60..0000000000
--- a/demo/src/screens/componentScreens/SharedTransitionScreen.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, {Component} from 'react';
-import {LayoutAnimation, FlatList} from 'react-native';
-import {Colors, View, Image, TouchableOpacity, SharedTransition, Card, Button, Text, Modal} from 'react-native-ui-lib'; //eslint-disable-line
-
-const DATA = [
-  {
-    id: '12',
-    title: 'white pendant lamp',
-    location: 'Paris, France',
-    views: 1224,
-    image:
-      'https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
-  },
-  {
-    id: '13',
-    title: 'black floor lamp at the corner',
-    location: 'Paris, France',
-    views: 302,
-    image:
-      'https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1494&q=80',
-  },
-  {
-    id: '14',
-    title: 'gray desk lamp near white wall',
-    location: 'Paris, France',
-    views: 554,
-    image:
-      'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80',
-  },
-  {
-    id: '15',
-    title: 'round white and yellow bowl illustration',
-    location: 'Paris, France',
-    views: 1999,
-    image:
-      'https://images.unsplash.com/photo-1526308430620-59f514ed2152?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
-  },
-  {
-    id: '16',
-    title: 'black and orange polka dot print textile',
-    location: 'Paris, France',
-    views: 2014,
-    image:
-      'https://images.unsplash.com/photo-1544070643-24128d1f6033?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80',
-  },
-];
-
-export default class SharedTransitionScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.cards = [];
-  }
-
-  state = {
-    showDetails: false,
-  };
-
-  renderItem = ({item}) => {
-    return (
-      <View marginB-20 padding-20 row height={280}>
-        <Card padding-20 marginV-20 width={'60%'} style={{zIndex: 10}} spread>
-          <View>
-            <Text text70 grey10>
-              {item.title}
-            </Text>
-            <Text text80 grey30>
-              {item.location}
-            </Text>
-          </View>
-          <View>
-            <Text text70 grey30>
-              <Text text50 purple30>
-                {item.views}
-              </Text>
-              {' Views'}
-            </Text>
-          </View>
-        </Card>
-        <SharedTransition.Source
-          id={item.id}
-          data={item}
-          style={[
-            {overflow: 'hidden', position: 'absolute', right: 20, top: 20, bottom: 20, width: '45%', height: 200},
-          ]}
-        >
-          {this.renderSharedElement(item)}
-        </SharedTransition.Source>
-      </View>
-    );
-  };
-
-  renderList() {
-    return <FlatList data={DATA} renderItem={this.renderItem} keyExtractor={item => item.title} />;
-  }
-
-  renderSharedElement(item = {}) {
-    return (
-      <View flex>
-        <Image
-          style={{width: '100%', height: '100%', borderRadius: 10}}
-          source={{
-            uri: item.image,
-          }}
-        />
-      </View>
-    );
-  }
-
-  renderDetails = (data = {}) => {
-    return (
-      <View flex pointerEvents="box-none" padding-20 paddingT-50>
-        <View row>
-          <SharedTransition.Target style={{width: 200, height: 280, marginLeft: -30}}>
-            {data && this.renderSharedElement(data, true)}
-          </SharedTransition.Target>
-          <View flex paddingL-20>
-            <Text text50>{data.title}</Text>
-            <Text text90 purple30 marginT-10>
-              {data.views} Views
-            </Text>
-          </View>
-        </View>
-        <View left marginT-20>
-          <Text text60>{data.location}</Text>
-          <Text>
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
-            not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
-          </Text>
-          <Button link marginT-20 grey10 label="Learn More" size="small" />
-        </View>
-      </View>
-    );
-  };
-
-  render() {
-    return (
-      <View flex grey80>
-        <SharedTransition.Area renderDetails={this.renderDetails}>{this.renderList()}</SharedTransition.Area>
-      </View>
-    );
-  }
-}
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 0ca0d30995..926d78c174 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -42,7 +42,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
   registrar('unicorn.components.SearchInputScreen', () => require('./SearchInputScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
-  registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
   registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);
diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md
index 589e2a6737..2ffbc1fda0 100644
--- a/docs/getting-started/v8.md
+++ b/docs/getting-started/v8.md
@@ -69,6 +69,9 @@ Removed (use `PanView` instead)
 ### PanResponderView
 Removed (use `PanView` instead)
 
+### SharedTransition
+Removed
+
 ### StackAggregator
 Use the `backgroundColor` prop instead of `contentContainerStyle={{backgroundColor}}`
 Fix card being transparent on Android
diff --git a/src/components/index.js b/src/components/index.js
index 66d9c22f5e..3e4ca1e603 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -143,10 +143,6 @@ export default {
   get RadioGroup() {
     return require('./radioButton').RadioGroup;
   },
-
-  get SharedTransition() {
-    return require('./sharedTransition').default;
-  },
   get StackAggregator() {
     return require('./stackAggregator').default;
   },
diff --git a/src/components/sharedTransition/ShareTransitionContext.js b/src/components/sharedTransition/ShareTransitionContext.js
deleted file mode 100644
index 166e08b4ac..0000000000
--- a/src/components/sharedTransition/ShareTransitionContext.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default React.createContext({});
diff --git a/src/components/sharedTransition/SharedArea.js b/src/components/sharedTransition/SharedArea.js
deleted file mode 100644
index 192751a829..0000000000
--- a/src/components/sharedTransition/SharedArea.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import Animated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import TouchableOpacity from '../touchableOpacity';
-import {Colors} from '../../style';
-import ShareTransitionContext from './ShareTransitionContext';
-
-const {interpolate: _interpolate, interpolateNode} = Animated;
-const Easing = EasingNode || _Easing;
-const interpolate = interpolateNode || _interpolate;
-
-// TODO: 2.17 breaks Android (at list the screen, the image is not shown) - move to incubator?
-class SharedArea extends Component {
-  displayName = 'IGNORE';
-  static propTypes = {
-    /**
-     * render details screen
-     */
-    renderDetails: PropTypes.elementType
-  };
-
-  static defaultProps = {
-    renderDetails: _.noop
-  };
-
-  state = {};
-  transition = new Animated.Value(0);
-
-  getProviderContextValue() {
-    const {showDetails} = this.state;
-    return {
-      setSharedData: this.setSharedData,
-      setSource: this.setSource,
-      setTarget: this.setTarget,
-      showDetails
-    };
-  }
-
-  getOverlayStyle() {
-    return {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: Colors.white,
-      opacity: interpolate(this.transition, {inputRange: [0, 1], outputRange: [0, 1]})
-    };
-  }
-
-  getDetailsStyle() {
-    return {
-      ...StyleSheet.absoluteFillObject,
-      opacity: interpolate(this.transition, {inputRange: [90, 100], outputRange: [0, 1]})
-    };
-  }
-
-  getElementStyle() {
-    const {sourceLayout, targetLayout} = this.state;
-    if (sourceLayout && this.transition) {
-      return {
-        position: 'absolute',
-        width: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.width, targetLayout.width]
-        }),
-        height: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.height, targetLayout.height]
-        }),
-        top: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.y, targetLayout.y]
-        }),
-        left: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.x, targetLayout.x]
-        })
-      };
-    }
-  }
-
-  setSharedData = data => {
-    this.setState({
-      data
-    });
-  };
-
-  setSource = (sourceLayout, element) => {
-    this.setState({
-      sourceLayout,
-      element,
-      showDetails: true
-    },
-    () => {
-      this.startTransition(true);
-    });
-  };
-
-  setTarget = targetLayout => {
-    this.setState({
-      targetLayout
-    });
-  };
-
-  clearSource = () => {
-    this.startTransition(false, () => {
-      this.setState({
-        showDetails: false,
-        data: undefined,
-        sourceLayout: undefined,
-        element: undefined
-      });
-    });
-  };
-
-  startTransition(show, onAnimationEnd) {
-    Animated.timing(this.transition, {
-      toValue: show ? 100 : 0,
-      duration: 600,
-      easing: Easing.bezier(0.19, 1, 0.22, 1),
-      useNativeDriver: false
-    }).start(onAnimationEnd);
-  }
-
-  renderDetailsOverlay() {
-    const {renderDetails} = this.props;
-    const {data, element} = this.state;
-
-    return (
-      <Animated.View pointerEvents={data ? 'auto' : 'none'} style={this.getOverlayStyle()}>
-        <Animated.View pointerEvents="box-none" style={this.getDetailsStyle()}>
-          {renderDetails(data)}
-        </Animated.View>
-
-        <Animated.View style={this.getElementStyle()}>
-          <TouchableOpacity activeOpacity={1} onPress={this.clearSource} /* _style={[style]} */ style={{flex: 1}}>
-            {element}
-          </TouchableOpacity>
-        </Animated.View>
-      </Animated.View>
-    );
-  }
-
-  render() {
-    return (
-      <ShareTransitionContext.Provider value={this.getProviderContextValue()}>
-        {this.props.children}
-        {this.renderDetailsOverlay()}
-      </ShareTransitionContext.Provider>
-    );
-  }
-}
-
-export default SharedArea;
diff --git a/src/components/sharedTransition/SourceElement.js b/src/components/sharedTransition/SourceElement.js
deleted file mode 100644
index 5d2cd2bb4c..0000000000
--- a/src/components/sharedTransition/SourceElement.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import TouchableOpacity from '../touchableOpacity';
-
-import ShareTransitionContext from './ShareTransitionContext';
-
-class SourceElement extends Component {
-  displayName = 'IGNORE';
-  static propTypes = {
-    /**
-     * Data to share between shared element and placeholder
-     */
-    data: PropTypes.object
-  };
-
-  state = {};
-
-  onPress = () => {
-    const {data} = this.props;
-    const {setSharedData, setSource} = this.context;
-    setSharedData(data);
-
-    this.element.measure((_x, _y, width, height, pageX, pageY) => {
-      const sourceLayout = {x: pageX, y: pageY, width, height};
-      setSource(sourceLayout, this.props.children);
-    });
-  };
-
-  setRef = ref => {
-    this.element = ref;
-  };
-
-  render() {
-    const {style, children} = this.props;
-    return (
-      <TouchableOpacity activeOpacity={0.9} style={style} ref={this.setRef} onPress={this.onPress}>
-        {children}
-      </TouchableOpacity>
-    );
-  }
-}
-
-SourceElement.contextType = ShareTransitionContext;
-export default SourceElement;
diff --git a/src/components/sharedTransition/TargetElement.js b/src/components/sharedTransition/TargetElement.js
deleted file mode 100644
index 8df0c283fc..0000000000
--- a/src/components/sharedTransition/TargetElement.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, {Component} from 'react';
-import TouchableOpacity from '../touchableOpacity';
-
-import ShareTransitionContext from './ShareTransitionContext';
-
-class TargetElement extends Component {
-  displayName = 'IGNORE';
-  state = {};
-
-  componentDidMount() {
-    const {setTarget} = this.context;
-
-    if (!this.targetLayout) {
-      setTimeout(() => {
-        this.element.measure((_x, _y, width, height, pageX, pageY) => {
-          this.targetLayout = {x: pageX, y: pageY, width, height};
-          setTarget(this.targetLayout);
-        });
-      });
-    }
-  }
-
-  setRef = ref => {
-    this.element = ref;
-  };
-
-  render() {
-    const {style, children} = this.props;
-    return (
-      <TouchableOpacity style={[style, {opacity: 0}]} ref={this.setRef}>
-        {children}
-      </TouchableOpacity>
-    );
-  }
-}
-
-TargetElement.contextType = ShareTransitionContext;
-export default TargetElement;
diff --git a/src/components/sharedTransition/index.js b/src/components/sharedTransition/index.js
deleted file mode 100644
index 3fb4eb38a1..0000000000
--- a/src/components/sharedTransition/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Source from './SourceElement';
-import Target from './TargetElement';
-import Area from './SharedArea';
-
-export default {
-  Area,
-  Source,
-  Target
-};
diff --git a/src/index.ts b/src/index.ts
index 8ca5619856..a84d789b62 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -132,8 +132,6 @@ export {
   SegmentedControlItemProps,
   SegmentedControlPreset
 } from './components/segmentedControl';
-// @ts-expect-error
-export {default as SharedTransition} from './components/sharedTransition';
 export {default as SkeletonView, SkeletonViewProps} from './components/skeletonView';
 export {default as SortableGridList, SortableGridListProps} from './components/sortableGridList';
 export {default as SortableList, SortableListProps, SortableListItemProps} from './components/sortableList';

From b0d6d88d381d11fc7dded093f7bff4b9b9366037 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 14 Aug 2024 19:20:19 +0300
Subject: [PATCH 16/17] StackAggregator - several fixes

---
 .../StackAggregatorScreen.tsx                 |  2 +-
 src/components/stackAggregator/index.tsx      | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
index e122872aff..d24b494b11 100644
--- a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
+++ b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
@@ -68,7 +68,7 @@ export default class StackAggregatorScreen extends Component {
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
           collapsed={false}
-          contentContainerStyle={{backgroundColor: Colors.red70}}
+          backgroundColor={Colors.red70}
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >
diff --git a/src/components/stackAggregator/index.tsx b/src/components/stackAggregator/index.tsx
index 250cd4fb4a..434029732d 100644
--- a/src/components/stackAggregator/index.tsx
+++ b/src/components/stackAggregator/index.tsx
@@ -72,6 +72,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
     onItemPress,
     contentContainerStyle,
     itemBorderRadius = 0,
+    backgroundColor,
     onCollapseWillChange,
     onCollapseChanged
   } = props;
@@ -83,11 +84,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
     setIsCollapsed(collapsed);
   }, [collapsed]);
 
-  useDidUpdate(() => {
+  useDidUpdate(async () => {
     onCollapseWillChange?.(isCollapsed);
-    animate();
+    await animate();
     onCollapseChanged?.(isCollapsed);
-  }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
+  }, [isCollapsed, itemsCount]);
 
   /** Animations */
 
@@ -100,10 +101,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
 
   const getItemScale = useCallback((index: number) => {
     if (isCollapsed) {
-      if (index === itemsCount - 2) {
+      if (index === 1) {
         return 0.95;
       }
-      if (index === itemsCount - 1) {
+
+      if (index === 2) {
         return 0.9;
       }
     }
@@ -185,10 +187,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
   const getTop = (index: number) => {
     let start = 0;
 
-    if (index === itemsCount - 2) {
+    if (index === 1) {
       start += PEEP;
     }
-    if (index === itemsCount - 1) {
+
+    if (index === 2) {
       start += PEEP * 2;
     }
 
@@ -218,6 +221,10 @@ const StackAggregator = (props: StackAggregatorProps) => {
     ];
   }, [firstItemHeight, itemsCount]);
 
+  const cardStyle = useMemo(() => {
+    return backgroundColor ? [styles.card, {backgroundColor}] : styles.card;
+  }, [backgroundColor]);
+
   /** Events */
 
   const _onItemPress = (index: number) => {
@@ -256,7 +263,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
         ]}
         collapsable={false}
       >
-        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
+        <Card style={cardStyle} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {opacity: animatedContentOpacity} : undefined} collapsable={false}>
             {item}
           </Animated.View>
@@ -319,8 +326,7 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1,
-    backgroundColor: 'transparent'
+    flexShrink: 1
   },
   button: {
     zIndex: 100

From 4a3f9b80121d25cfdd360ee87eb4b495a228e87c Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 15 Jun 2025 12:51:06 +0300
Subject: [PATCH 17/17] Picker - migrate prop deprecation end (#3737)

* Remove deprecated 'migrate' prop and related migration code from Picker component

* refactor: PickerItem removed itemValue

* docs: update Picker documentation to remove `migrate` prop and clarify value format

* refactor: remove deprecated getItemLabel and getItemValue props from Picker components

* refactor: simplify Picker API and enhance type safety by removing deprecated props and updating value handling

* refactor: remove getItemLabel usage from Picker components and simplify label handling

* docs: update Picker migration notes

* refactor: remove unused getItemValue/Label

---------

Co-authored-by: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
---
 docs/getting-started/v8.md                    | 19 ++++++++
 src/components/picker/PickerItem.tsx          | 26 ++++-------
 src/components/picker/PickerPresenter.ts      | 22 +---------
 .../picker/__tests__/PickerPresenter.spec.js  | 43 -------------------
 src/components/picker/api/picker.api.json     |  1 -
 src/components/picker/api/pickerItem.api.json |  5 ---
 .../helpers/__tests__/usePickerLabel.spec.ts  |  2 -
 .../picker/helpers/usePickerLabel.tsx         |  8 ++--
 .../helpers/usePickerMigrationWarnings.tsx    | 19 +-------
 .../picker/helpers/usePickerSearch.tsx        | 13 +++---
 .../picker/helpers/usePickerSelection.tsx     | 14 ++----
 src/components/picker/index.tsx               | 28 +++---------
 src/components/picker/types.ts                | 26 +----------
 13 files changed, 52 insertions(+), 174 deletions(-)

diff --git a/docs/getting-started/v8.md b/docs/getting-started/v8.md
index 2ffbc1fda0..586c2e3ad1 100644
--- a/docs/getting-started/v8.md
+++ b/docs/getting-started/v8.md
@@ -76,3 +76,22 @@ Removed
 Use the `backgroundColor` prop instead of `contentContainerStyle={{backgroundColor}}`
 Fix card being transparent on Android
 `onCollapseChanged` will now be called after the animation has ended (as was intended)
+
+### Picker
+The component was refactored to simplify its API and improve type safety.
+
+#### Migration Steps
+
+**Picker:**
+
+- `value` - The picker now only supports primitive values (string | number) instead of object-based values
+- `migrate` - Removed
+
+**Picker.Item:**
+
+- Items structure remains the same: `{label: string, value: primitive}` format is unchanged
+- All items now use the `label` prop directly - no custom label transformation needed
+- `getItemLabel` - Removed (use `item.label` to get label)
+- `getItemValue` - Removed (use `item.value` to get value)
+
+Check out the full API: https://wix.github.io/react-native-ui-lib/docs/components/form/Picker
diff --git a/src/components/picker/PickerItem.tsx b/src/components/picker/PickerItem.tsx
index 2b4405258d..7afef0b2ba 100644
--- a/src/components/picker/PickerItem.tsx
+++ b/src/components/picker/PickerItem.tsx
@@ -9,9 +9,9 @@ import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 import Text from '../text';
-import {getItemLabel, isItemSelected} from './PickerPresenter';
+import {isItemSelected} from './PickerPresenter';
 import PickerContext from './PickerContext';
-import {PickerItemProps, PickerSingleValue} from './types';
+import {PickerItemProps} from './types';
 
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
@@ -29,12 +29,8 @@ const PickerItem = (props: PickerItemProps) => {
     testID
   } = props;
   const context = useContext(PickerContext);
-  const {migrate} = context;
   const customRenderItem = props.renderItem || context.renderItem;
-  // @ts-expect-error TODO: fix after removing migrate prop completely
-  const itemValue = !migrate && typeof value === 'object' ? value?.value : value;
-  const isSelected = isItemSelected(itemValue, context.value);
-  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
+  const isSelected = isItemSelected(value, context.value);
   const selectedCounter = context.selectionLimit && _.isArray(context.value) && context.value?.length;
   const accessibilityProps = {
     accessibilityState: isSelected ? {selected: true} : undefined,
@@ -65,16 +61,12 @@ const PickerItem = (props: PickerItemProps) => {
   const _onPress = useCallback(async (props: any) => {
     // Using !(await onPress?.(item)) does not work properly when onPress is not sent
     // We have to explicitly state `false` so a synchronous void (undefined) will still work as expected
-    if (onPress && await onPress(context.isMultiMode ? !isSelected : undefined, props) === false) {
+    if (onPress && (await onPress(context.isMultiMode ? !isSelected : undefined, props)) === false) {
       return;
     }
-    if (migrate) {
-      context.onPress(value);
-    } else {
-      // @ts-expect-error TODO: fix after removing migrate prop completely
-      context.onPress(typeof value === 'object' || context.isMultiMode ? value : ({value, label: itemLabel}) as PickerSingleValue);
-    }
-  }, [migrate, value, context.onPress, onPress]);
+    context.onPress(value);
+  },
+  [value, context.onPress, onPress]);
 
   const onSelectedLayout = useCallback((...args: any[]) => {
     _.invoke(context, 'onSelectedLayout', ...args);
@@ -84,7 +76,7 @@ const PickerItem = (props: PickerItemProps) => {
     return (
       <View style={styles.container} flex row spread centerV>
         <Text numberOfLines={1} style={itemLabelStyle}>
-          {itemLabel}
+          {label}
         </Text>
         {selectedIndicator}
       </View>
@@ -102,7 +94,7 @@ const PickerItem = (props: PickerItemProps) => {
       customValue={props.customValue}
       {...accessibilityProps}
     >
-      {customRenderItem ? customRenderItem(value, {...props, isSelected, isItemDisabled}, itemLabel) : _renderItem()}
+      {customRenderItem ? customRenderItem(value, {...props, isSelected, isItemDisabled}, label) : _renderItem()}
     </TouchableOpacity>
   );
 };
diff --git a/src/components/picker/PickerPresenter.ts b/src/components/picker/PickerPresenter.ts
index 482047b3c3..4d27a5fbb4 100644
--- a/src/components/picker/PickerPresenter.ts
+++ b/src/components/picker/PickerPresenter.ts
@@ -19,8 +19,7 @@ export function isItemSelected(childValue: PickerSingleValue, selectedValue?: Pi
   if (Array.isArray(selectedValue)) {
     isSelected =
       _.find(selectedValue, v => {
-        // @ts-expect-error TODO: fix after removing migrate prop completely
-        return v === childValue || (typeof v === 'object' && v?.value === childValue);
+        return v === childValue;
       }) !== undefined;
   } else {
     isSelected = childValue === selectedValue;
@@ -28,25 +27,6 @@ export function isItemSelected(childValue: PickerSingleValue, selectedValue?: Pi
   return isSelected;
 }
 
-// export function getItemValue(props) {
-//   if (_.isArray(props.value)) {
-//     return props.getItemValue ? _.map(props.value, item => props.getItemValue(item)) : _.map(props.value, 'value');
-//   } else if (!_.isObject(props.value)) {
-//     return props.value;
-//   }
-//   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
-// }
-
-export function getItemLabel(label: string, value: PickerValue, getItemLabel?: PickerProps['getItemLabel']) {
-  if (_.isObject(value)) {
-    if (getItemLabel) {
-      return getItemLabel(value);
-    }
-    return _.get(value, 'label');
-  }
-  return label;
-}
-
 export function shouldFilterOut(searchValue: string, itemLabel?: string) {
   return !_.includes(_.lowerCase(itemLabel), _.lowerCase(searchValue));
 }
diff --git a/src/components/picker/__tests__/PickerPresenter.spec.js b/src/components/picker/__tests__/PickerPresenter.spec.js
index c23883855e..19b90be019 100644
--- a/src/components/picker/__tests__/PickerPresenter.spec.js
+++ b/src/components/picker/__tests__/PickerPresenter.spec.js
@@ -12,47 +12,4 @@ describe('components/PickerPresenter', () => {
     expect(uut.isItemSelected('value', [])).toBe(false);
     expect(uut.isItemSelected('value', undefined)).toBe(false);
   });
-
-  // describe('getItemValue', () => {
-  //   it('should return item value when item has value prop', () => {
-  //     expect(uut.getItemValue({value: {value: 'item value'}})).toBe('item value');
-  //   });
-
-  //   it('should return item value for multiple values', () => {
-  //     const itemProps = {value: [{value: '1'}, {value: '2'}, {value: '3'}]};
-  //     expect(uut.getItemValue(itemProps)).toEqual(['1', '2', '3']);
-  //   });
-
-  //   it('should return item value when item has getItemValue prop', () => {
-  //     const itemProps = {value: {name: 'value', age: 12}, getItemValue: item => item.name};
-  //     expect(uut.getItemValue(itemProps)).toBe('value');
-  //   });
-
-  //   it('should return item value for multiple values when item has getItemValue prop', () => {
-  //     const itemProps = {value: [{name: 'david'}, {name: 'sarah'}, {name: 'jack'}], getItemValue: item => item.name};
-  //     expect(uut.getItemValue(itemProps)).toEqual(['david', 'sarah', 'jack']);
-  //   });
-
-  //   it('should support backward compatibility for when child item value was not an object', () => {
-  //     const itemProps = {value: 'item-value'};
-  //     expect(uut.getItemValue(itemProps)).toEqual('item-value');
-  //   });
-  // });
-
-  describe('getItemLabel', () => {
-    it('should return item label when value is not an object', () => {
-      expect(uut.getItemLabel('label', 'value', undefined)).toEqual('label');
-    });
-
-    it('should return item label when value is an object', () => {
-      const itemProps = {value: {value: 'value', label: 'label'}};
-      expect(uut.getItemLabel(undefined, itemProps.value, undefined)).toEqual('label');
-    });
-
-    it('should return item label according to getLabel function ', () => {
-      const getLabel = itemValue => `${itemValue.value} - ${itemValue.label}`;
-      const itemProps = {value: {value: 'value', label: 'label'}, getLabel};
-      expect(uut.getItemLabel(undefined, itemProps.value, getLabel)).toEqual('value - label');
-    });
-  });
 });
diff --git a/src/components/picker/api/picker.api.json b/src/components/picker/api/picker.api.json
index ef9381df89..87d5e82dfe 100644
--- a/src/components/picker/api/picker.api.json
+++ b/src/components/picker/api/picker.api.json
@@ -11,7 +11,6 @@
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
   ],
   "props": [
-    {"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to Picker's new API"},
     {"name": "value", "type": "string | number", "description": "Picker current value"},
     {
       "name": "onChange",
diff --git a/src/components/picker/api/pickerItem.api.json b/src/components/picker/api/pickerItem.api.json
index 865925c4b0..88d8156fce 100644
--- a/src/components/picker/api/pickerItem.api.json
+++ b/src/components/picker/api/pickerItem.api.json
@@ -13,11 +13,6 @@
     {"name": "value", "type": "string | number", "description": "Item's value"},
     {"name": "label", "type": "string", "description": "Item's label"},
     {"name": "labelStyle", "type": "ViewStyle", "description": "Item's label style"},
-    {
-      "name": "getItemLabel",
-      "type": "(value: string | number) => string",
-      "description": "Custom function for the item label"
-    },
     {"name": "isSelected", "type": "boolean", "description": "Is the item selected"},
     {"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
     {"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},
diff --git a/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts b/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts
index c2db686de5..e1667ce951 100644
--- a/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts
+++ b/src/components/picker/helpers/__tests__/usePickerLabel.spec.ts
@@ -26,7 +26,6 @@ describe('usePickerLabel hook tests', () => {
     value,
     items,
     getLabel
-    // getItemLabel,
     // accessibilityLabel,
     // accessibilityHint,
     // placeholder
@@ -36,7 +35,6 @@ describe('usePickerLabel hook tests', () => {
         value,
         items,
         getLabel
-        // getItemLabel,
         // accessibilityLabel,
         // accessibilityHint,
         // placeholder
diff --git a/src/components/picker/helpers/usePickerLabel.tsx b/src/components/picker/helpers/usePickerLabel.tsx
index 12224e1a08..0ab495aade 100644
--- a/src/components/picker/helpers/usePickerLabel.tsx
+++ b/src/components/picker/helpers/usePickerLabel.tsx
@@ -5,20 +5,20 @@ import {PickerProps, PickerValue} from '../types';
 interface UsePickerLabelProps
   extends Pick<
     PickerProps,
-    'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
+    'value' | 'getLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
   > {
   items: {value: string | number; label: string}[] | null | undefined;
 }
 
 const usePickerLabel = (props: UsePickerLabelProps) => {
-  const {value, items, getLabel, getItemLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
+  const {value, items, getLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
 
   const getLabelsFromArray = useCallback((value: PickerValue) => {
     const itemsByValue = _.keyBy(items, 'value');
     return _.flow(arr =>
-      _.map(arr, item => (_.isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label)),
+      _.map(arr, item => (_.isPlainObject(item) ? item?.label : itemsByValue[item]?.label)),
     arr => _.join(arr, ', '))(value);
-  }, [getItemLabel, items]);
+  }, [items]);
 
   const _getLabel = useCallback((value: PickerValue) => {
     if (_.isFunction(getLabel) && !_.isUndefined(getLabel(value))) {
diff --git a/src/components/picker/helpers/usePickerMigrationWarnings.tsx b/src/components/picker/helpers/usePickerMigrationWarnings.tsx
index 95f074deca..799955cd78 100644
--- a/src/components/picker/helpers/usePickerMigrationWarnings.tsx
+++ b/src/components/picker/helpers/usePickerMigrationWarnings.tsx
@@ -3,30 +3,15 @@ import {LogService} from '../../../services';
 import {PickerProps} from '../types';
 
 // TODO: Remove this whole file when migration is completed
-type UsePickerMigrationWarnings = Pick<
-  PickerProps,
-  'children' | 'migrate' | 'getItemLabel' | 'getItemValue' | 'onShow'
->;
+type UsePickerMigrationWarnings = Pick<PickerProps, 'children' | 'onShow'>;
 
 const usePickerMigrationWarnings = (props: UsePickerMigrationWarnings) => {
-  const {children, migrate, getItemLabel, getItemValue, onShow} = props;
+  const {children, onShow} = props;
   useEffect(() => {
     if (children) {
       LogService.warn(`UILib Picker will stop supporting the 'children' prop in the next major version, please pass 'items' prop instead`);
     }
 
-    if (migrate) {
-      LogService.warn(`UILib Picker will stop supporting the 'migrate' prop in the next major version, please stop using it. The picker uses the new implementation by default.`);
-    }
-
-    if (getItemLabel) {
-      LogService.warn(`UILib Picker will stop supporting the 'getItemLabel' prop in the next major version, please pass the 'getItemLabel' prop to the specific item instead`);
-    }
-
-    if (getItemValue) {
-      LogService.warn(`UILib Picker will stop supporting the 'getItemValue' prop in the next major version, please stop using it. The value will be extract from 'items' prop instead`);
-    }
-
     if (onShow) {
       LogService.warn(`UILib Picker will stop supporting the 'onShow' prop in the next major version, please pass the 'onShow' prop from the 'pickerModalProps' instead`);
     }
diff --git a/src/components/picker/helpers/usePickerSearch.tsx b/src/components/picker/helpers/usePickerSearch.tsx
index 8a52a85b8f..b390788ee4 100644
--- a/src/components/picker/helpers/usePickerSearch.tsx
+++ b/src/components/picker/helpers/usePickerSearch.tsx
@@ -1,25 +1,24 @@
 import {useCallback, useState, useMemo} from 'react';
 import _ from 'lodash';
 import {PickerProps} from '../types';
-import {getItemLabel as getItemLabelPresenter, shouldFilterOut} from '../PickerPresenter';
+import {shouldFilterOut} from '../PickerPresenter';
 
-type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'getItemLabel' | 'items'>;
+type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'items'>;
 
 const usePickerSearch = (props: UsePickerSearchProps) => {
-  const {showSearch, onSearchChange, children, getItemLabel, items} = props;
+  const {showSearch, onSearchChange, children, items} = props;
   const [searchValue, setSearchValue] = useState('');
 
   const filterItems = useCallback((items: any) => {
     if (showSearch && !_.isEmpty(searchValue)) {
       return _.filter(items, item => {
-        const {label, value, getItemLabel: childGetItemLabel} = item.props || item;
-        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel || getItemLabel);
-        return !shouldFilterOut(searchValue, itemLabel);
+        const {label} = item.props || item;
+        return !shouldFilterOut(searchValue, label);
       });
     }
     return items;
   },
-  [showSearch, searchValue, getItemLabel]);
+  [showSearch, searchValue]);
 
   const filteredItems = useMemo(() => {
     return filterItems(children || items);
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index f8ae064a52..177048b107 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -3,13 +3,13 @@ import _ from 'lodash';
 import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
 interface UsePickerSelectionProps
-  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
+  extends Pick<PickerProps, 'value' | 'onChange' | 'topBarProps' | 'mode' | 'items'> {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode, items} = props;
+  const {value, onChange, topBarProps, pickerExpandableRef, setSearchValue, mode, items} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
@@ -29,17 +29,11 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
   [onChange]);
 
   const toggleItemSelection = useCallback((item: PickerSingleValue) => {
-    let newValue;
     const itemAsArray = [item];
-    if (!migrate) {
-      newValue = _.xorBy(multiDraftValue, itemAsArray, getItemValue || 'value');
-    } else {
-      newValue = _.xor(multiDraftValue, itemAsArray);
-    }
-
+    const newValue = _.xor(multiDraftValue, itemAsArray);
     setMultiDraftValue(newValue);
   },
-  [multiDraftValue, getItemValue]);
+  [multiDraftValue]);
 
   const cancelSelect = useCallback(() => {
     setSearchValue('');
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 3cf21536d8..30e75786b5 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -67,13 +67,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     listProps,
     value,
     getLabel,
-    getItemLabel,
-    getItemValue,
     renderItem,
     children,
     useSafeArea,
-    // TODO: Remove migrate props and migrate code
-    migrate = true,
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
@@ -90,9 +86,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   const pickerExpandable = useRef<ExpandableOverlayMethods>(null);
   const pickerRef = useImperativePickerHandle(ref, pickerExpandable);
 
-  // TODO: Remove this when migration is completed, starting of v8
-  // usePickerMigrationWarnings({children, migrate, getItemLabel, getItemValue});
-
   useEffect(() => {
     if (propItems) {
       setItems(propItems);
@@ -103,7 +96,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     filteredItems,
     setSearchValue,
     onSearchChange: _onSearchChange
-  } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
+  } = usePickerSearch({showSearch, onSearchChange, children, items});
   const {
     multiDraftValue,
     onDoneSelecting,
@@ -113,11 +106,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     selectedCount,
     toggleAllItemsSelection
   } = usePickerSelection({
-    migrate,
     value,
     onChange,
     pickerExpandableRef: pickerExpandable,
-    getItemValue,
     topBarProps,
     setSearchValue,
     mode,
@@ -128,8 +119,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     if (propItems) {
       return filteredItems.map((item: PickerItemProps) => ({
         ...item,
-        onPress: useWheelPicker && Constants.accessibility.isScreenReaderEnabled ?
-          () => onDoneSelecting(item.value) : undefined
+        onPress:
+          useWheelPicker && Constants.accessibility.isScreenReaderEnabled
+            ? () => onDoneSelecting(item.value)
+            : undefined
       }));
     }
     return filteredItems;
@@ -138,7 +131,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   const {label, accessibilityInfo} = usePickerLabel({
     value,
     items,
-    getItemLabel,
     getLabel,
     accessibilityLabel,
     accessibilityHint,
@@ -163,15 +155,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   }, []);
 
   const contextValue = useMemo(() => {
-    // @ts-expect-error cleanup after removing migrate prop
-    const pickerValue = !migrate && typeof value === 'object' && !_.isArray(value) ? value?.value : value;
     return {
-      migrate,
-      value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      value: mode === PickerModes.MULTI ? multiDraftValue : value,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
-      getItemValue,
-      getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit,
@@ -180,13 +167,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       toggleAllItemsSelection
     };
   }, [
-    migrate,
     mode,
     value,
     multiDraftValue,
     renderItem,
-    getItemValue,
-    getItemLabel,
     selectionLimit,
     onSelectedItemLayout,
     toggleItemSelection,
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index f92a75a4ed..f7cf075484 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -50,21 +50,6 @@ export interface PickerSearchStyle {
 }
 
 type PickerPropsDeprecation = {
-  /**
-   * @deprecated
-   * Temporary prop required for migration to Picker's new API
-   */
-  migrate?: boolean;
-  /**
-   * @deprecated
-   * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-   */
-  getItemValue?: (value: PickerValue) => any;
-  /**
-   * @deprecated
-   * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
-   */
-  getItemLabel?: (value: PickerValue) => string;
   /**
    * @deprecated
    * Callback for modal onShow event
@@ -315,14 +300,6 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
    * Item's label style
    */
   labelStyle?: StyleProp<TextStyle>;
-  /**
-   * Custom function for the item label (e.g (value) => customLabel)
-   */
-  getItemLabel?: (value: PickerValue) => string;
-  /**
-   * @deprecated Function to return the value out of the item value prop when value is custom shaped.
-   */
-  getItemValue?: PickerProps['getItemValue'];
   /**
    * Render custom item
    */
@@ -351,8 +328,7 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
   testID?: string;
 }
 
-export interface PickerContextProps
-  extends Pick<PickerProps, 'migrate' | 'value' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'selectionLimit'> {
+export interface PickerContextProps extends Pick<PickerProps, 'value' | 'renderItem' | 'selectionLimit'> {
   onPress: (value: PickerSingleValue) => void;
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
