@tkow/react-native-modal
Version: 
An enhanced React Native modal
101 lines (100 loc) • 4.23 kB
TypeScript
import * as React from 'react';
import { NativeSyntheticEvent, NativeTouchEvent, PanResponderGestureState, StyleProp, ViewProps, ViewStyle } from 'react-native';
import { Animation, CustomAnimation } from 'react-native-animatable';
export type OnSwipeCompleteParams = {
    swipingDirection: Direction;
};
export type ModalProps = ViewProps & {
    animationIn?: Animation | CustomAnimation;
    animationOut?: Animation | CustomAnimation;
    animationInTiming?: number;
    animationOutTiming?: number;
    avoidKeyboard?: boolean;
    coverScreen?: boolean;
    hasBackdrop?: boolean;
    backdropColor?: string;
    backdropOpacity?: number;
    backdropTransitionInTiming?: number;
    backdropTransitionOutTiming?: number;
    customBackdrop?: React.ReactNode;
    useNativeDriver?: boolean;
    deviceHeight?: number;
    deviceWidth?: 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?: () => boolean | null | undefined | void;
    scrollTo?: (_e: any) => void;
    scrollOffset?: number;
    scrollOffsetMax?: number;
    scrollHorizontal?: boolean;
    statusBarTranslucent?: boolean;
    supportedOrientations?: Orientation[];
    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;
};
export declare const defaultProps: {
    animationIn: "slideInUp";
    animationInTiming: number;
    animationOut: "slideOutDown";
    animationOutTiming: number;
    avoidKeyboard: false;
    coverScreen: true;
    hasBackdrop: true;
    backdropColor: string;
    backdropOpacity: number;
    backdropTransitionInTiming: number;
    backdropTransitionOutTiming: number;
    customBackdrop: null;
    useNativeDriver: false;
    hideModalContentWhileAnimating: false;
    propagateSwipe: false;
    isVisible: false;
    panResponderThreshold: number;
    swipeThreshold: number;
    onModalShow: () => null;
    onModalWillShow: () => null;
    onModalHide: () => null;
    onModalWillHide: () => null;
    onBackdropPress: () => null;
    onBackButtonPress: () => null;
    scrollOffset: number;
    scrollOffsetMax: number;
    scrollHorizontal: false;
    statusBarTranslucent: false;
    supportedOrientations: ("portrait" | "landscape")[];
};
type RequiredMergedPropsKeys = keyof typeof defaultProps | 'deviceHeight' | 'deviceWidth';
export type MergedModalProps = Omit<ModalProps, RequiredMergedPropsKeys> & Required<Pick<ModalProps, RequiredMergedPropsKeys>>;
export type SupportedAnimation = Animation | CustomAnimation;
export type Animations = {
    animationIn: Animation | CustomAnimation;
    animationOut: Animation | CustomAnimation;
};
export type CustomAnimationType = 'slideInDown' | 'slideInUp' | 'slideInLeft' | 'slideInRight' | 'slideOutDown' | 'slideOutUp' | 'slideOutLeft' | 'slideOutRight';
export type Orientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
export type Direction = 'up' | 'down' | 'left' | 'right';
export type AnimationEvent = (...args: any[]) => void;
export type PresentationStyle = 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
export type OnOrientationChange = (orientation: NativeSyntheticEvent<any>) => void;
export interface GestureResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {
}
export {};