Modal
Modal dialogs.
import { Modal } from '@redshank/native';
When To Use
When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use Pop Confirm, and so on.
Examples
Modal
Default Modal element.
Position Top/Bottom
Position Modal element.
Scroll Modal
Scroll in Modal element.
Hidden StatusBar
Hidden StatusBar in iOS and Android.
Mask Closable
Closable modal when press outside Modal content.
With Extra Content
With extra content prop.
APIs
Modal
Api props extends from Modal
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| animationType | Enum | fade | slide | none |
| buttonCloseStyle | object | StyleProp<ViewStyle> | Style for close button | - |
| children | ReactNode | Component JSX.ELement | Content for show in the modal | - |
| closable | boolean | true false | Show or hidden close button | false |
| closeIconProps | object | IconProps | Props for Icon close, change name or type icon | - |
| contentContainerStyle | object | StyleProp<ViewStyle> | Style for scrollview in modal | - |
| contentStyle | object | StyleProp<ViewStyle> | Style of the scrollView | - |
| extra | ReactNode JSX.Element | Component | Extra content in bottom modal | - |
| fullScreen | boolean | true false | Show content in full screen | false |
| hiddenBar | boolean | true false | Show or hidden statusbar in mobiles | false |
| maskClosable | boolean | true false | Allow close modal when press outside modal | false |
| maskComponent | Component FunctionComponent | JSX.Element Component | Change component mask modal | View if maskClosable then TouchableOpacity |
| maskStyle | object | StyleProp<ViewStyle> | Style of the mask component | - |
| onClose | function | () => void | Required function for close modal | - |
| position | PositionType | top center bottom | Position of the modal, when fullScreen is false | center |
| scrollable | boolean | true false | Can scroll in modal content | false |
| visible | boolean | true false | Required controller show or hidden modal | - |
useModal
Api for show or hidden modal with hook.
Basic use
const [visible, toggleModal] = Modal.useModal();
Completed use
const [ visible, toggleModal, { onVisible, onHidden } ] = Modal.useModal();
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.