react-native-modals
v0.22.3
React Native Modals Library for IOS & Android.
dialogpopupreact dialogreact-nativereact-native-modalsreact-native-dialogreact native dialogmodalsreact-componentios
0/weekUpdated 3 years agoMITUnpacked: 12.4 MB
Published by jacklam
npm install react-native-modals
![npm]()
![npm]()
React Native Modals
React Native Modals Library for iOS & Android.
#### How to thank me ?
Just click on ⭐️ button 😘
BREAKING CHANGE
A lot of backward incompatible changes in
v0.22.0. Please, Read the Docs before upgrading to v0.22.0Installation
``
npm install --save react-native-modalsOR
yarn add react-native-modals
Exposed Modules
* Modal
* ButtomModal
* ModalPortal
* Backdrop
* ModalButton
* ModalContent
* ModalTitle
* ModalFooter
* Animation
* FadeAnimation
* ScaleAnimation
* SlideAnimation
* DragEvent,
* SwipeDirection,
* ModalProps
* ModalFooterProps
* ModalButtonProps
* ModalTitleProps
* ModalContentProps
* BackdropProps
Examples
Example
Setup - this is essential step
The Component can not be used until ModalPortal
is mounted.
You should register in your app root. For example:
`jsx
import { ModalPortal } from 'react-native-modals';
import { Provider } from 'react-redux';const Root = () => {
return (
);
}
`Basic Usage
jsx
import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'
onPress={() => {
this.setState({ visible: true });
}}
/>
onTouchOutside={() => {
this.setState({ visible: false });
}}
>
{...}
`Usage - Imperative APIs
show
jsx
import { ModalPortal } from 'react-native-modals';const id = ModalPortal.show((
{...}
));
`update
jsx
ModalPortal.update(id, {
children: (
Updated
),
});
`dismiss
jsx
ModalPortal.dismiss(id);
`dismissAll
jsx
ModalPortal.dismissAll(id);
`Usage - Animation
jsx
import { Modal, SlideAnimation, ModalContent } from 'react-native-modals';
modalAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
>
{...}
`Usage - Swipe
jsx
import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'
swipeDirection={['up', 'down']} // can be string or an array
swipeThreshold={200} // default 100
onSwipeOut={(event) => {
this.setState({ visible: false });
}}
>
{...}
`Usage - Modal Title
jsx
import { Modal, ModalTitle, ModalContent } from 'react-native-modals';
modalTitle={
>
{...}
`Usage - Modal Action
jsx
import { Modal, ModalFooter, ModalButton, ModalContent } from 'react-native-modals';
footer={
onPress={() => {}}
/>
onPress={() => {}}
/>
}
>
{...}
`
Props
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| | boolean | false | |
| rounded | boolean | true | |
| useNativeDriver | boolean | true | |
| children | any | | |
| modalTitle? | React Element | | You can pass a modalTitle component or pass a View for customizing titlebar |
| width? | Number | Your device width | The Width of modal, you can use fixed width or use percentage. For example 0.5 it means 50%
| | Number | 300 | The Height of modal, you can use fixed height or use percentage. For example 0.5 it means 50%
| | | FadeAnimation | animation for modal | |
| modalStyle? | any | | | |
| containerStyle? | any | null | For example: ` { zIndex: 10, elevation: 10 } ` | |
| animationDuration? | Number | 200 | | |
| overlayPointerEvents? | String | | Available option: auto, none |
| overlayBackgroundColor? | String | #000 |
| overlayOpacity? | Number | 0.5 |
| hasOverlay? | Boolean | true | | |
| onShow? | Function | | You can pass shown function as a callback function, will call the function when modal shown | |
| onDismiss? | Function | | You can pass onDismiss function as a callback function, will call the function when modal dismissed | |
| onTouchOutside? | Function | () => {} | | |
| onHardwareBackPress? | Function | () => true | Handle hardware button presses | |
| onMove? | Function | () => {} | | |
| onSwiping? | Function | () => {} | | |
| onSwipeRelease? | Function | () => {} | | |
| onSwipingOut? | Function | () => {} | | |
| onSwipeOut? | Function | | | |
| swipeDirection? | string or Array | [] | Available option: up, down, left, right | |
| swipeThreshold? | number | 100 | | |
| footer? | React Element | null | for example: ` | |$3
| Prop | Type | Default | Note |
|---|---|---|---|
| title | String | | | |
| style? | any | null | | |
| textStyle? | any | null | | |
| align? | String | center | Available option: left, center, right | |
| hasTitleBar? | Bool | true | | |
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| children | any | | | |
| style? | any | null | | |
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| children | ModalButton | | | |
| bordered? | Boolean | true | | |
| style? | any | null | | |
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| text | String | | | |
| onPress | Function | | | |
| align? | String | center | Available option: left, center, right | |
| style? | any | null | | |
| textStyle? | any | null | | |
| activeOpacity? | Number | 0.6 | | |
| disabled? | Boolean | false | | |
| bordered? | Boolean | false | | |
$3
| Prop | Type | Default | Note |
|---|---|---|---|
| visible | Boolean | | | |
| opacity | Number | 0.5 | | |
| onPress? | Function | | | |
| backgroundColor? | string | #000 | | |
| animationDuration? | Number | 200 | | |
| pointerEvents? | String | null | Available option: auto, none | |
| useNativeDriver? | Boolean | true | | |
Animation
$3
$3
##### Preview:
##### Example:
`javascript
new FadeAnimation({
initialValue: 0, // optional
animationDuration: 150, // optional
useNativeDriver: true, // optional
})
`
| Param | Type | Default | Note |
|---|---|---|---|
| | Number | 0 | |
| animationDuration? | Number | 150 | |
| useNativeDriver? | Boolean | true | |$3
##### Preview:
##### Example:
`javascript
new ScaleAnimation({
initialValue: 0, // optional
useNativeDriver: true, // optional
})
`
| Param | Type | Default | Note |
|---|---|---|---|
| | Number | 0 | |
| useNativeDriver | Boolean | true | |$3
##### Preview:
##### Example:
`javascript
new SlideAnimation({
initialValue: 0, // optional
slideFrom: 'bottom', // optional
useNativeDriver: true, // optional
})
`
| Param | Type | Default | Note |
|---|---|---|---|
| | Number | 0 | |
| slideFrom | String | bottom | Available option: top, bottom, left, right |
| useNativeDriver | Boolean | true | |$3
##### Example:
`javascript
import { Animated } from 'react-native';
import { Animation } from 'react-native-modals';class CustomAnimation extends Animation {
in(onFinished) {
Animated.spring(this.animate, {
toValue: 1,
useNativeDriver: this.useNativeDriver,
}).start(onFinished);
}
out(onFinished) {
Animated.spring(this.animate, {
toValue: 0,
useNativeDriver: this.useNativeDriver,
}).start(onFinished);
}
getAnimations() {
return {
transform: [{
translateY: this.animate.interpolate({
inputRange: [0, 1],
outputRange: [800, 1],
}),
}],
};
}
}
`Development