react-native-modal
- Version 14.0.0-rc.1
- Published
- 57.7 kB
- 1 dependency
- MIT license
Install
npm i react-native-modalyarn add react-native-modalpnpm add react-native-modalOverview
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 3045 ms. - Missing or incorrect documentation? Open an issue for this package.
