rewieer

brentvatne

mmazzarolo

react-native-community-bot

titozzz

react-native-modal

import { Animated, PanResponderGestureState, PanResponderInstance, StyleProp, ViewStyle, ViewProps } from 'react-native';

import * as animatable from 'react-native-animatable';

import { Direction, OrNull, PresentationStyle, OnOrientationChange, GestureResponderEvent } from './types';

export declare type OnSwipeCompleteParams = {

    hideModalContentWhileAnimating: boolean;

    propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);

    supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[];

export declare type ModalProps = ViewProps & {

    onSwipeStart?: (gestureState: PanResponderGestureState) => void;

    onSwipeMove?: (percentageShown: number, gestureState: PanResponderGestureState) => void;

    onSwipeComplete?: (params: OnSwipeCompleteParams, gestureState: PanResponderGestureState) => void;

    onSwipeCancel?: (gestureState: PanResponderGestureState) => void;

    swipeDirection?: Direction | Array<Direction>;

    onOrientationChange?: OnOrientationChange;

    presentationStyle?: PresentationStyle;

    useNativeDriverForBackdrop?: boolean;

export declare class ReactNativeModal extends React.Component<ModalProps, State> {

        animationIn: PropTypes.Requireable<string | object>;

        animationInTiming: PropTypes.Requireable<number>;

        animationOut: PropTypes.Requireable<string | object>;

        animationOutTiming: PropTypes.Requireable<number>;

        avoidKeyboard: PropTypes.Requireable<boolean>;

        coverScreen: PropTypes.Requireable<boolean>;

        hasBackdrop: PropTypes.Requireable<boolean>;

        backdropColor: PropTypes.Requireable<string>;

        backdropOpacity: PropTypes.Requireable<number>;

        backdropTransitionInTiming: PropTypes.Requireable<number>;

        backdropTransitionOutTiming: PropTypes.Requireable<number>;

        customBackdrop: PropTypes.Requireable<PropTypes.ReactNodeLike>;

        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

        deviceHeight: PropTypes.Requireable<number>;

        deviceWidth: PropTypes.Requireable<number>;

        isVisible: PropTypes.Validator<boolean>;

        hideModalContentWhileAnimating: PropTypes.Requireable<boolean>;

        propagateSwipe: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;

        onModalShow: PropTypes.Requireable<(...args: any[]) => any>;

        onModalWillShow: PropTypes.Requireable<(...args: any[]) => any>;

        onModalHide: PropTypes.Requireable<(...args: any[]) => any>;

        onModalWillHide: PropTypes.Requireable<(...args: any[]) => any>;

        onBackButtonPress: PropTypes.Requireable<(...args: any[]) => any>;

        onBackdropPress: PropTypes.Requireable<(...args: any[]) => any>;

        panResponderThreshold: PropTypes.Requireable<number>;

        onSwipeStart: PropTypes.Requireable<(...args: any[]) => any>;

        onSwipeMove: PropTypes.Requireable<(...args: any[]) => any>;

        onSwipeComplete: PropTypes.Requireable<(...args: any[]) => any>;

        onSwipeCancel: PropTypes.Requireable<(...args: any[]) => any>;

        swipeThreshold: PropTypes.Requireable<number>;

        swipeDirection: PropTypes.Requireable<string | (string | null | undefined)[]>;

        useNativeDriver: PropTypes.Requireable<boolean>;

        useNativeDriverForBackdrop: PropTypes.Requireable<boolean>;

        style: PropTypes.Requireable<any>;

        scrollTo: PropTypes.Requireable<(...args: any[]) => any>;

        scrollOffset: PropTypes.Requireable<number>;

        scrollOffsetMax: PropTypes.Requireable<number>;

        scrollHorizontal: PropTypes.Requireable<boolean>;

        supportedOrientations: PropTypes.Requireable<(string | null | undefined)[]>;

        backdropTransitionInTiming: number;

        backdropTransitionOutTiming: number;

        hideModalContentWhileAnimating: boolean;

        propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);

        scrollTo: OrNull<(e: any) => void>;

        supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[];

    currentSwipingDirection: OrNull<Direction>;

    panResponder: OrNull<PanResponderInstance>;

    static getDerivedStateFromProps(nextProps: ModalProps, state: State): {

    componentDidUpdate(prevProps: ModalProps): void;

    shouldPropagateSwipe: (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;

    getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;

    getSwipingDirection: (gestureState: PanResponderGestureState) => "left" | "right" | "up" | "down";

    calcDistancePercentage: (gestureState: PanResponderGestureState) => number;

    createAnimationEventForSwipe: () => (...args: any[]) => void;

    isDirectionIncluded: (direction: Direction) => boolean;

    isSwipeDirectionAllowed: ({ dy, dx }: PanResponderGestureState) => boolean;

    makeBackdrop: () => JSX.Element | null;

import { Animated, DeviceEventEmitter, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, PanResponder, BackHandler, Platform, TouchableWithoutFeedback, View, } from 'react-native';

import { initializeAnimations, buildAnimations, reversePercentage, } from './utils';

// Override default react-native-animatable animations

    hideModalContentWhileAnimating: false,

    supportedOrientations: ['portrait', 'landscape'],

const extractAnimationFromProps = (props) => ({

export class ReactNativeModal extends React.Component {

        // We use an internal state for keeping track of the modal visibility: this allows us to keep

        // the modal visible during the exit animation, even if the user has already change the

        // We store in the state the device width and height so that we can update the modal on

            deviceWidth: Dimensions.get('window').width,

            deviceHeight: Dimensions.get('window').height,

            isSwipeable: !!this.props.swipeDirection,

        this.inSwipeClosingState = false;

        this.currentSwipingDirection = null;

        this.getDeviceHeight = () => this.props.deviceHeight || this.state.deviceHeight;

        this.getDeviceWidth = () => this.props.deviceWidth || this.state.deviceWidth;

            if (this.props.onBackButtonPress && this.props.isVisible) {

                this.props.onBackButtonPress();

        this.shouldPropagateSwipe = (evt, gestureState) => {

            return typeof this.props.propagateSwipe === 'function'

                ? this.props.propagateSwipe(evt, gestureState)

                : this.props.propagateSwipe;

            this.panResponder = PanResponder.create({

                onMoveShouldSetPanResponder: (evt, gestureState) => {

                    // Use propagateSwipe to allow inner content to scroll. See PR:

                    // https://github.com/react-native-community/react-native-modal/pull/246

                    if (!this.shouldPropagateSwipe(evt, gestureState)) {

                        // The number "4" is just a good tradeoff to make the panResponder

                        // work correctly even when the modal has touchable buttons.

                        // However, if you want to overwrite this and choose for yourself,

                        // set panResponderThreshold in the props.

                        // For reference:

                        // https://github.com/react-native-community/react-native-modal/pull/197

                        const shouldSetPanResponder = Math.abs(gestureState.dx) >= this.props.panResponderThreshold ||

                            Math.abs(gestureState.dy) >= this.props.panResponderThreshold;

                        if (shouldSetPanResponder && this.props.onSwipeStart) {

                            this.props.onSwipeStart(gestureState);

                        this.currentSwipingDirection = this.getSwipingDirection(gestureState);

                        animEvt = this.createAnimationEventForSwipe();

                        return shouldSetPanResponder;

                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) {

                        return false; // user needs to be able to scroll content back up

                    if (this.props.onSwipeStart) {

                        this.props.onSwipeStart(gestureState);

                    // Cleared so that onPanResponderMove can wait to have some delta

                    this.currentSwipingDirection = null;

                onPanResponderMove: (evt, gestureState) => {

                    // Using onStartShouldSetPanResponder we don't have any delta so we don't know

                    // The direction to which the user is swiping until some move have been done

                    if (!this.currentSwipingDirection) {

                        if (gestureState.dx === 0 && gestureState.dy === 0) {

                    if (this.isSwipeDirectionAllowed(gestureState)) {

                        // Dim the background while swiping the modal

                        const newOpacityFactor = 1 - this.calcDistancePercentage(gestureState);

                        this.backdropRef &&

                            this.backdropRef.transitionTo({

                                opacity: this.props.backdropOpacity * newOpacityFactor,

                        animEvt(evt, gestureState);

                        if (this.props.onSwipeMove) {

                            this.props.onSwipeMove(newOpacityFactor, gestureState);

  "description": "An enhanced React Native modal",

    "lint": "eslint \"src/**/*.{ts, tsx}\"",

    "test": "yarn run test:ts && yarn run lint",

    "build:e2e:android:debug": "detox build -c android.emu.debug",

    "build:e2e:android:release": "detox build -c android.emu.release",

    "test:e2e:android:debug": "detox test -c android.emu.debug",

    "test:e2e:android:release": "detox test -c android.emu.release",

    "build:e2e:ios:debug": "detox build -c ios.sim.debug",

    "build:e2e:ios:release": "detox build -c ios.sim.release",

    "test:e2e:ios:debug": "detox test -c ios.sim.debug",

    "test:e2e:ios:release": "detox test -c ios.sim.release"

      "pre-commit": "pretty-quick --staged"

  "homepage": "https://github.com/react-native-community/react-native-modal",

    "url": "https://github.com/react-native-community/react-native-modal"

    "@react-native-community/eslint-config": "^0.0.5",

    "@typescript-eslint/eslint-plugin": "^2.4.0",

    "@typescript-eslint/parser": "^2.4.0",

    "babel-plugin-module-resolver": "3.1.3",

    "metro-react-native-babel-preset": "0.56.0",

    "runner-config": "example/e2e/config.json",

        "binaryPath": "example/ios/build/Build/Products/Debug-iphonesimulator/ModalExample.app",

        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace example/ios/ModalExample.xcworkspace -scheme ModalExample -configuration Debug -sdk iphonesimulator -derivedDataPath example/ios/build -UseModernBuildSystem=YES | xcpretty -k",

        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace example/ios/ModalExample.xcworkspace -scheme ModalExample -configuration Release -sdk iphonesimulator -derivedDataPath example/ios/build -UseModernBuildSystem=YES | xcpretty -k",

		@@ -48,2 +48,3 @@ import * as React from 'react';
		scrollHorizontal: boolean;
		statusBarTranslucent: boolean;
		supportedOrientations: ("landscape" \| "portrait" \| "portrait-upside-down" \| "landscape-left" \| "landscape-right")[];
		@@ -139,2 +140,3 @@ };
		scrollHorizontal: boolean;
		statusBarTranslucent: boolean;
		supportedOrientations: ("landscape" \| "portrait" \| "portrait-upside-down" \| "landscape-left" \| "landscape-right")[];
		@@ -141,0 +143,0 @@ };

		@@ -40,2 +40,3 @@ import * as React from 'react';
		scrollHorizontal: false,
		statusBarTranslucent: false,
		supportedOrientations: ['portrait', 'landscape'],
		@@ -42,0 +43,0 @@ };

		{
		"name": "react-native-modal",
		"version": "12.0.1",
		"version": "12.0.2",
		"description": "An enhanced React Native modal",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

Improved metrics