status-im
/
react-native-dialogs
mirror of https://github.com/status-im/react-native-dialogs.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
24 Commits 1 Branch 8 Tags 879 KiB
Java 56.3%
JavaScript 43.7%
Go to file
Aakash N S 0b86b440ba Update README.md 2015-11-02 03:45:36 +05:30
android Changed build tools version to 23.0.1 2015-11-02 01:49:15 +05:30
examples/ExampleApp Updated example to use latest version 2015-11-02 01:55:48 +05:30
.gitignore Single Choice example 2015-11-01 03:20:53 +05:30
DialogAndroid.js Cleaned up Javascript code 2015-11-02 00:00:21 +05:30
LICENSE Initial commit 2015-10-31 20:23:37 +05:30
README.md Update README.md 2015-11-02 03:45:36 +05:30
index.js Added examples for implemented features 2015-11-01 22:58:44 +05:30
package.json Bumped version to 0.0.2 2015-11-02 01:50:43 +05:30

README.md

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) :