react-native-modal

react-native-modal

Version 13.0.1
Published 2 years ago
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

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)

Peer Dependencies (2)

Badge

To add a badge like this oneto 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>

Updated 2 years ago.
Package analyzed in 1468 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-modal

Install

Overview

Index

Classes

Interfaces

Type Aliases

Classes

class ReactNativeModal

constructor

property animationIn

property animationOut

property backdropRef

property buildPanResponder

property calcDistancePercentage

property close

property contentRef

property createAnimationEventForSwipe

property currentSwipingDirection

property defaultProps

property didUpdateDimensionsEmitter

property getAccDistancePerDirection

property getDeviceHeight

property getDeviceWidth

property getSwipingDirection

property handleDimensionsUpdate

property inSwipeClosingState

property interactionHandle

property isDirectionIncluded

property isSwipeDirectionAllowed

property isTransitioning

property makeBackdrop

property onBackButtonPress

property open

property panResponder

property propTypes

property shouldPropagateSwipe

property state

method componentDidMount

method componentDidUpdate

method componentWillUnmount

method getDerivedStateFromProps

method render

Interfaces

interface GestureResponderEvent

Type Aliases

type AnimationEvent

type Animations

type Direction

type ModalProps

type OnOrientationChange

type OnSwipeCompleteParams

type Orientation

type PresentationStyle

type SupportedAnimation

Package Files (3)

Dependencies (2)

Dev Dependencies (25)

Peer Dependencies (2)

Badge