All Projects → douglasjunior → React Native Simple Dialogs

douglasjunior / React Native Simple Dialogs

Licence: mit
⚛ Cross-platform React Native dialogs based on the Modal component

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

Licence MIT npm version npm downloads

⚛ Cross-platform React Native dialogs based on the Modal component.

Features

Expo Snack

An Expo Demo Link

Screenshots

Android iOS

Requirements

  • React Native >= 0.44.0

NOTES

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.

Become a Patron! Donate

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].