react-native-dialogs

React Native wrappers for https://github.com/afollestad/material-dialogs

Installation

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

npm install --save react-native-dialogs

In android/settings.gradle, remove the line include ':app' and add the following lines (example):

include ':app', ':react-native-dialogs'
project(':react-native-dialogs').projectDir = file('../node_modules/react-native-dialogs/android')

NOTE : If you have included other libraries in your project, the include line will contain the other dependencies too.

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" }
}

dependencies {
    // after other dependencies
    compile project(':react-native-dialogs')
}

The changes should look like this.

Next, you need to change the MainActivity of your app to extends FragmentActivity instead of Activity (otherwise dialogs will not be rendered), and register ReactNativeDialogsPackage :

import android.support.v4.app.FragmentActivity;
import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage;

public class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler {
    //...
  
          mReactInstanceManager = ReactInstanceManager.builder()
                //...
                .addPackage(new MainReactPackage())
                .addPackage(new ReactNativeDialogsPackage(this)) // <- ADD THIS LINE!
                //...
                .build();

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) :
  • hint
  • prefill
  • allowEmptyInput (boolean)
  • minLength (int)
  • maxLength (int)
  • type (int)
  • callback (function with 1 argument : user provided input)
• alwaysCallInputCallback (boolean)