react-native-modal

  • Version 14.0.0-rc.0
  • Published
  • 57.3 kB
  • 1 dependency
  • 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: 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: (e: any) => void;
                        scrollOffset: number;
                        scrollOffsetMax: number;
                        scrollHorizontal: boolean;
                        statusBarTranslucent: boolean;
                        supportedOrientations: Orientation[];
                        };

                          property didUpdateDimensionsEmitter

                          didUpdateDimensionsEmitter: EmitterSubscription;

                            property getAccDistancePerDirection

                            getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;

                              property getDeviceHeight

                              getDeviceHeight: () => number;

                                property getDeviceWidth

                                getDeviceWidth: () => number;

                                  property getSwipingDirection

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

                                    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: () => React.JSX.Element | null;

                                                  property onBackButtonPress

                                                  onBackButtonPress: () => boolean;

                                                    property open

                                                    open: () => void;

                                                      property panResponder

                                                      panResponder: PanResponderInstance;

                                                        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: () => React.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 (1)

                                                                                          Dev Dependencies (8)

                                                                                          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>