douglasjunior / React Native Simple Dialogs
Licence: mit
⚛ Cross-platform React Native dialogs based on the Modal component
Stars: ✭ 218
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Simple Dialogs
Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (-31.65%)
Mutual labels: dialog, modal, popup
Sweetalert
A beautiful replacement for JavaScript's "alert"
Stars: ✭ 21,871 (+9932.57%)
Mutual labels: dialog, modal, popup
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-90.37%)
Mutual labels: modal, dialog, popup
vue-modal
A customizable, stackable, and lightweight modal component for Vue.
Stars: ✭ 96 (-55.96%)
Mutual labels: modal, dialog, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-54.13%)
Mutual labels: dialog, modal, popup
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-86.24%)
Mutual labels: modal, dialog, popup
Popupdialog
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.
Stars: ✭ 3,709 (+1601.38%)
Mutual labels: dialog, modal, popup
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (+13.3%)
Mutual labels: dialog, modal, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+473.85%)
Mutual labels: dialog, modal, popup
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-64.22%)
Mutual labels: dialog, modal, popup
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (+177.06%)
Mutual labels: modal, dialog, popup
Svelte Simple Modal
A simple, small, and content-agnostic modal for Svelte v3
Stars: ✭ 130 (-40.37%)
Mutual labels: dialog, modal, popup
vue-modal
Reusable Modal component, supports own custom HTML, text and classes.
Stars: ✭ 29 (-86.7%)
Mutual labels: modal, dialog, popup
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-93.58%)
Mutual labels: modal, dialog, popup
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (-66.06%)
Mutual labels: modal, dialog, popup
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+17.43%)
Mutual labels: hacktoberfest, dialog, modal
React Native Alert Pro
The Pro Version of React Native Alert (Android & iOS)
Stars: ✭ 69 (-68.35%)
Mutual labels: dialog, modal, popup
React Native Push Notification Popup
A <NotificationPopup/> component for presenting your own push notification in react-native app
Stars: ✭ 111 (-49.08%)
Mutual labels: dialog, modal, popup
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+999.54%)
Mutual labels: dialog, modal, popup
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+781.65%)
Mutual labels: dialog, modal
React Native Simple Dialogs
⚛ Cross-platform React Native dialogs based on the Modal component.
Features
Expo Snack
Screenshots
Android | iOS |
---|---|
Requirements
- React Native >= 0.44.0
NOTES
- for RN 0.58.0 or later use [email protected]
- for RN 0.56.0 ... 0.57.8 use [email protected]
- for RN 0.44.0 ... 0.55.4, use [email protected]
Install
yarn add react-native-simple-dialogs
Or
npm i -S react-native-simple-dialogs
Use
Custom Dialog
import { Dialog } from 'react-native-simple-dialogs';
<Dialog
visible={this.state.dialogVisible}
title="Custom Dialog"
onTouchOutside={() => this.setState({dialogVisible: false})} >
<View>
// your content here
</View>
</Dialog>
Available props
Name | Type | Default | Description |
---|---|---|---|
visible | Boolean | false | Show the modal? |
onRequestClose | Function | null | Callback that's called when users taps the hardware back button on Android |
animationType | Enum('none', 'slide', 'fade') | 'none' | Controls how the modal animates |
onShow | Function | null | Callback that's called once the modal has been shown |
onOrientationChange | Function | null | Callback that's called when the orientation change while the modal is being displayed on iOS |
supportedOrientations | Array of Enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | 'portrait' | Allowed orientation while modals is being shown. More info at react-native docs |
onTouchOutside | Function | null | Callbac that's called when users tap outside the shown modal |
title | String | null | Modal's title |
titleStyle | Text StyleSheet | null | Custom text style object for modal's title |
dialogStyle | View StyleSheet | null | Custom view style for dialog box |
contentStyle | View StyleSheet | null | Custom view style for dialog content wrapper |
buttonsStyle | View StyleSheet | null | Custom view style for dialog button wrapper |
overlayStyle | View StyleSheet | null | Custom view style for dialog overlay |
buttons | React Component | null | Modal button component |
keyboardDismissMode | Enum('none', 'on-drag', 'interactive') | null | Determines whether the keyboard gets dismissed in response to a drag. |
keyboardShouldPersistTaps | Enum('always', 'never', 'handled', false, true) | null | Determines when the keyboard should stay visible after a tap. |
Confirm Dialog
import { ConfirmDialog } from 'react-native-simple-dialogs';
// with message
<ConfirmDialog
title="Confirm Dialog"
message="Are you sure about that?"
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})}
positiveButton={{
title: "YES",
onPress: () => alert("Yes touched!")
}}
negativeButton={{
title: "NO",
onPress: () => alert("No touched!")
}}
/>
// with custom content
<ConfirmDialog
title="Confirm Dialog"
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})}
positiveButton={{
title: "OK",
onPress: () => alert("Ok touched!")
}} >
<View>
// your content here
</View>
</ConfirmDialog>
Available props
Name | Type | Default | Description |
---|---|---|---|
...{Dialog.props} | Dialog Props | null | Same props as Dialog Component |
message | String | null | Message shown in the confirm dialog |
messageStyle | Text StyleSheet | null | Custom text style for message |
negativeButton | Button Props | null | Button element object to describe the negative button. See below for detailed shape of button |
positiveButton | Button Props | REQUIRED | Button element object to describe the positive button. See below for detailed shape of button |
Button props
Name | Type | Default |
---|---|---|
title | String | REQUIRED |
onPress | Function | REQUIRED |
disabled | Boolean | null |
titleStyle | Text StyleSheet | null |
style | View StyleSheet | null |
Progress Dialog
import { ProgressDialog } from 'react-native-simple-dialogs';
<ProgressDialog
visible={this.state.progressVisible}
title="Progress Dialog"
message="Please, wait..."
/>
Available props
Name | Type | Default | Description |
---|---|---|---|
...{Dialog.props} | Dialog Props | null | Same props as Dialog Component |
message | String | REQUIRED | Message shown in the progress dialog |
messageStyle | Text StyleSheet | null | Custom text style for message |
activityIndicatorColor | color | 'gray' | The foreground color of the spinner |
activityIndicatorSize | enum('small', 'large'), number | 'small' | Size of the indicator. Number only supported on Android |
activityIndicatorStyle | View StyleSheet | null | Custom style for the activity indicator |
More info on the sample project.
Contribute
New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.
Licence
The MIT License (MIT)
Copyright (c) 2017 Douglas Nassif Roma Junior
See the full licence file.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].