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
ReactNativeModal
- animationIn
- animationOut
- backdropRef
- buildPanResponder
- calcDistancePercentage
- close
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- contentRef
- createAnimationEventForSwipe
- currentSwipingDirection
- defaultProps
- didUpdateDimensionsEmitter
- getAccDistancePerDirection
- getDerivedStateFromProps()
- getDeviceHeight
- getDeviceWidth
- getSwipingDirection
- handleDimensionsUpdate
- inSwipeClosingState
- interactionHandle
- isDirectionIncluded
- isSwipeDirectionAllowed
- isTransitioning
- makeBackdrop
- onBackButtonPress
- open
- panResponder
- render()
- shouldPropagateSwipe
- state
Interfaces
Type Aliases
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 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[](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 .
Package analyzed in 2845 ms. - Missing or incorrect documentation? Open an issue for this package.