react-native-dialogs

Material Design dialogs for React Native Android apps (wrapper over afollestad/material-dialogs)

Installation

Install the npm package react-native-dialogs. Inside your React Native project, run (example):

rnpm install --save react-native-dialogs

In android/app/build.gradle, add a dependency to ':react-native-dialogs' and URL of the Jitpack maven repository (to download the library https://github.com/afollestad/material-dialogs) :

repositories {
    maven { url "https://jitpack.io" }
}

The changes should look like this.

Next, you need to change the MainActivity of your app to register ReactNativeDialogsPackage :

import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage;

    //...
public class MainActivity extends ReactActivity {
          //...

          @Override
          protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new ReactNativeDialogsPackage() // add this manager
            );
          }
}

See this changelog for reference.

Now you're finally ready to start using module in your React Native application. See this changelog for an example that uses DialogAndroid.

Usage

var DialogAndroid = require('react-native-dialogs');

var options = {
  title: 'Hello, World!',
  content: 'I\'m just simple Dialog',
  positiveText: 'OK',
  negativeText: 'Cancel'
};

var showDialog = function () {
  var dialog = new DialogAndroid();
  dialog.set(options);
  dialog.show();
}

Creation of a dialog works in 3 steps :

1. Create a new dialog using new DialogAndroid().
2. Set some options using dialog.set(options). set can be called multiple times, and options from multiple calls will be merged.
3. Show the dialog using dialog.show().

This library is a thin wrapper over afollestad/material-dialogs, which provides builders for showing Material Design dialogs in Android apps. The options provided to set map more or less directly to the methods provided in the original library. See its documentation for reference.

The following options are currently supported (value type is String unless mentioned otherwise) :

• title
• content
• positiveText
• onPositive (function with no arguments)
• negativeText
• onNegative (function with no arguments)
• neutralText
• onNeutral (function with no arguments)
• onAny (function with no arguments)
• items (array of strings)
• itemsCallback (function with 2 arguments : selectedIndex (int) and selectedItem (string))
• itemsCallbackSingleChoice (function with 2 arguments : selectedIndex (int) and selectedItem (string))
• selectedIndex (int) - set the preselected index for Single Choice List
• itemsCallbackMultiChoice (function with 2 arguments : selected indices (array of ints) and selected items (array of strings)
• selectedIndices (array of ints) - set the preselected indices for Multiple Choice List
• multiChoiceClearButton (boolean) - provide a 'Clear' button in Multiple Choice List
• autoDismiss (boolean)
• forceStacking (boolean)
• alwaysCallSingleChoiceCallback (boolean)
• alwaysCallMultipleChoiceCallback (boolean)
• cancelable (boolean)
• showListener (function)
• cancelListener (function)
• dismissListener (function)
• input - Object containing the following keys (all optional except callback) :
  • hint
  • prefill
  • allowEmptyInput (boolean)
  • minLength (int)
  • maxLength (int)
  • type (int)
  • callback (function with 1 argument : user provided input)
• alwaysCallInputCallback (boolean)

Examples

Simple example project : https://github.com/aakashns/react-native-dialogs-example

Complex example project : examples/ExampleApp

Try out the following values for option (taken from examples/ExampleApp/dialogData.js):

{
  "title": "Use Google's Location Services?",
  "content": "This app wants to access your location.",
  "positiveText": "Agree",
  "negativeText": "Disagree"
}

{
  "title": "Use Google's Location Services?",
  "content": "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.",
  "positiveText": "Agree",
  "negativeText": "Disagree",
  "neutralText": "More Info",
  "onPositive": () => ToastAndroid.show("POSITIVE!", ToastAndroid.SHORT),
  "onNegative": () => ToastAndroid.show("NEGATIVE!", ToastAndroid.SHORT),
  "onNeutral": () => ToastAndroid.show("NEUTRAL!", ToastAndroid.SHORT),
}

"data": {
  "items": [
    "Twitter",
    "Google+",
    "Instagram",
    "Facebook"
  ],
  "title": "Social Networks",
  itemsCallback: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT);
}

"data": {
  "items": [
    "Twitter",
    "Google+",
    "Instagram",
    "Facebook"
  ],
  "title": "Social Networks",
  itemsCallbackSingleChoice: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT);
}

"data": {
  "items": [
    "Twitter",
    "Google+",
    "Instagram",
    "Facebook"
  ],
  "title": "Social Networks",
  "positiveText": "Choose",
  itemsCallbackMultiChoice: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT);
}

Known Issues

TODO

Upcoming Features

TODO