| 1 | import * as React from 'react';
|
| 2 | import { Animated, EmitterSubscription, PanResponderGestureState, PanResponderInstance, StyleProp, ViewStyle, ViewProps } from 'react-native';
|
| 3 | import * as PropTypes from 'prop-types';
|
| 4 | import * as animatable from 'react-native-animatable';
|
| 5 | import { Direction, OrNull, PresentationStyle, OnOrientationChange, GestureResponderEvent } from './types';
|
| 6 | export declare type OnSwipeCompleteParams = {
|
| 7 | swipingDirection: Direction;
|
| 8 | };
|
| 9 | declare type State = {
|
| 10 | showContent: boolean;
|
| 11 | isVisible: boolean;
|
| 12 | deviceWidth: number;
|
| 13 | deviceHeight: number;
|
| 14 | isSwipeable: boolean;
|
| 15 | pan: OrNull<Animated.ValueXY>;
|
| 16 | };
|
| 17 | declare const defaultProps: {
|
| 18 | animationIn: "bounce" | "flash" | "jello" | "pulse" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY" | "lightSpeedIn" | "lightSpeedOut" | "slideInDown" | "slideInUp" | "slideInLeft" | "slideInRight" | "slideOutDown" | "slideOutUp" | "slideOutLeft" | "slideOutRight" | "zoomIn" | "zoomInDown" | "zoomInUp" | "zoomInLeft" | "zoomInRight" | "zoomOut" | "zoomOutDown" | "zoomOutUp" | "zoomOutLeft" | "zoomOutRight" | animatable.CustomAnimation<import("react-native").TextStyle & ViewStyle & import("react-native").ImageStyle>;
|
| 19 | animationInTiming: number;
|
| 20 | animationOut: "bounce" | "flash" | "jello" | "pulse" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY" | "lightSpeedIn" | "lightSpeedOut" | "slideInDown" | "slideInUp" | "slideInLeft" | "slideInRight" | "slideOutDown" | "slideOutUp" | "slideOutLeft" | "slideOutRight" | "zoomIn" | "zoomInDown" | "zoomInUp" | "zoomInLeft" | "zoomInRight" | "zoomOut" | "zoomOutDown" | "zoomOutUp" | "zoomOutLeft" | "zoomOutRight" | animatable.CustomAnimation<import("react-native").TextStyle & ViewStyle & import("react-native").ImageStyle>;
|
| 21 | animationOutTiming: number;
|
| 22 | avoidKeyboard: boolean;
|
| 23 | coverScreen: boolean;
|
| 24 | hasBackdrop: boolean;
|
| 25 | backdropColor: string;
|
| 26 | backdropOpacity: number;
|
| 27 | backdropTransitionInTiming: number;
|
| 28 | backdropTransitionOutTiming: number;
|
| 29 | customBackdrop: React.ReactNode;
|
| 30 | useNativeDriver: boolean;
|
| 31 | deviceHeight: number | null;
|
| 32 | deviceWidth: number | null;
|
| 33 | hideModalContentWhileAnimating: boolean;
|
| 34 | propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);
|
| 35 | isVisible: boolean;
|
| 36 | panResponderThreshold: number;
|
| 37 | swipeThreshold: number;
|
| 38 | onModalShow: () => void;
|
| 39 | onModalWillShow: () => void;
|
| 40 | onModalHide: () => void;
|
| 41 | onModalWillHide: () => void;
|
| 42 | onBackdropPress: () => void;
|
| 43 | onBackButtonPress: () => void;
|
| 44 | scrollTo: OrNull<(e: any) => void>;
|
| 45 | scrollOffset: number;
|
| 46 | scrollOffsetMax: number;
|
| 47 | scrollHorizontal: boolean;
|
| 48 | statusBarTranslucent: boolean;
|
| 49 | supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[];
|
| 50 | };
|
| 51 | export declare type ModalProps = ViewProps & {
|
| 52 | children: React.ReactNode;
|
| 53 | onSwipeStart?: (gestureState: PanResponderGestureState) => void;
|
| 54 | onSwipeMove?: (percentageShown: number, gestureState: PanResponderGestureState) => void;
|
| 55 | onSwipeComplete?: (params: OnSwipeCompleteParams, gestureState: PanResponderGestureState) => void;
|
| 56 | onSwipeCancel?: (gestureState: PanResponderGestureState) => void;
|
| 57 | style?: StyleProp<ViewStyle>;
|
| 58 | swipeDirection?: Direction | Array<Direction>;
|
| 59 | onDismiss?: () => void;
|
| 60 | onShow?: () => void;
|
| 61 | hardwareAccelerated?: boolean;
|
| 62 | onOrientationChange?: OnOrientationChange;
|
| 63 | presentationStyle?: PresentationStyle;
|
| 64 | useNativeDriverForBackdrop?: boolean;
|
| 65 | } & typeof defaultProps;
|
| 66 | export declare class ReactNativeModal extends React.Component<ModalProps, State> {
|
| 67 | static propTypes: {
|
| 68 | animationIn: PropTypes.Requireable<string | object>;
|
| 69 | animationInTiming: PropTypes.Requireable<number>;
|
| 70 | animationOut: PropTypes.Requireable<string | object>;
|
| 71 | animationOutTiming: PropTypes.Requireable<number>;
|
| 72 | avoidKeyboard: PropTypes.Requireable<boolean>;
|
| 73 | coverScreen: PropTypes.Requireable<boolean>;
|
| 74 | hasBackdrop: PropTypes.Requireable<boolean>;
|
| 75 | backdropColor: PropTypes.Requireable<string>;
|
| 76 | backdropOpacity: PropTypes.Requireable<number>;
|
| 77 | backdropTransitionInTiming: PropTypes.Requireable<number>;
|
| 78 | backdropTransitionOutTiming: PropTypes.Requireable<number>;
|
| 79 | customBackdrop: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
| 80 | children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
| 81 | deviceHeight: PropTypes.Requireable<number>;
|
| 82 | deviceWidth: PropTypes.Requireable<number>;
|
| 83 | isVisible: PropTypes.Validator<boolean>;
|
| 84 | hideModalContentWhileAnimating: PropTypes.Requireable<boolean>;
|
| 85 | propagateSwipe: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
|
| 86 | onModalShow: PropTypes.Requireable<(...args: any[]) => any>;
|
| 87 | onModalWillShow: PropTypes.Requireable<(...args: any[]) => any>;
|
| 88 | onModalHide: PropTypes.Requireable<(...args: any[]) => any>;
|
| 89 | onModalWillHide: PropTypes.Requireable<(...args: any[]) => any>;
|
| 90 | onBackButtonPress: PropTypes.Requireable<(...args: any[]) => any>;
|
| 91 | onBackdropPress: PropTypes.Requireable<(...args: any[]) => any>;
|
| 92 | panResponderThreshold: PropTypes.Requireable<number>;
|
| 93 | onSwipeStart: PropTypes.Requireable<(...args: any[]) => any>;
|
| 94 | onSwipeMove: PropTypes.Requireable<(...args: any[]) => any>;
|
| 95 | onSwipeComplete: PropTypes.Requireable<(...args: any[]) => any>;
|
| 96 | onSwipeCancel: PropTypes.Requireable<(...args: any[]) => any>;
|
| 97 | swipeThreshold: PropTypes.Requireable<number>;
|
| 98 | swipeDirection: PropTypes.Requireable<string | (string | null | undefined)[]>;
|
| 99 | useNativeDriver: PropTypes.Requireable<boolean>;
|
| 100 | useNativeDriverForBackdrop: PropTypes.Requireable<boolean>;
|
| 101 | style: PropTypes.Requireable<any>;
|
| 102 | scrollTo: PropTypes.Requireable<(...args: any[]) => any>;
|
| 103 | scrollOffset: PropTypes.Requireable<number>;
|
| 104 | scrollOffsetMax: PropTypes.Requireable<number>;
|
| 105 | scrollHorizontal: PropTypes.Requireable<boolean>;
|
| 106 | supportedOrientations: PropTypes.Requireable<(string | null | undefined)[]>;
|
| 107 | };
|
| 108 | static defaultProps: {
|
| 109 | animationIn: "bounce" | "flash" | "jello" | "pulse" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY" | "lightSpeedIn" | "lightSpeedOut" | "slideInDown" | "slideInUp" | "slideInLeft" | "slideInRight" | "slideOutDown" | "slideOutUp" | "slideOutLeft" | "slideOutRight" | "zoomIn" | "zoomInDown" | "zoomInUp" | "zoomInLeft" | "zoomInRight" | "zoomOut" | "zoomOutDown" | "zoomOutUp" | "zoomOutLeft" | "zoomOutRight" | animatable.CustomAnimation<import("react-native").TextStyle & ViewStyle & import("react-native").ImageStyle>;
|
| 110 | animationInTiming: number;
|
| 111 | animationOut: "bounce" | "flash" | "jello" | "pulse" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY" | "lightSpeedIn" | "lightSpeedOut" | "slideInDown" | "slideInUp" | "slideInLeft" | "slideInRight" | "slideOutDown" | "slideOutUp" | "slideOutLeft" | "slideOutRight" | "zoomIn" | "zoomInDown" | "zoomInUp" | "zoomInLeft" | "zoomInRight" | "zoomOut" | "zoomOutDown" | "zoomOutUp" | "zoomOutLeft" | "zoomOutRight" | animatable.CustomAnimation<import("react-native").TextStyle & ViewStyle & import("react-native").ImageStyle>;
|
| 112 | animationOutTiming: number;
|
| 113 | avoidKeyboard: boolean;
|
| 114 | coverScreen: boolean;
|
| 115 | hasBackdrop: boolean;
|
| 116 | backdropColor: string;
|
| 117 | backdropOpacity: number;
|
| 118 | backdropTransitionInTiming: number;
|
| 119 | backdropTransitionOutTiming: number;
|
| 120 | customBackdrop: React.ReactNode;
|
| 121 | useNativeDriver: boolean;
|
| 122 | deviceHeight: number | null;
|
| 123 | deviceWidth: number | null;
|
| 124 | hideModalContentWhileAnimating: boolean;
|
| 125 | propagateSwipe: boolean | ((event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean);
|
| 126 | isVisible: boolean;
|
| 127 | panResponderThreshold: number;
|
| 128 | swipeThreshold: number;
|
| 129 | onModalShow: () => void;
|
| 130 | onModalWillShow: () => void;
|
| 131 | onModalHide: () => void;
|
| 132 | onModalWillHide: () => void;
|
| 133 | onBackdropPress: () => void;
|
| 134 | onBackButtonPress: () => void;
|
| 135 | scrollTo: OrNull<(e: any) => void>;
|
| 136 | scrollOffset: number;
|
| 137 | scrollOffsetMax: number;
|
| 138 | scrollHorizontal: boolean;
|
| 139 | statusBarTranslucent: boolean;
|
| 140 | supportedOrientations: ("landscape" | "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right")[];
|
| 141 | };
|
| 142 | state: State;
|
| 143 | isTransitioning: boolean;
|
| 144 | inSwipeClosingState: boolean;
|
| 145 | currentSwipingDirection: OrNull<Direction>;
|
| 146 | animationIn: string;
|
| 147 | animationOut: string;
|
| 148 | backdropRef: any;
|
| 149 | contentRef: any;
|
| 150 | panResponder: OrNull<PanResponderInstance>;
|
| 151 | didUpdateDimensionsEmitter: OrNull<EmitterSubscription>;
|
| 152 | interactionHandle: OrNull<number>;
|
| 153 | constructor(props: ModalProps);
|
| 154 | static getDerivedStateFromProps(nextProps: ModalProps, state: State): {
|
| 155 | isVisible: boolean;
|
| 156 | showContent: boolean;
|
| 157 | } | null;
|
| 158 | componentDidMount(): void;
|
| 159 | componentWillUnmount(): void;
|
| 160 | componentDidUpdate(prevProps: ModalProps): void;
|
| 161 | getDeviceHeight: () => number;
|
| 162 | getDeviceWidth: () => number;
|
| 163 | onBackButtonPress: () => boolean;
|
| 164 | shouldPropagateSwipe: (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;
|
| 165 | buildPanResponder: () => void;
|
| 166 | getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;
|
| 167 | getSwipingDirection: (gestureState: PanResponderGestureState) => "left" | "right" | "up" | "down";
|
| 168 | calcDistancePercentage: (gestureState: PanResponderGestureState) => number;
|
| 169 | createAnimationEventForSwipe: () => (...args: any[]) => void;
|
| 170 | isDirectionIncluded: (direction: Direction) => boolean;
|
| 171 | isSwipeDirectionAllowed: ({ dy, dx }: PanResponderGestureState) => boolean;
|
| 172 | handleDimensionsUpdate: () => void;
|
| 173 | open: () => void;
|
| 174 | close: () => void;
|
| 175 | makeBackdrop: () => JSX.Element | null;
|
| 176 | render(): JSX.Element;
|
| 177 | }
|
| 178 | export default ReactNativeModal;
|