react-native-modal

  • Version 13.0.1
  • Published
  • 72.7 kB
  • 2 dependencies
  • MIT license

Install

npm i react-native-modal
yarn add react-native-modal
pnpm add react-native-modal

Overview

An enhanced React Native modal

Index

Classes

class ReactNativeModal

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

    constructor

    constructor(props: any);

      property animationIn

      animationIn: string;

        property animationOut

        animationOut: string;

          property backdropRef

          backdropRef: any;

            property buildPanResponder

            buildPanResponder: () => void;

              property calcDistancePercentage

              calcDistancePercentage: (gestureState: PanResponderGestureState) => number;

                property close

                close: () => void;

                  property contentRef

                  contentRef: any;

                    property createAnimationEventForSwipe

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

                      property currentSwipingDirection

                      currentSwipingDirection: Direction;

                        property defaultProps

                        static defaultProps: {
                        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
                        >;
                        animationInTiming: number;
                        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
                        >;
                        animationOutTiming: number;
                        avoidKeyboard: boolean;
                        coverScreen: boolean;
                        hasBackdrop: boolean;
                        backdropColor: string;
                        backdropOpacity: number;
                        backdropTransitionInTiming: number;
                        backdropTransitionOutTiming: number;
                        customBackdrop: React.ReactNode;
                        useNativeDriver: boolean;
                        deviceHeight: number | null;
                        deviceWidth: number | null;
                        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: (e: any) => void;
                        scrollOffset: number;
                        scrollOffsetMax: number;
                        scrollHorizontal: boolean;
                        statusBarTranslucent: boolean;
                        supportedOrientations: (
                        | 'landscape'
                        | 'portrait'
                        | 'portrait-upside-down'
                        | 'landscape-left'
                        | 'landscape-right'
                        )[];
                        };

                          property didUpdateDimensionsEmitter

                          didUpdateDimensionsEmitter: EmitterSubscription;

                            property getAccDistancePerDirection

                            getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;

                              property getDeviceHeight

                              getDeviceHeight: () => number;

                                property getDeviceWidth

                                getDeviceWidth: () => number;

                                  property getSwipingDirection

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

                                    property handleDimensionsUpdate

                                    handleDimensionsUpdate: () => void;

                                      property inSwipeClosingState

                                      inSwipeClosingState: boolean;

                                        property interactionHandle

                                        interactionHandle: number;

                                          property isDirectionIncluded

                                          isDirectionIncluded: (direction: Direction) => boolean;

                                            property isSwipeDirectionAllowed

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

                                              property isTransitioning

                                              isTransitioning: boolean;

                                                property makeBackdrop

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

                                                  property onBackButtonPress

                                                  onBackButtonPress: () => boolean;

                                                    property open

                                                    open: () => void;

                                                      property panResponder

                                                      panResponder: PanResponderInstance;

                                                        property propTypes

                                                        static propTypes: {
                                                        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<any>;
                                                        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[]>;
                                                        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[]>;
                                                        };

                                                          property shouldPropagateSwipe

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

                                                            property state

                                                            state: State;

                                                              method componentDidMount

                                                              componentDidMount: () => void;

                                                                method componentDidUpdate

                                                                componentDidUpdate: (prevProps: ModalProps) => void;

                                                                  method componentWillUnmount

                                                                  componentWillUnmount: () => void;

                                                                    method getDerivedStateFromProps

                                                                    static getDerivedStateFromProps: (
                                                                    nextProps: Readonly<ModalProps>,
                                                                    state: State
                                                                    ) => { isVisible: boolean; showContent: boolean } | null;

                                                                      method render

                                                                      render: () => JSX.Element;

                                                                        Interfaces

                                                                        interface GestureResponderEvent

                                                                        interface GestureResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {}

                                                                          Type Aliases

                                                                          type AnimationEvent

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

                                                                            type Animations

                                                                            type Animations = {
                                                                            animationIn: string;
                                                                            animationOut: string;
                                                                            };

                                                                              type Direction

                                                                              type Direction = 'up' | 'down' | 'left' | 'right';

                                                                                type ModalProps

                                                                                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;

                                                                                  type OnOrientationChange

                                                                                  type OnOrientationChange = (orientation: NativeSyntheticEvent<any>) => void;

                                                                                    type OnSwipeCompleteParams

                                                                                    type OnSwipeCompleteParams = {
                                                                                    swipingDirection: Direction;
                                                                                    };

                                                                                      type Orientation

                                                                                      type Orientation =
                                                                                      | 'portrait'
                                                                                      | 'portrait-upside-down'
                                                                                      | 'landscape'
                                                                                      | 'landscape-left'
                                                                                      | 'landscape-right';

                                                                                        type PresentationStyle

                                                                                        type PresentationStyle = 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';

                                                                                          type SupportedAnimation

                                                                                          type SupportedAnimation = Animation | CustomAnimation;

                                                                                            Package Files (3)

                                                                                            Dependencies (2)

                                                                                            Dev Dependencies (25)

                                                                                            Peer Dependencies (2)

                                                                                            Badge

                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-modal.

                                                                                            • Markdown
                                                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-modal)
                                                                                            • HTML
                                                                                              <a href="https://www.jsdocs.io/package/react-native-modal"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>