@ealimardani/react-native-modal 14.3.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Native Community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,328 @@
+### Announcements
+
+- 📣 We're looking for maintainers and contributors! See [#598](https://github.com/react-native-modal/react-native-modal/discussions/598)
+- 🙏 If you have a question, please [start a new discussion](https://github.com/react-native-modal/react-native-modal/discussions) instead of opening a new issue.
+
+# react-native-modal
+
+[![npm version](https://badge.fury.io/js/react-native-modal.svg)](https://badge.fury.io/js/react-native-modal)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+> If you're new to the React Native world, please notice that React Native itself offers a [<Modal /> component that works out-of-the-box](https://reactnative.dev/docs/modal).
+
+An enhanced, animated, customizable React Native modal.
+
+The goal of `react-native-modal` is expanding the original React Native `<Modal>` component by adding animations, style customization options, and new features, while still providing a simple API.
+
+<p align="center">
+<img src="/.github/images/example-modal.gif" height="500" />
+</p>
+
+## Features
+
+- Smooth enter/exit animations
+- Plain simple and flexible APIs
+- Customizable backdrop opacity, color and timing
+- Listeners for the modal animations ending
+- Resize itself correctly on device rotation
+- Swipeable
+- Scrollable
+
+## Setup
+
+This library is available on npm, install it with: `npm i react-native-modal` or `yarn add react-native-modal`.
+
+## Usage
+
+Since `react-native-modal` is an extension of the [original React Native modal](https://reactnative.dev/docs/modal.html), it works in a similar fashion.
+
+1.  Import `react-native-modal`:
+
+```javascript
+import Modal from 'react-native-modal';
+```
+
+2.  Create a `<Modal>` component and nest its content inside of it:
+
+```javascript
+function WrapperComponent() {
+  return (
+    <View>
+      <Modal>
+        <View style={{flex: 1}}>
+          <Text>I am the modal content!</Text>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+```
+
+3.  Then, show the modal by setting the `isVisible` prop to `true`:
+
+```javascript
+function WrapperComponent() {
+  return (
+    <View>
+      <Modal isVisible={true}>
+        <View style={{flex: 1}}>
+          <Text>I am the modal content!</Text>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+```
+
+The `isVisible` prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your wrapper component state and setting it to `true` or `false` when needed.
+
+## A complete example
+
+The following example consists in a component (`ModalTester`) with a button and a modal.
+The modal is controlled by the `isModalVisible` state variable and it is initially hidden, since its value is `false`.  
+Pressing the button sets `isModalVisible` to true, making the modal visible.  
+Inside the modal there is another button that, when pressed, sets `isModalVisible` to false, hiding the modal.
+
+```javascript
+import React, {useState} from 'react';
+import {Button, Text, View} from 'react-native';
+import Modal from 'react-native-modal';
+
+function ModalTester() {
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const toggleModal = () => {
+    setModalVisible(!isModalVisible);
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <Button title="Show modal" onPress={toggleModal} />
+
+      <Modal isVisible={isModalVisible}>
+        <View style={{flex: 1}}>
+          <Text>Hello!</Text>
+
+          <Button title="Hide modal" onPress={toggleModal} />
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+export default ModalTester;
+```
+
+For a more complex example take a look at the `/example` directory.
+
+## Available props
+
+| Name                             | Type                 | Default                          | Description                                                                                                                                |
+| -------------------------------- | -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `animationIn`                    | `string` or `object` | `"slideInUp"`                    | Modal show animation                                                                                                                       |
+| `animationInTiming`              | `number`             | `300`                            | Timing for the modal show animation (in ms)                                                                                                |
+| `animationOut`                   | `string` or `object` | `"slideOutDown"`                 | Modal hide animation                                                                                                                       |
+| `animationOutTiming`             | `number`             | `300`                            | Timing for the modal hide animation (in ms)                                                                                                |
+| `avoidKeyboard`                  | `bool`               | `false`                          | Move the modal up if the keyboard is open                                                                                                  |
+| `coverScreen`                    | `bool`               | `true`                           | Will use RN `Modal` component to cover the entire screen wherever the modal is mounted in the component hierarchy                          |
+| `hasBackdrop`                    | `bool`               | `true`                           | Render the backdrop                                                                                                                        |
+| `backdropColor`                  | `string`             | `"black"`                        | The backdrop background color                                                                                                              |
+| `backdropOpacity`                | `number`             | `0.70`                           | The backdrop opacity when the modal is visible                                                                                             |
+| `backdropTransitionInTiming`     | `number`             | `300`                            | The backdrop show timing (in ms)                                                                                                           |
+| `backdropTransitionOutTiming`    | `number`             | `300`                            | The backdrop hide timing (in ms)                                                                                                           |
+| `customBackdrop`                 | `node`               | `null`                           | The custom backdrop element                                                                                                                |
+| `children`                       | `node`               | **REQUIRED**                     | The modal content                                                                                                                          |
+| `deviceHeight`                   | `number`             | `null`                           | Device height (useful on devices that can hide the navigation bar)                                                                         |
+| `deviceWidth`                    | `number`             | `null`                           | Device width (useful on devices that can hide the navigation bar)                                                                          |
+| `isVisible`                      | `bool`               | **REQUIRED**                     | Show the modal?                                                                                                                            |
+| `onBackButtonPress`              | `func`               | `() => null`                     | Called when the Android back button is pressed                                                                                             |
+| `onBackdropPress`                | `func`               | `() => null`                     | Called when the backdrop is pressed                                                                                                        |
+| `onModalWillHide`                | `func`               | `() => null`                     | Called before the modal hide animation begins                                                                                              |
+| `onModalHide`                    | `func`               | `() => null`                     | Called when the modal is completely hidden                                                                                                 |
+| `onModalWillShow`                | `func`               | `() => null`                     | Called before the modal show animation begins                                                                                              |
+| `onModalShow`                    | `func`               | `() => null`                     | Called when the modal is completely visible                                                                                                |
+| `onSwipeStart`                   | `func`               | `() => null`                     | Called when the swipe action started                                                                                                       |
+| `onSwipeMove`                    | `func`               | `(percentageShown) => null`      | Called on each swipe event                                                                                                                 |
+| `onSwipeComplete`                | `func`               | `({ swipingDirection }) => null` | Called when the `swipeThreshold` has been reached                                                                                          |
+| `onSwipeCancel`                  | `func`               | `() => null`                     | Called when the `swipeThreshold` has not been reached                                                                                      |
+| `panResponderThreshold`          | `number`             | `4`                              | The threshold for when the panResponder should pick up swipe events                                                                        |
+| `scrollOffset`                   | `number`             | `0`                              | When > 0, disables swipe-to-close, in order to implement scrollable content                                                                |
+| `scrollOffsetMax`                | `number`             | `0`                              | Used to implement overscroll feel when content is scrollable. See `/example` directory                                                     |
+| `scrollTo`                       | `func`               | `null`                           | Used to implement scrollable modal. See `/example` directory for reference on how to use it                                                |
+| `scrollHorizontal`               | `bool`               | `false`                          | Set to true if your scrollView is horizontal (for a correct scroll handling)                                                               |
+| `swipeThreshold`                 | `number`             | `100`                            | Swiping threshold that when reached calls `onSwipeComplete`                                                                                |
+| `swipeDirection`                 | `string` or `array`  | `null`                           | Defines the direction where the modal can be swiped. Can be 'up', 'down', 'left, or 'right', or a combination of them like `['up','down']` |
+| `useNativeDriver`                | `bool`               | `false`                          | Defines if animations should use native driver                                                                                             |
+| `useNativeDriverForBackdrop`     | `bool`               | `null`                           | Defines if animations for backdrop should use native driver (to avoid flashing on android)                                                 |
+| `hideModalContentWhileAnimating` | `bool`               | `false`                          | Enhances the performance by hiding the modal content until the animations complete                                                         |
+| `propagateSwipe`                 | `bool` or `func`     | `false`                          | Allows swipe events to propagate to children components (eg a ScrollView inside a modal)                                                   |
+| `style`                          | `any`                | `null`                           | Style applied to the modal                                                                                                                 |
+
+## Frequently Asked Questions
+
+### The component is not working as expected
+
+Under the hood `react-native-modal` uses react-native original [Modal component](https://reactnative.dev/docs/modal).  
+Before reporting a bug, try swapping `react-native-modal` with react-native original Modal component and, if the issue persists, check if it has already been reported as a [react-native issue](https://github.com/facebook/react-native/issues).
+
+### The backdrop is not completely filled/covered on some Android devices (Galaxy, for one)
+
+React-Native has a few issues detecting the correct device width/height of some devices.  
+If you're experiencing this issue, you'll need to install [`react-native-extra-dimensions-android`](https://github.com/Sunhat/react-native-extra-dimensions-android).  
+Then, provide the real window height (obtained from `react-native-extra-dimensions-android`) to the modal:
+
+```javascript
+const deviceWidth = Dimensions.get('window').width;
+const deviceHeight =
+  Platform.OS === 'ios'
+    ? Dimensions.get('window').height
+    : require('react-native-extra-dimensions-android').get(
+        'REAL_WINDOW_HEIGHT',
+      );
+
+function WrapperComponent() {
+  const [isModalVisible, setModalVisible] = useState(true);
+
+  return (
+    <Modal
+      isVisible={isModalVisible}
+      deviceWidth={deviceWidth}
+      deviceHeight={deviceHeight}>
+      <View style={{flex: 1}}>
+        <Text>I am the modal content!</Text>
+      </View>
+    </Modal>
+  );
+}
+```
+
+### How can I hide the modal by pressing outside of its content?
+
+The prop `onBackdropPress` allows you to handle this situation:
+
+```javascript
+<Modal
+  isVisible={isModalVisible}
+  onBackdropPress={() => setModalVisible(false)}>
+  <View style={{flex: 1}}>
+    <Text>I am the modal content!</Text>
+  </View>
+</Modal>
+```
+
+### How can I hide the modal by swiping it?
+
+The prop `onSwipeComplete` allows you to handle this situation (remember to set `swipeDirection` too!):
+
+```javascript
+<Modal
+  isVisible={isModalVisible}
+  onSwipeComplete={() => setModalVisible(false)}
+  swipeDirection="left">
+  <View style={{flex: 1}}>
+    <Text>I am the modal content!</Text>
+  </View>
+</Modal>
+```
+
+Note that when using `useNativeDriver={true}` the modal won't drag correctly. This is a [known issue](https://github.com/react-native-community/react-native-modal/issues/163#issuecomment-409760695).
+
+### The modal flashes in a weird way when animating
+
+Unfortunately this is a [known issue](https://github.com/react-native-community/react-native-modal/issues/92) that happens when `useNativeDriver=true` and must still be solved.  
+In the meanwhile as a workaround you can set the `hideModalContentWhileAnimating` prop to `true`: this seems to solve the issue.
+Also, do not assign a `backgroundColor` property directly to the Modal. Prefer to set it on the child container.
+
+### The modal background doesn't animate properly
+
+Are you sure you named the `isVisible` prop correctly? Make sure it is spelled correctly: `isVisible`, not `visible`.
+
+### The modal doesn't change orientation
+
+Add a `supportedOrientations={['portrait', 'landscape']}` prop to the component, as described [in the React Native documentation](https://reactnative.dev/docs/modal.html#supportedorientations).
+
+Also, if you're providing the `deviceHeight` and `deviceWidth` props you'll have to manually update them when the layout changes.
+
+### I can't show multiple modals one after another
+
+Unfortunately right now react-native doesn't allow multiple modals to be displayed at the same time.
+This means that, in `react-native-modal`, if you want to immediately show a new modal after closing one you must first make sure that the modal that your closing has completed its hiding animation by using the `onModalHide` prop.
+
+### I can't show multiple modals at the same time
+
+See the question above.
+Showing multiple modals (or even alerts/dialogs) at the same time is not doable because of a react-native bug.
+That said, I would strongly advice against using multiple modals at the same time because, most often than not, this leads to a bad UX, especially on mobile (just my opinion).
+
+### The StatusBar style changes when the modal shows up
+
+This issue has been discussed [here](https://github.com/react-native-community/react-native-modal/issues/50).  
+The TLDR is: it's a know React-Native issue with the Modal component 😞
+
+### The modal is not covering the entire screen
+
+The modal style applied by default has a small margin.  
+If you want the modal to cover the entire screen you can easily override it this way:
+
+```js
+<Modal style={{margin: 0}}>...</Modal>
+```
+
+### I can't scroll my ScrollView inside of the modal
+
+Enable propagateSwipe to allow your child components to receive swipe events:
+
+```js
+<Modal propagateSwipe>...</Modal>
+```
+
+Please notice that this is still a WIP fix and might not fix your issue yet, see [issue #236](https://github.com/react-native-community/react-native-modal/issues/236).
+
+### The modal enter/exit animation flickers
+
+Make sure your `animationIn` and `animationOut` are set correctly.  
+We noticed that, for example, using `fadeIn` as an exit animation makes the modal flicker (it should be `fadeOut`!).
+Also, some users have noticed that setting backdropTransitionOutTiming={0} can fix the flicker without affecting the animation.
+
+### The custom backdrop doesn't fill the entire screen
+
+You need to specify the size of your custom backdrop component. You can also make it expand to fill the entire screen by adding a `flex: 1` to its style:
+
+```javascript
+<Modal isVisible={isModalVisible} customBackdrop={<View style={{flex: 1}} />}>
+  <View style={{flex: 1}}>
+    <Text>I am the modal content!</Text>
+  </View>
+</Modal>
+```
+
+### The custom backdrop doesn't dismiss the modal on press
+
+You can provide an event handler to the custom backdrop element to dismiss the modal. The prop `onBackdropPress` is not supported for a custom backdrop.
+
+```javascript
+<Modal
+  isVisible={isModalVisible}
+  customBackdrop={
+    <TouchableWithoutFeedback onPress={dismissModalHandler}>
+      <View style={{flex: 1}} />
+    </TouchableWithoutFeedback>
+  }
+/>
+```
+
+## Available animations
+
+Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable [animation definition schema](https://github.com/oblador/react-native-animatable#animation-definition-schema).
+
+## Alternatives
+
+- [React Native's built-in `<Modal>` component](https://reactnative.dev/docs/modal.html)
+- [React Native Paper `<Modal>` component](https://callstack.github.io/react-native-paper/modal.html)
+- [React Native Modalfy](https://github.com/colorfy-software/react-native-modalfy)
+
+## Acknowledgements
+
+Thanks [@oblador](https://github.com/oblador) for react-native-animatable, [@brentvatne](https://github.com/brentvatne) for the npm namespace and to anyone who contributed to this library!
+
+Pull requests, feedbacks and suggestions are welcome!

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { ReactNativeModal } from './modal';
+export { ModalProps, ReactNativeModal, OnSwipeCompleteParams } from './modal';
+export { AnimationEvent, Animations, SupportedAnimation, Orientation, Direction, PresentationStyle, OnOrientationChange, GestureResponderEvent, } from './types';
+export default ReactNativeModal;

package/dist/index.js

@@ -0,0 +1,3 @@
+import { ReactNativeModal } from './modal';
+export { ReactNativeModal } from './modal';
+export default ReactNativeModal;

package/dist/modal.d.ts

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { Animated, EmitterSubscription, PanResponderGestureState, PanResponderInstance, ViewStyle, StyleProp, ViewProps } from 'react-native';
+import { CustomAnimation, Animation } from 'react-native-animatable';
+import { Direction, GestureResponderEvent, OnOrientationChange, Orientation, OrNull, PresentationStyle } from './types';
+export type OnSwipeCompleteParams = {
+    swipingDirection: Direction;
+};
+type State = {
+    showContent: boolean;
+    isVisible: boolean;
+    deviceWidth: number;
+    deviceHeight: number;
+    isSwipeable: boolean;
+    pan: OrNull<Animated.ValueXY>;
+};
+declare const defaultProps: {
+    animationIn: Animation | CustomAnimation;
+    animationInTiming: number;
+    animationOut: Animation | CustomAnimation;
+    animationOutTiming: number;
+    avoidKeyboard: boolean;
+    coverScreen: boolean;
+    hasBackdrop: boolean;
+    backdropColor: string;
+    backdropOpacity: number;
+    backdropTransitionInTiming: number;
+    backdropTransitionOutTiming: number;
+    customBackdrop: React.ReactNode;
+    useNativeDriver: boolean;
+    deviceHeight: OrNull<number>;
+    deviceWidth: OrNull<number>;
+    hideModalContentWhileAnimating: boolean;
+    propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);
+    isVisible: boolean;
+    panResponderThreshold: number;
+    swipeThreshold: number;
+    onModalShow: () => void;
+    onModalWillShow: () => void;
+    onModalHide: () => void;
+    onModalWillHide: () => void;
+    onBackdropPress: () => void;
+    onBackButtonPress: () => void;
+    scrollTo: OrNull<(e: any) => void>;
+    scrollOffset: number;
+    scrollOffsetMax: number;
+    scrollHorizontal: boolean;
+    statusBarTranslucent: boolean;
+    supportedOrientations: Orientation[];
+};
+export type ModalProps = ViewProps & {
+    children: React.ReactNode;
+    onSwipeStart?: (gestureState: PanResponderGestureState) => void;
+    onSwipeMove?: (percentageShown: number, gestureState: PanResponderGestureState) => void;
+    onSwipeComplete?: (params: OnSwipeCompleteParams, gestureState: PanResponderGestureState) => void;
+    onSwipeCancel?: (gestureState: PanResponderGestureState) => void;
+    style?: StyleProp<ViewStyle>;
+    swipeDirection?: Direction | Array<Direction>;
+    onDismiss?: () => void;
+    onShow?: () => void;
+    hardwareAccelerated?: boolean;
+    onOrientationChange?: OnOrientationChange;
+    presentationStyle?: PresentationStyle;
+    useNativeDriverForBackdrop?: boolean;
+} & typeof defaultProps;
+export declare class ReactNativeModal extends React.Component<ModalProps, State> {
+    static defaultProps: {
+        animationIn: Animation | CustomAnimation;
+        animationInTiming: number;
+        animationOut: Animation | CustomAnimation;
+        animationOutTiming: number;
+        avoidKeyboard: boolean;
+        coverScreen: boolean;
+        hasBackdrop: boolean;
+        backdropColor: string;
+        backdropOpacity: number;
+        backdropTransitionInTiming: number;
+        backdropTransitionOutTiming: number;
+        customBackdrop: React.ReactNode;
+        useNativeDriver: boolean;
+        deviceHeight: OrNull<number>;
+        deviceWidth: OrNull<number>;
+        hideModalContentWhileAnimating: boolean;
+        propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);
+        isVisible: boolean;
+        panResponderThreshold: number;
+        swipeThreshold: number;
+        onModalShow: () => void;
+        onModalWillShow: () => void;
+        onModalHide: () => void;
+        onModalWillHide: () => void;
+        onBackdropPress: () => void;
+        onBackButtonPress: () => void;
+        scrollTo: OrNull<(e: any) => void>;
+        scrollOffset: number;
+        scrollOffsetMax: number;
+        scrollHorizontal: boolean;
+        statusBarTranslucent: boolean;
+        supportedOrientations: Orientation[];
+    };
+    backdropAnimatedOpacity: Animated.Value;
+    backHandler: {
+        remove: () => void;
+    } | null;
+    isTransitioning: boolean;
+    inSwipeClosingState: boolean;
+    currentSwipingDirection: OrNull<Direction>;
+    animationIn: string;
+    animationOut: string;
+    contentRef: any;
+    panResponder: PanResponderInstance | null;
+    didUpdateDimensionsEmitter: EmitterSubscription | null;
+    interactionHandle: number | null;
+    constructor(props: ModalProps);
+    static getDerivedStateFromProps(nextProps: ModalProps, state: State): {
+        isVisible: boolean;
+        showContent: boolean;
+    } | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ModalProps): void;
+    getDeviceHeight: () => number;
+    getDeviceWidth: () => number;
+    onBackButtonPress: () => boolean;
+    shouldPropagateSwipe: (evt: any, gestureState: PanResponderGestureState) => boolean;
+    buildPanResponder: () => void;
+    getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;
+    getSwipingDirection: (gestureState: PanResponderGestureState) => "up" | "down" | "left" | "right";
+    calcDistancePercentage: (gestureState: PanResponderGestureState) => number;
+    createAnimationEventForSwipe: () => ((...args: any[]) => void) | null;
+    isDirectionIncluded: (direction: Direction) => boolean;
+    isSwipeDirectionAllowed: ({ dy, dx }: PanResponderGestureState) => boolean;
+    handleDimensionsUpdate: () => void;
+    open: () => void;
+    close: () => void;
+    makeBackdrop: () => React.JSX.Element | null;
+    render(): React.JSX.Element;
+}
+export default ReactNativeModal;

package/dist/modal.js

@@ -0,0 +1,476 @@
+import * as React from 'react';
+import { BackHandler, Animated, DeviceEventEmitter, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, PanResponder, Platform, TouchableWithoutFeedback, View, } from 'react-native';
+import { buildAnimations, initializeAnimations, reversePercentage, } from './utils';
+import styles from './modal.style';
+import * as animatable from 'react-native-animatable';
+initializeAnimations();
+const defaultProps = {
+    animationIn: 'slideInUp',
+    animationInTiming: 300,
+    animationOut: 'slideOutDown',
+    animationOutTiming: 300,
+    avoidKeyboard: false,
+    coverScreen: true,
+    hasBackdrop: true,
+    backdropColor: 'black',
+    backdropOpacity: 0.7,
+    backdropTransitionInTiming: 300,
+    backdropTransitionOutTiming: 300,
+    customBackdrop: null,
+    useNativeDriver: false,
+    deviceHeight: null,
+    deviceWidth: null,
+    hideModalContentWhileAnimating: false,
+    propagateSwipe: false,
+    isVisible: false,
+    panResponderThreshold: 4,
+    swipeThreshold: 100,
+    onModalShow: (() => null),
+    onModalWillShow: (() => null),
+    onModalHide: (() => null),
+    onModalWillHide: (() => null),
+    onBackdropPress: (() => null),
+    onBackButtonPress: (() => null),
+    scrollTo: null,
+    scrollOffset: 0,
+    scrollOffsetMax: 0,
+    scrollHorizontal: false,
+    statusBarTranslucent: false,
+    supportedOrientations: ['portrait', 'landscape'],
+};
+const extractAnimationFromProps = (props) => ({
+    animationIn: props.animationIn,
+    animationOut: props.animationOut,
+});
+export class ReactNativeModal extends React.Component {
+    static defaultProps = defaultProps;
+    backdropAnimatedOpacity = new Animated.Value(0);
+    backHandler = null;
+    isTransitioning = false;
+    inSwipeClosingState = false;
+    // currentSwipingDirection: SwipeDirection | null = null;
+    currentSwipingDirection = null;
+    animationIn;
+    animationOut;
+    contentRef;
+    panResponder = null;
+    didUpdateDimensionsEmitter = null;
+    interactionHandle = null;
+    constructor(props) {
+        super(props);
+        const { animationIn, animationOut } = buildAnimations(extractAnimationFromProps(props));
+        this.animationIn = animationIn;
+        this.animationOut = animationOut;
+        this.state = {
+            showContent: false,
+            isVisible: false,
+            deviceWidth: Dimensions.get('window').width,
+            deviceHeight: Dimensions.get('window').height,
+            isSwipeable: !!props.swipeDirection,
+            pan: null,
+        };
+        if (this.state.isSwipeable) {
+            this.state = {
+                ...this.state,
+                pan: new Animated.ValueXY(),
+            };
+            this.buildPanResponder();
+        }
+        if (props.isVisible) {
+            this.state = {
+                ...this.state,
+                isVisible: true,
+                showContent: true,
+            };
+        }
+        const initial = props.isVisible ? props.backdropOpacity : 0;
+        this.backdropAnimatedOpacity = new Animated.Value(initial);
+    }
+    static getDerivedStateFromProps(nextProps, state) {
+        if (!state.isVisible && nextProps.isVisible) {
+            return { isVisible: true, showContent: false };
+        }
+        return null;
+    }
+    componentDidMount() {
+        if (this.props.onSwipe) {
+            console.warn('`<Modal onSwipe="..." />` is deprecated and will be removed starting from 13.0.0. Use `<Modal onSwipeComplete="..." />` instead.');
+        }
+        this.didUpdateDimensionsEmitter = DeviceEventEmitter.addListener('didUpdateDimensions', this.handleDimensionsUpdate);
+        if (this.state.isVisible) {
+            this.open();
+        }
+        this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPress);
+    }
+    componentWillUnmount() {
+        if (this.backHandler) {
+            this.backHandler.remove();
+            this.backHandler = null;
+        }
+        if (this.didUpdateDimensionsEmitter) {
+            this.didUpdateDimensionsEmitter.remove();
+            this.didUpdateDimensionsEmitter = null;
+        }
+        if (this.interactionHandle) {
+            InteractionManager.clearInteractionHandle(this.interactionHandle);
+            this.interactionHandle = null;
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.animationIn !== prevProps.animationIn ||
+            this.props.animationOut !== prevProps.animationOut) {
+            const { animationIn, animationOut } = buildAnimations(extractAnimationFromProps(this.props));
+            this.animationIn = animationIn;
+            this.animationOut = animationOut;
+        }
+        if (this.props.isVisible && !prevProps.isVisible) {
+            this.open();
+        }
+        else if (!this.props.isVisible && prevProps.isVisible) {
+            this.close();
+        }
+    }
+    getDeviceHeight = () => this.props.deviceHeight || this.state.deviceHeight;
+    getDeviceWidth = () => this.props.deviceWidth || this.state.deviceWidth;
+    onBackButtonPress = () => {
+        if (this.props.onBackButtonPress && this.props.isVisible) {
+            this.props.onBackButtonPress();
+            return true;
+        }
+        return false;
+    };
+    shouldPropagateSwipe = (evt, gestureState) => {
+        return typeof this.props.propagateSwipe === 'function'
+            ? this.props.propagateSwipe(evt, gestureState)
+            : this.props.propagateSwipe;
+    };
+    buildPanResponder = () => {
+        let animEvt = null;
+        this.panResponder = PanResponder.create({
+            onMoveShouldSetPanResponder: (evt, gestureState) => {
+                if (!this.shouldPropagateSwipe(evt, gestureState)) {
+                    const shouldSetPanResponder = Math.abs(gestureState.dx) >=
+                        (this.props.panResponderThreshold ?? 4) ||
+                        Math.abs(gestureState.dy) >=
+                            (this.props.panResponderThreshold ?? 4);
+                    if (shouldSetPanResponder && this.props.onSwipeStart) {
+                        this.props.onSwipeStart(gestureState);
+                    }
+                    this.currentSwipingDirection = this.getSwipingDirection(gestureState);
+                    animEvt = this.createAnimationEventForSwipe();
+                    return shouldSetPanResponder;
+                }
+                return false;
+            },
+            onStartShouldSetPanResponder: (e, gestureState) => {
+                const hasScrollableView = e?._dispatchInstances &&
+                    e._dispatchInstances.some((instance) => /scrollview|flatlist/i.test(instance.type));
+                if (hasScrollableView &&
+                    this.shouldPropagateSwipe(e, gestureState) &&
+                    this.props.scrollTo &&
+                    (this.props.scrollOffset ?? 0) > 0) {
+                    return false;
+                }
+                if (this.props.onSwipeStart) {
+                    this.props.onSwipeStart(gestureState);
+                }
+                this.currentSwipingDirection = null;
+                return true;
+            },
+            onPanResponderMove: (evt, gestureState) => {
+                if (!this.currentSwipingDirection) {
+                    if (gestureState.dx === 0 && gestureState.dy === 0)
+                        return;
+                    this.currentSwipingDirection = this.getSwipingDirection(gestureState);
+                    animEvt = this.createAnimationEventForSwipe();
+                }
+                if (this.isSwipeDirectionAllowed(gestureState)) {
+                    const newOpacityFactor = 1 - this.calcDistancePercentage(gestureState);
+                    animEvt?.(evt, gestureState);
+                    if (this.props.onSwipeMove) {
+                        this.props.onSwipeMove(newOpacityFactor, gestureState);
+                    }
+                }
+                else {
+                    if (this.props.scrollTo) {
+                        if (this.props.scrollHorizontal) {
+                            let offsetX = -gestureState.dx;
+                            if (offsetX > (this.props.scrollOffsetMax ?? 0)) {
+                                offsetX -= (offsetX - (this.props.scrollOffsetMax ?? 0)) / 2;
+                            }
+                            this.props.scrollTo({ x: offsetX, animated: false });
+                        }
+                        else {
+                            let offsetY = -gestureState.dy;
+                            if (offsetY > (this.props.scrollOffsetMax ?? 0)) {
+                                offsetY -= (offsetY - (this.props.scrollOffsetMax ?? 0)) / 2;
+                            }
+                            this.props.scrollTo({ y: offsetY, animated: false });
+                        }
+                    }
+                }
+            },
+            onPanResponderRelease: (evt, gestureState) => {
+                const accDistance = this.getAccDistancePerDirection(gestureState);
+                if (accDistance > (this.props.swipeThreshold ?? 100) &&
+                    this.isSwipeDirectionAllowed(gestureState)) {
+                    if (this.props.onSwipeComplete) {
+                        this.inSwipeClosingState = true;
+                        this.props.onSwipeComplete({
+                            swipingDirection: this.getSwipingDirection(gestureState),
+                        }, gestureState);
+                        return;
+                    }
+                    // Deprecated
+                    if (this.props.onSwipe) {
+                        this.inSwipeClosingState = true;
+                        this.props.onSwipe();
+                        return;
+                    }
+                }
+                if (this.props.onSwipeCancel) {
+                    this.props.onSwipeCancel(gestureState);
+                }
+                if (this.state.pan) {
+                    Animated.spring(this.state.pan, {
+                        toValue: { x: 0, y: 0 },
+                        bounciness: 0,
+                        useNativeDriver: false,
+                    }).start();
+                }
+                if (this.props.scrollTo) {
+                    if ((this.props.scrollOffset ?? 0) > (this.props.scrollOffsetMax ?? 0)) {
+                        this.props.scrollTo({
+                            y: this.props.scrollOffsetMax ?? 0,
+                            animated: true,
+                        });
+                    }
+                }
+            },
+        });
+    };
+    getAccDistancePerDirection = (gestureState) => {
+        switch (this.currentSwipingDirection) {
+            case 'up':
+                return -gestureState.dy;
+            case 'down':
+                return gestureState.dy;
+            case 'right':
+                return gestureState.dx;
+            case 'left':
+                return -gestureState.dx;
+            default:
+                return 0;
+        }
+    };
+    getSwipingDirection = (gestureState) => {
+        if (Math.abs(gestureState.dx) > Math.abs(gestureState.dy)) {
+            return gestureState.dx > 0 ? 'right' : 'left';
+        }
+        return gestureState.dy > 0 ? 'down' : 'up';
+    };
+    calcDistancePercentage = (gestureState) => {
+        const deviceHeight = this.props.deviceHeight || this.state.deviceHeight;
+        const deviceWidth = this.props.deviceWidth || this.state.deviceWidth;
+        switch (this.currentSwipingDirection) {
+            case 'down':
+                return ((gestureState.moveY - gestureState.y0) /
+                    (deviceHeight - gestureState.y0));
+            case 'up':
+                return reversePercentage(gestureState.moveY / gestureState.y0);
+            case 'left':
+                return reversePercentage(gestureState.moveX / gestureState.x0);
+            case 'right':
+                return ((gestureState.moveX - gestureState.x0) /
+                    (deviceWidth - gestureState.x0));
+            default:
+                return 0;
+        }
+    };
+    createAnimationEventForSwipe = () => {
+        if (!this.state.pan)
+            return null;
+        if (this.currentSwipingDirection === 'right' ||
+            this.currentSwipingDirection === 'left') {
+            return Animated.event([null, { dx: this.state.pan.x }], {
+                useNativeDriver: false,
+            });
+        }
+        return Animated.event([null, { dy: this.state.pan.y }], {
+            useNativeDriver: false,
+        });
+    };
+    isDirectionIncluded = (direction) => {
+        return Array.isArray(this.props.swipeDirection)
+            ? this.props.swipeDirection.includes(direction)
+            : this.props.swipeDirection === direction;
+    };
+    isSwipeDirectionAllowed = ({ dy, dx }) => {
+        const draggedDown = dy > 0;
+        const draggedUp = dy < 0;
+        const draggedLeft = dx < 0;
+        const draggedRight = dx > 0;
+        if (this.currentSwipingDirection === 'up' &&
+            this.isDirectionIncluded('up') &&
+            draggedUp)
+            return true;
+        if (this.currentSwipingDirection === 'down' &&
+            this.isDirectionIncluded('down') &&
+            draggedDown)
+            return true;
+        if (this.currentSwipingDirection === 'right' &&
+            this.isDirectionIncluded('right') &&
+            draggedRight)
+            return true;
+        if (this.currentSwipingDirection === 'left' &&
+            this.isDirectionIncluded('left') &&
+            draggedLeft)
+            return true;
+        return false;
+    };
+    handleDimensionsUpdate = () => {
+        if (!this.props.deviceHeight && !this.props.deviceWidth) {
+            const deviceWidth = Dimensions.get('window').width;
+            const deviceHeight = Dimensions.get('window').height;
+            if (deviceWidth !== this.state.deviceWidth ||
+                deviceHeight !== this.state.deviceHeight) {
+                this.setState({ deviceWidth, deviceHeight });
+            }
+        }
+    };
+    open = () => {
+        if (this.isTransitioning)
+            return;
+        this.isTransitioning = true;
+        Animated.timing(this.backdropAnimatedOpacity, {
+            toValue: this.props.backdropOpacity ?? 0.7,
+            duration: this.props.backdropTransitionInTiming ?? 300,
+            useNativeDriver: true,
+        }).start();
+        if (this.contentRef) {
+            this.props.onModalWillShow?.();
+            if (this.interactionHandle == null) {
+                this.interactionHandle = InteractionManager.createInteractionHandle();
+            }
+            this.contentRef
+                .animate(this.animationIn, this.props.animationInTiming ?? 300)
+                .then(() => {
+                this.isTransitioning = false;
+                if (this.interactionHandle) {
+                    InteractionManager.clearInteractionHandle(this.interactionHandle);
+                    this.interactionHandle = null;
+                }
+                if (!this.props.isVisible) {
+                    this.close();
+                }
+                else {
+                    this.props.onModalShow?.();
+                }
+            });
+        }
+    };
+    close = () => {
+        if (this.isTransitioning)
+            return;
+        this.isTransitioning = true;
+        Animated.timing(this.backdropAnimatedOpacity, {
+            toValue: 0,
+            duration: this.props.backdropTransitionOutTiming ?? 300,
+            useNativeDriver: true,
+        }).start();
+        let animationOut = this.animationOut;
+        if (this.inSwipeClosingState) {
+            this.inSwipeClosingState = false;
+            if (this.currentSwipingDirection === 'up')
+                animationOut = 'slideOutUp';
+            else if (this.currentSwipingDirection === 'down')
+                animationOut = 'slideOutDown';
+            else if (this.currentSwipingDirection === 'right')
+                animationOut = 'slideOutRight';
+            else if (this.currentSwipingDirection === 'left')
+                animationOut = 'slideOutLeft';
+        }
+        if (this.contentRef) {
+            this.props.onModalWillHide?.();
+            if (this.interactionHandle == null) {
+                this.interactionHandle = InteractionManager.createInteractionHandle();
+            }
+            this.contentRef
+                .animate(animationOut, this.props.animationOutTiming ?? 300)
+                .then(() => {
+                this.isTransitioning = false;
+                if (this.interactionHandle) {
+                    InteractionManager.clearInteractionHandle(this.interactionHandle);
+                    this.interactionHandle = null;
+                }
+                if (this.props.isVisible) {
+                    this.open();
+                }
+                else {
+                    this.setState({ showContent: false }, () => {
+                        this.setState({ isVisible: false }, () => {
+                            this.props.onModalHide?.();
+                        });
+                    });
+                }
+            });
+        }
+        setTimeout(() => {
+            if (this.state.isSwipeable && this.state.pan) {
+                this.state.pan.setValue({ x: 0, y: 0 });
+            }
+        }, 150);
+    };
+    makeBackdrop = () => {
+        if (!this.props.hasBackdrop)
+            return null;
+        const { customBackdrop, onBackdropPress } = this.props;
+        const hasCustomBackdrop = !!customBackdrop;
+        const backdropWrapper = (React.createElement(Animated.View, { style: [
+                styles.backdrop,
+                {
+                    width: this.getDeviceWidth(),
+                    height: this.getDeviceHeight(),
+                    backgroundColor: !hasCustomBackdrop
+                        ? this.props.backdropColor
+                        : 'transparent',
+                    opacity: this.backdropAnimatedOpacity,
+                },
+            ] }, hasCustomBackdrop && customBackdrop));
+        if (hasCustomBackdrop)
+            return backdropWrapper;
+        return (React.createElement(TouchableWithoutFeedback, { onPress: onBackdropPress }, backdropWrapper));
+    };
+    render() {
+        const { animationIn, animationInTiming, animationOut, animationOutTiming, avoidKeyboard, coverScreen, hasBackdrop, backdropColor, backdropOpacity, backdropTransitionInTiming, backdropTransitionOutTiming, customBackdrop, children, isVisible, onModalShow, onBackButtonPress, useNativeDriver, propagateSwipe, style, ...otherProps } = this.props;
+        const computedStyle = [
+            { margin: this.getDeviceWidth() * 0.05 },
+            styles.content,
+            style,
+        ];
+        let panHandlers = {};
+        let panPosition = {};
+        if (this.state.isSwipeable && this.panResponder && this.state.pan) {
+            panHandlers = { ...this.panResponder.panHandlers };
+            if (useNativeDriver) {
+                panPosition = { transform: this.state.pan.getTranslateTransform() };
+            }
+            else {
+                panPosition = this.state.pan.getLayout();
+            }
+        }
+        const _children = this.props.hideModalContentWhileAnimating &&
+            this.props.useNativeDriver &&
+            !this.state.showContent ? (React.createElement(animatable.View, null)) : (children);
+        const containerView = (React.createElement(animatable.View, { ...panHandlers, ref: (ref) => (this.contentRef = ref), style: [panPosition, computedStyle], pointerEvents: "box-none", useNativeDriver: useNativeDriver, ...otherProps }, _children));
+        if (!coverScreen && this.state.isVisible) {
+            return (React.createElement(View, { pointerEvents: "box-none", style: [styles.backdrop, styles.containerBox] },
+                this.makeBackdrop(),
+                containerView));
+        }
+        return (React.createElement(Modal, { transparent: true, animationType: "none", visible: this.state.isVisible, onRequestClose: onBackButtonPress, ...otherProps },
+            this.makeBackdrop(),
+            avoidKeyboard ? (React.createElement(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, pointerEvents: "box-none", style: computedStyle.concat([{ margin: 0 }]) }, containerView)) : (containerView)));
+    }
+}
+export default ReactNativeModal;

package/dist/modal.style.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    backdrop: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        opacity: number;
+        backgroundColor: string;
+    };
+    content: {
+        flex: number;
+        justifyContent: "center";
+    };
+    containerBox: {
+        zIndex: number;
+        opacity: number;
+        backgroundColor: string;
+    };
+};
+export default _default;

package/dist/modal.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+export default StyleSheet.create({
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        opacity: 0,
+        backgroundColor: 'black',
+    },
+    content: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    containerBox: {
+        zIndex: 2,
+        opacity: 1,
+        backgroundColor: 'transparent',
+    },
+});

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+import { Animation, CustomAnimation } from 'react-native-animatable';
+import { NativeSyntheticEvent, NativeTouchEvent } from 'react-native';
+export type OrNull<T> = null | T;
+export type SupportedAnimation = Animation | CustomAnimation;
+export type Animations = {
+    animationIn: string;
+    animationOut: string;
+};
+export type Orientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
+export type Direction = 'up' | 'down' | 'left' | 'right';
+export type AnimationEvent = (...args: any[]) => void;
+export type PresentationStyle = 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
+export type OnOrientationChange = (orientation: NativeSyntheticEvent<any>) => void;
+export interface GestureResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,16 @@
+import { CustomAnimation, Animation } from 'react-native-animatable';
+import { Animations } from './types';
+export declare const initializeAnimations: () => void;
+export declare const makeSlideTranslation: (translationType: string, fromValue: number, toValue: number) => {
+    from: {
+        [x: string]: number;
+    };
+    to: {
+        [x: string]: number;
+    };
+};
+export declare const buildAnimations: ({ animationIn, animationOut, }: {
+    animationIn: Animation | CustomAnimation;
+    animationOut: Animation | CustomAnimation;
+}) => Animations;
+export declare const reversePercentage: (x: number) => number;

package/dist/utils.js

@@ -0,0 +1,59 @@
+import { Dimensions } from 'react-native';
+import * as animatable from 'react-native-animatable';
+const { height, width } = Dimensions.get('window');
+export const initializeAnimations = () => {
+    // Since react-native-animatable applies by default a margin of 100 to its
+    // sliding animation, we reset them here overriding the margin to 0.
+    const animationDefinitions = {
+        slideInDown: makeSlideTranslation('translateY', -height, 0),
+        slideInUp: makeSlideTranslation('translateY', height, 0),
+        slideInLeft: makeSlideTranslation('translateX', -width, 0),
+        slideInRight: makeSlideTranslation('translateX', width, 0),
+        slideOutDown: makeSlideTranslation('translateY', 0, height),
+        slideOutUp: makeSlideTranslation('translateY', 0, -height),
+        slideOutLeft: makeSlideTranslation('translateX', 0, -width),
+        slideOutRight: makeSlideTranslation('translateX', 0, width),
+    };
+    animatable.initializeRegistryWithDefinitions(animationDefinitions);
+};
+export const makeSlideTranslation = (translationType, fromValue, toValue) => ({
+    from: {
+        [translationType]: fromValue,
+    },
+    to: {
+        [translationType]: toValue,
+    },
+});
+// User can define custom react-native-animatable animations, see PR #72
+// Utility for creating our own custom react-native-animatable animations
+export const buildAnimations = ({ animationIn, animationOut, }) => {
+    let updatedAnimationIn;
+    let updatedAnimationOut;
+    if (isObject(animationIn)) {
+        const animationName = JSON.stringify(animationIn);
+        makeAnimation(animationName, animationIn);
+        updatedAnimationIn = animationName;
+    }
+    else {
+        updatedAnimationIn = animationIn;
+    }
+    if (isObject(animationOut)) {
+        const animationName = JSON.stringify(animationOut);
+        makeAnimation(animationName, animationOut);
+        updatedAnimationOut = animationName;
+    }
+    else {
+        updatedAnimationOut = animationOut;
+    }
+    return {
+        animationIn: updatedAnimationIn,
+        animationOut: updatedAnimationOut,
+    };
+};
+export const reversePercentage = (x) => -(x - 1);
+const makeAnimation = (name, obj) => {
+    animatable.registerAnimation(name, animatable.createAnimation(obj));
+};
+const isObject = (obj) => {
+    return obj !== null && typeof obj === 'object';
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@ealimardani/react-native-modal",
+  "version": "14.3.0",
+  "description": "An enhanced React Native modal",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "test": "yarn run lint",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test:ts": "tsc --noEmit"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "native",
+    "modal",
+    "android",
+    "ios",
+    "backdrop",
+    "simple",
+    "animated"
+  ],
+  "authors": [
+    "Mazzarolo Matteo",
+    "Anthony Cyrille"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/react-native-modal/react-native-modal",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-modal/react-native-modal"
+  },
+  "dependencies": {
+    "react-native-animatable": "1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "husky": "^3.0.9",
+    "postinstall": "^0.5.1",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^2.0.0",
+    "react": "19.0.0",
+    "react-native": "0.78.0",
+    "typescript": "5.8.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.70.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}