react-native-dialogs

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

Installation

Installation using RNPM

1 . yarn add react-native-dialogs

or

npm i react-native-dialogs --save

2 . react-native link 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" }
}

Manual installation

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

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

You also need to update your settings.gradle and add:

include ':react-native-dialogs'
project(':react-native-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialogs/android')

update your app.gradle and add:

dependencies {
    compile project(':react-native-dialogs') // <-- Add this line
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    //...
}

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

// ... Other imports
import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage; // <-- Add this import.

    //...
public class MainApplication extends ReactActivity {
          //...

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

See this changelog for reference(Earlier versions of React native used MainActivity instead of MainApplication).

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

Usage

import DialogAndroid from 'react-native-dialogs';

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

let 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().
4. (optional) dismiss the dialog with dialog.dismiss().

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
• titleColor
• content
• contentColor
• positiveText
• positiveColor
• onPositive (function with no arguments)
• negativeText
• negativeColor
• onNegative (function with no arguments)
• neutralText
• neutralColor
• 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
• widgetColor - set the color of Radio Buttons and EditText
• linkColor
• multiChoiceClearButton (boolean) - provide a 'Clear' button in Multiple Choice List
• autoDismiss (boolean)
• forceStacking (boolean)
• alwaysCallSingleChoiceCallback (boolean)
• alwaysCallMultiChoiceCallback (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)
• progress - Object containing following keys
  • indeterminate (boolean) - must be true, determinate is not supported
  • style - (string) either 'horizontal' or undefined

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);
}

Progress dialog colored blue, with no buttons, disables hardware back, and dismisses after 5 seconds:

    const dialog = new DialogAndroid();
    dialog.set({
        content: 'Downloading...',
        progress: {
            indeterminate: true,
            style: 'horizontal'
        },
        widgetColor: 'blue',
        cancelable: false
    })
    dialog.show();
    setTimeout(dialog.dismiss, 5000);

Known Issues

TODO

Upcoming Features

TODO