react-native-ui-lib 7.45.0-snapshot.7266 → 7.46.0

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

@@ -39,7 +39,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             fontFamily?: string | undefined;
             fontSize?: number | undefined;
             fontStyle?: "normal" | "italic" | undefined;
-            fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+            fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
             letterSpacing?: number | undefined;
             lineHeight?: number | undefined;
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -62,41 +62,31 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderBlockEndColor?: import("react-native").ColorValue | undefined;
             borderBlockStartColor?: import("react-native").ColorValue | undefined;
             borderBottomColor?: import("react-native").ColorValue | undefined;
-            borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderColor?: import("react-native").ColorValue | undefined;
             borderCurve?: "circular" | "continuous" | undefined;
             borderEndColor?: import("react-native").ColorValue | undefined;
-            borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderLeftColor?: import("react-native").ColorValue | undefined;
-            borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderRightColor?: import("react-native").ColorValue | undefined;
             borderStartColor?: import("react-native").ColorValue | undefined;
-            borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
             borderTopColor?: import("react-native").ColorValue | undefined;
-            borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            outlineColor?: import("react-native").ColorValue | undefined;
-            outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
-            outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
-            outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             opacity?: import("react-native").AnimatableNumericValue | undefined;
             elevation?: number | undefined;
             pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-            isolation?: "auto" | "isolate" | undefined;
-            cursor?: import("react-native").CursorValue | undefined;
-            boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
-            filter?: string | readonly import("react-native").FilterFunction[] | undefined;
-            mixBlendMode?: import("react-native").BlendMode | undefined;
-            experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
-            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
             alignItems?: import("react-native").FlexAlignType | undefined;
             alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
             aspectRatio?: string | number | undefined;
@@ -108,15 +98,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderTopWidth?: number | undefined;
             borderWidth?: number | undefined;
             bottom?: import("react-native").DimensionValue | undefined;
-            boxSizing?: "border-box" | "content-box" | undefined;
-            display?: "none" | "flex" | "contents" | undefined;
+            display?: "none" | "flex" | undefined;
             end?: import("react-native").DimensionValue | undefined;
             flex?: number | undefined;
             flexBasis?: import("react-native").DimensionValue | undefined;
             flexDirection: "row" | "column" | "row-reverse" | "column-reverse";
-            rowGap?: string | number | undefined;
-            gap?: string | number | undefined;
-            columnGap?: string | number | undefined;
+            rowGap?: number | undefined;
+            gap?: number | undefined;
+            columnGap?: number | undefined;
             flexGrow?: number | undefined;
             flexShrink?: number | undefined;
             flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -146,32 +135,13 @@ declare class Button extends PureComponent<Props, ButtonState> {
             paddingStart?: import("react-native").DimensionValue | undefined;
             paddingTop?: import("react-native").DimensionValue | undefined;
             paddingVertical?: import("react-native").DimensionValue | undefined;
-            position?: "absolute" | "relative" | "static" | undefined;
+            position?: "absolute" | "relative" | undefined;
             right?: import("react-native").DimensionValue | undefined;
             start?: import("react-native").DimensionValue | undefined;
             top?: import("react-native").DimensionValue | undefined;
             width?: import("react-native").DimensionValue | undefined;
             zIndex?: number | undefined;
             direction?: "ltr" | "rtl" | "inherit" | undefined;
-            inset?: import("react-native").DimensionValue | undefined;
-            insetBlock?: import("react-native").DimensionValue | undefined;
-            insetBlockEnd?: import("react-native").DimensionValue | undefined;
-            insetBlockStart?: import("react-native").DimensionValue | undefined;
-            insetInline?: import("react-native").DimensionValue | undefined;
-            insetInlineEnd?: import("react-native").DimensionValue | undefined;
-            insetInlineStart?: import("react-native").DimensionValue | undefined;
-            marginBlock?: import("react-native").DimensionValue | undefined;
-            marginBlockEnd?: import("react-native").DimensionValue | undefined;
-            marginBlockStart?: import("react-native").DimensionValue | undefined;
-            marginInline?: import("react-native").DimensionValue | undefined;
-            marginInlineEnd?: import("react-native").DimensionValue | undefined;
-            marginInlineStart?: import("react-native").DimensionValue | undefined;
-            paddingBlock?: import("react-native").DimensionValue | undefined;
-            paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-            paddingBlockStart?: import("react-native").DimensionValue | undefined;
-            paddingInline?: import("react-native").DimensionValue | undefined;
-            paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-            paddingInlineStart?: import("react-native").DimensionValue | undefined;
             shadowColor?: import("react-native").ColorValue | undefined;
             shadowOffset?: Readonly<{
                 width: number;
@@ -179,7 +149,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             }> | undefined;
             shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
             shadowRadius?: number | undefined;
-            transform?: string | readonly (({
+            transform?: string | (({
                 perspective: import("react-native").AnimatableNumericValue;
             } & {
                 rotate?: undefined;
@@ -300,7 +270,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+                translateX: import("react-native").AnimatableNumericValue;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -315,7 +285,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+                translateY: import("react-native").AnimatableNumericValue;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;

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

@@ -131,6 +131,7 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
     getActiveBackgroundColor?: (backgroundColor: string, props: any) => string;
     /**
      * should animate layout change
+     * Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
      */
     animateLayout?: boolean;
     /**

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
+import { DialogProps } from '../../incubator/dialog';
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog

package/src/components/colorPicker/ColorPickerDialog.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LayoutAnimation, StyleSheet, Keyboard } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
-import Dialog from "../dialog";
+import Dialog from "../../incubator/dialog";
 import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from "./ColorPickerPresenter";
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogProps } from '../dialog';
+import type { DialogMigrationProps } from '../../incubator/dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,10 +15,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * 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
      */
@@ -96,6 +92,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
+type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -104,185 +101,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
-        value?: string;
-    }) => React.ReactElement) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & BaseComponentInjectedProps & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
-        value?: string | undefined;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,6 +42,7 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
+    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -149,10 +150,10 @@ const DateTimePicker = forwardRef((props, ref) => {
     return <RNDateTimePicker mode={mode} value={value || new Date()} onChange={handleChange} minimumDate={minimumDate} maximumDate={maximumDate} locale={locale} is24Hour={is24Hour} minuteInterval={minuteInterval} timeZoneOffsetInMinutes={timeZoneOffsetInMinutes} display={display} textColor={textColor} style={dateTimePickerStyle} themeVariant={themeVariant} testID={`${testID}.picker`} />;
   }, [mode, value, handleChange, minimumDate, maximumDate, locale, is24Hour, minuteInterval, timeZoneOffsetInMinutes, themeVariant]);
   const renderIOSExpandableOverlay = () => {
-    return <View>
+    return <>
         {renderHeader()}
         {renderDateTimePicker()}
-      </View>;
+      </>;
   };
   const renderAndroidDateTimePicker = useCallback(({
     visible
@@ -164,7 +165,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} disabled={editable === false}
+    ref={expandable} 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} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({

package/src/components/dialog/DialogDismissibleView.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PanningDirections } from '../panningViews/panningProvider';
+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[];
+}
+declare const DialogDismissibleView: {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+};
+export default DialogDismissibleView;

package/src/components/dialog/DialogDismissibleView.js

@@ -0,0 +1,184 @@
+import _isUndefined from "lodash/isUndefined";
+import React, { useEffect, useRef, useCallback, useContext } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import { Constants } from "../../commons/new";
+import View from "../view";
+import PanningContext from "../panningViews/panningContext";
+import PanningProvider from "../panningViews/panningProvider";
+import PanResponderView from "../panningViews/panResponderView";
+const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
+
+// TODO: move this to panningContext
+
+const DEFAULT_DIRECTION = PanningProvider.Directions.DOWN;
+const DialogDismissibleView = props => {
+  const {
+    direction = DEFAULT_DIRECTION,
+    visible: propsVisible,
+    containerStyle,
+    style,
+    children,
+    onDismiss = () => {}
+  } = props;
+  // @ts-expect-error
+  const {
+    isPanning,
+    dragDeltas,
+    swipeDirections
+  } = useContext(PanningContext);
+  const width = useRef(Constants.screenWidth);
+  const height = useRef(Constants.screenHeight);
+  const TOP_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().top : Constants.isIOS ? 20 : 0);
+  const BOTTOM_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().bottom : Constants.isIOS ? 20 : 0);
+  const thresholdX = useRef(0);
+  const thresholdY = useRef(0);
+  const dragsCounter = useRef(0);
+  const containerRef = useRef();
+  const animatedValue = useRef(new Animated.Value(0));
+  const mutableSwipeDirections = useRef({});
+  const prevDragDeltas = useRef();
+  const prevSwipeDirections = useRef();
+  const visible = useRef(Boolean(propsVisible));
+  const getHiddenLocation = useCallback((left, top) => {
+    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(getHiddenLocation(0, 0));
+  const animateTo = useCallback((toValue, animationEndCallback) => {
+    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 => {
+    // 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, y) => {
+        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, top, direction) => {
+    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
+  }) => {
+    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
+  }
+});

package/src/components/dialog/OverlayFadingBackground.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    testID?: string;
+    dialogVisibility?: boolean;
+    modalVisibility?: boolean;
+    overlayBackgroundColor?: string;
+    onFadeDone?: () => void;
+    fadeOut?: boolean;
+}
+declare const OverlayFadingBackground: {
+    ({ testID, dialogVisibility, modalVisibility, overlayBackgroundColor, onFadeDone: propsOnFadeDone, fadeOut }: Props): React.JSX.Element;
+    displayName: string;
+};
+export default OverlayFadingBackground;