├── .gitignore
├── LICENSE.md
├── README.md
├── build.gradle
├── index.js
├── package.json
├── screenshots
├── Screenshot_2016-05-31-20-29-17.png
├── Screenshot_2016-05-31-20-29-26.png
├── Screenshot_2016-05-31-20-29-34.png
└── Screenshot_2016-05-31-20-29-41.png
└── src
└── main
├── AndroidManifest.xml
└── java
└── com
└── arjunkomath
└── react
├── MaterialDialogModule.java
└── MaterialDialogPackage.java
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage
17 | # (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
28 | node_modules
29 | npm-debug.log
30 |
31 | # OSX
32 | #
33 | .DS_Store
34 |
35 | examples/
36 |
37 | # Xcode
38 | #
39 | build/
40 | *.pbxuser
41 | !default.pbxuser
42 | *.mode1v3
43 | !default.mode1v3
44 | *.mode2v3
45 | !default.mode2v3
46 | *.perspectivev3
47 | !default.perspectivev3
48 | xcuserdata
49 | *.xccheckout
50 | *.moved-aside
51 | DerivedData
52 | *.hmap
53 | *.ipa
54 | *.xcuserstate
55 | project.xcworkspace
56 |
57 | # Android/IJ
58 | #
59 | .idea
60 | .gradle
61 | local.properties
62 | android/*.iml
63 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Arjun Komath
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | React Native Material Dialogs (Android)
2 | Material Design Dialogs for React Native
3 |
4 | [](https://badge.fury.io/js/react-native-material-dialogs)
5 | [](https://github.com/arjunkomath/react-native-material-dialogs/stargazers)
6 | [](https://codeclimate.com/github/arjunkomath/react-native-material-dialogs)
7 | [](https://gitter.im/arjunkomath/react-native-material-dialogs?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
8 |
9 | [](https://nodei.co/npm/react-native-material-dialogs/)
10 |
11 | 
12 | 
13 | 
14 |
15 | ## Install
16 |
17 | Install the npm module.
18 | ```
19 | npm i react-native-material-dialogs
20 | ```
21 |
22 | ### Plugin Installation (Android - Manual)
23 |
24 | - In your android/settings.gradle file, make the following additions:
25 | ```
26 | include ':react-native-material-dialogs'
27 | project(':react-native-material-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-material-dialogs')
28 | ```
29 |
30 | - In your android/build.gradle file, add the a maven repository:
31 | ```
32 | ...
33 | repositories {
34 | ...
35 | maven { url "https://jitpack.io" }
36 | }
37 | ```
38 | - In your android/app/build.gradle file, add the a compile-time dependency:
39 | ```
40 | ...
41 | dependencies {
42 | ...
43 | compile project(':react-native-material-dialogs')
44 | }
45 | ```
46 | - Next, you need to change the MainActivity of your app.
47 |
48 | ```java
49 | import com.arjunkomath.react.MaterialDialogPackage; // <--- Add This
50 |
51 | ...
52 | /**
53 | * A list of packages used by the app. If the app uses additional views
54 | * or modules besides the default ones, add more packages here.
55 | */
56 | @Override
57 | protected List getPackages() {
58 | return Arrays.asList(
59 | new MainReactPackage(),
60 | new MaterialDialogPackage(this) // "this" is very important!
61 | );
62 | }
63 | ```
64 |
65 | And, you're done!
66 |
67 | ## Usage
68 |
69 | ```
70 | import MaterialDialog from 'react-native-material-dialogs';
71 | ```
72 |
73 | There are two types of dialogs:
74 |
75 | ### Dialog with one feedback
76 |
77 | ```
78 | MaterialDialog.show('Yaaay!!', 'Success', 'done', MaterialDialog.SUCCESS,
79 | () => {
80 | console.log('asd');
81 | });
82 | ```
83 |
84 | Parameters:
85 |
86 | ```
87 | MaterialDialog.show( , <Description>, <Button text>, <Type>, <Callback>);
88 | ```
89 |
90 | ### Dialog with two feedbacks
91 |
92 | ```
93 | MaterialDialog.showWithCancel('Danger!', 'Are you sure?', 'YES', 'NO', MaterialDialog.DANGER,
94 | () => {
95 | console.log('yes');
96 | },
97 | () => {
98 | console.log('no');
99 | });
100 | ```
101 |
102 | Parameters:
103 |
104 | ```
105 | MaterialDialog.show( <Title> , <Description>, <Positive Button text>, <Negative Button text>, <Type>, <Callback Positive>, <Callback Negative>);
106 | ```
107 |
108 | Title, Description and Button text are of type String. While Type is a constant.
109 | There are four types:
110 |
111 | ```
112 | MaterialDialog.SUCCESS
113 | MaterialDialog.INFO
114 | MaterialDialog.WARNING
115 | MaterialDialog.DANGER
116 | ```
117 |
118 | ## Example
119 |
120 | ```jsx
121 | import React, { Component } from 'react';
122 | import {
123 | AppRegistry,
124 | StyleSheet,
125 | Text,
126 | View,
127 | TouchableOpacity
128 | } from 'react-native';
129 |
130 | import MaterialDialog from 'react-native-material-dialogs';
131 |
132 | class dialog_test extends Component {
133 |
134 | press() {
135 | MaterialDialog.show('Yaaay!!', 'Success', 'done', MaterialDialog.SUCCESS,
136 | () => {
137 | console.log('done');
138 | });
139 | }
140 |
141 | render() {
142 | return (
143 | <View style={styles.container}>
144 | <TouchableOpacity onPress={this.press}>
145 | <Text style={styles.welcome}>
146 | Press me to see dialog!
147 | </Text>
148 | </TouchableOpacity>
149 | </View>
150 | );
151 | }
152 | }
153 |
154 | const styles = StyleSheet.create({
155 | container: {
156 | flex: 1,
157 | justifyContent: 'center',
158 | alignItems: 'center',
159 | backgroundColor: '#F5FCFF',
160 | },
161 | welcome: {
162 | fontSize: 20,
163 | textAlign: 'center',
164 | margin: 10,
165 | }
166 | });
167 |
168 | AppRegistry.registerComponent('dialog_test', () => dialog_test);
169 | ```
170 |
171 | ## :two_hearts: Thanks
172 | [MaterialStyledDialogs](https://github.com/javiersantos/MaterialStyledDialogs)
173 |
174 | ## About Author
175 | Built with <3 by Arjun Komath / [arjunkomath@gmail.com](mailto:arjunkomath@gmail.com)
176 |
--------------------------------------------------------------------------------
/build.gradle:
--------------------------------------------------------------------------------
1 | buildscript {
2 | repositories {
3 | jcenter()
4 | }
5 |
6 | dependencies {
7 | classpath 'com.android.tools.build:gradle:1.1.3'
8 | }
9 | }
10 |
11 | apply plugin: 'com.android.library'
12 |
13 | android {
14 | compileSdkVersion 23
15 | buildToolsVersion "23.0.1"
16 |
17 | defaultConfig {
18 | minSdkVersion 16
19 | targetSdkVersion 22
20 | versionCode 1
21 | versionName "1.0"
22 | }
23 | lintOptions {
24 | abortOnError false
25 | }
26 | }
27 |
28 | repositories {
29 | mavenCentral()
30 | }
31 |
32 | dependencies {
33 | compile 'com.facebook.react:react-native:0.11.+'
34 | compile 'com.github.javiersantos:MaterialStyledDialogs:1.4.1'
35 | }
36 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var { NativeModules } = require('react-native');
2 | module.exports = NativeModules.MaterialDialog;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-material-dialogs",
3 | "version": "0.0.6",
4 | "description": "Material Design Dialogs for React Native",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [
10 | "react",
11 | "native",
12 | "material",
13 | "design",
14 | "dialog",
15 | "android"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/arjunkomath/react-native-material-dialogs"
20 | },
21 | "bugs": {
22 | "url": "https://github.com/arjunkomath/react-native-material-dialogs/issues"
23 | },
24 | "homepage": "https://github.com/arjunkomath/react-native-material-dialogs/blob/master/README.md",
25 | "author": "Arjun Komath <arjunkomath@gmail.com>",
26 | "license": "MIT",
27 | "peerDependencies": {
28 | "react-native": ">= 0.11.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/screenshots/Screenshot_2016-05-31-20-29-17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arjunkomath/react-native-material-dialogs/512affec8f99c242f7ff4de4f527e2136e8b9ff3/screenshots/Screenshot_2016-05-31-20-29-17.png
--------------------------------------------------------------------------------
/screenshots/Screenshot_2016-05-31-20-29-26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arjunkomath/react-native-material-dialogs/512affec8f99c242f7ff4de4f527e2136e8b9ff3/screenshots/Screenshot_2016-05-31-20-29-26.png
--------------------------------------------------------------------------------
/screenshots/Screenshot_2016-05-31-20-29-34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arjunkomath/react-native-material-dialogs/512affec8f99c242f7ff4de4f527e2136e8b9ff3/screenshots/Screenshot_2016-05-31-20-29-34.png
--------------------------------------------------------------------------------
/screenshots/Screenshot_2016-05-31-20-29-41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arjunkomath/react-native-material-dialogs/512affec8f99c242f7ff4de4f527e2136e8b9ff3/screenshots/Screenshot_2016-05-31-20-29-41.png
--------------------------------------------------------------------------------
/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3 | package="com.arjunkomath.react" >
4 | </manifest>
5 |
--------------------------------------------------------------------------------
/src/main/java/com/arjunkomath/react/MaterialDialogModule.java:
--------------------------------------------------------------------------------
1 | package com.arjunkomath.react;
2 |
3 | /**
4 | * Created by arjun on 30/05/16.
5 | */
6 |
7 | import android.app.Activity;
8 | import android.content.Context;
9 | import android.graphics.Color;
10 | import android.graphics.drawable.Drawable;
11 | import android.widget.Toast;
12 |
13 | import com.afollestad.materialdialogs.DialogAction;
14 | import com.afollestad.materialdialogs.MaterialDialog;
15 | import com.facebook.react.bridge.Callback;
16 | import com.facebook.react.bridge.NativeModule;
17 | import com.facebook.react.bridge.ReactApplicationContext;
18 | import com.facebook.react.bridge.ReactContext;
19 | import com.facebook.react.bridge.ReactContextBaseJavaModule;
20 | import com.facebook.react.bridge.ReactMethod;
21 | import com.github.javiersantos.materialstyleddialogs.MaterialStyledDialog;
22 |
23 | import java.util.HashMap;
24 | import java.util.Map;
25 | import java.util.StringTokenizer;
26 |
27 | public class MaterialDialogModule extends ReactContextBaseJavaModule {
28 |
29 | private Activity mActivity = null;
30 |
31 | public MaterialDialogModule(ReactApplicationContext reactContext, Activity activity) {
32 | super(reactContext);
33 | mActivity = activity;
34 | }
35 |
36 | @Override
37 | public String getName() {
38 | return "MaterialDialog";
39 | }
40 |
41 | @Override
42 | public Map<String, Object> getConstants() {
43 | final Map<String, Object> constants = new HashMap<>();
44 | constants.put("SUCCESS", android.R.color.holo_green_dark);
45 | constants.put("WARNING", android.R.color.holo_orange_dark);
46 | constants.put("INFO", android.R.color.holo_blue_dark);
47 | constants.put("DANGER", android.R.color.holo_red_dark);
48 | return constants;
49 | }
50 |
51 | @ReactMethod
52 | public void show(String title, String description, String btnText, int color, final Callback doneCallback) {
53 | int icon = android.R.drawable.stat_sys_download_done;
54 | switch (color) {
55 | case android.R.color.holo_green_dark: icon = android.R.drawable.ic_dialog_email; break;
56 | case android.R.color.holo_orange_dark: icon = android.R.drawable.ic_dialog_alert; break;
57 | case android.R.color.holo_blue_dark: icon = android.R.drawable.ic_dialog_info; break;
58 | case android.R.color.holo_red_dark: icon = android.R.drawable.stat_sys_warning; break;
59 | }
60 | MaterialStyledDialog dialog = new MaterialStyledDialog(mActivity)
61 | .setTitle(title)
62 | .setDescription(description)
63 | .setIcon(icon)
64 | .setHeaderColor(color)
65 | .withDialogAnimation(true)
66 | .withDivider(true)
67 | .setPositive(btnText, new MaterialDialog.SingleButtonCallback() {
68 | @Override
69 | public void onClick(MaterialDialog dialog, DialogAction which) {
70 | doneCallback.invoke();
71 | }
72 | })
73 | .build();
74 | dialog.show();
75 | }
76 |
77 | @ReactMethod
78 | public void showWithCancel(String title, String description, String okayText, String badText, int color, final Callback doneCallback, final Callback cancelCallback) {
79 | int icon = android.R.drawable.stat_sys_download_done;
80 | switch (color) {
81 | case android.R.color.holo_green_dark: icon = android.R.drawable.ic_dialog_email; break;
82 | case android.R.color.holo_orange_dark: icon = android.R.drawable.ic_dialog_alert; break;
83 | case android.R.color.holo_blue_dark: icon = android.R.drawable.ic_dialog_info; break;
84 | case android.R.color.holo_red_dark: icon = android.R.drawable.stat_sys_warning; break;
85 | }
86 | MaterialStyledDialog dialog = new MaterialStyledDialog(mActivity)
87 | .setTitle(title)
88 | .setDescription(description)
89 | .setIcon(icon)
90 | .setHeaderColor(color)
91 | .withDialogAnimation(true)
92 | .withDivider(true)
93 | .setPositive(okayText, new MaterialDialog.SingleButtonCallback() {
94 | @Override
95 | public void onClick(MaterialDialog dialog, DialogAction which) {
96 | doneCallback.invoke();
97 | }
98 | })
99 | .setNegative(badText, new MaterialDialog.SingleButtonCallback() {
100 | @Override
101 | public void onClick(MaterialDialog dialog, DialogAction which) {
102 | cancelCallback.invoke();
103 | }
104 | })
105 | .build();
106 | dialog.show();
107 | }
108 |
109 | }
--------------------------------------------------------------------------------
/src/main/java/com/arjunkomath/react/MaterialDialogPackage.java:
--------------------------------------------------------------------------------
1 | package com.arjunkomath.react;
2 |
3 | import android.app.Activity;
4 |
5 | import com.facebook.react.ReactPackage;
6 | import com.facebook.react.bridge.JavaScriptModule;
7 | import com.facebook.react.bridge.NativeModule;
8 | import com.facebook.react.bridge.ReactApplicationContext;
9 | import com.facebook.react.uimanager.ViewManager;
10 |
11 | import java.util.ArrayList;
12 | import java.util.Arrays;
13 | import java.util.Collections;
14 | import java.util.List;
15 |
16 | /**
17 | * Created by arjun on 30/05/16.
18 | */
19 | public class MaterialDialogPackage implements ReactPackage {
20 |
21 | private Activity mActivity = null;
22 |
23 | public MaterialDialogPackage(Activity activity){
24 | mActivity = activity;
25 | }
26 |
27 | @Override
28 | public List<NativeModule> createNativeModules(
29 | ReactApplicationContext reactContext) {
30 | List<NativeModule> modules = new ArrayList<>();
31 |
32 | modules.add(new MaterialDialogModule(reactContext, mActivity));
33 |
34 | return modules;
35 | }
36 |
37 | @Override
38 | public List<Class<? extends JavaScriptModule>> createJSModules() {
39 | return Collections.emptyList();
40 | }
41 |
42 | @Override
43 | public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
44 | return Arrays.<ViewManager>asList();
45 | }
46 |
47 | }
--------------------------------------------------------------------------------