React Native Material Dialogs (Android)
Material Design Dialogs for React Native
[![npm version](https://badge.fury.io/js/react-native-material-dialogs.svg)](https://badge.fury.io/js/react-native-material-dialogs) [![GitHub stars](https://img.shields.io/github/stars/arjunkomath/react-native-material-dialogs.svg)](https://github.com/arjunkomath/react-native-material-dialogs/stargazers)
Install
Install the npm module.
npm i react-native-material-dialogs
Plugin Installation (Android - Manual)
- In your android/settings.gradle file, make the following additions:
include ':react-native-material-dialogs'
project(':react-native-material-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-material-dialogs')
- In your android/build.gradle file, add the a maven repository:
...
repositories {
...
maven { url "https://jitpack.io" }
}
- In your android/app/build.gradle file, add the a compile-time dependency:
...
dependencies {
...
compile project(':react-native-material-dialogs')
}
- Next, you need to change the MainActivity of your app.
// <--- Add This .../** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */ @Override protected List<ReactPackage> { return Arrays.<ReactPackage>; }
And, you're done!
Usage
import MaterialDialog from 'react-native-material-dialogs';
There are two types of dialogs:
Dialog with one feedback
MaterialDialog.show('Yaaay!!', 'Success', 'done', MaterialDialog.SUCCESS,
() => {
console.log('asd');
});
Parameters:
MaterialDialog.show( <Title> , <Description>, <Button text>, <Type>, <Callback>);
Dialog with two feedbacks
MaterialDialog.showWithCancel('Danger!', 'Are you sure?', 'YES', 'NO', MaterialDialog.DANGER,
() => {
console.log('yes');
},
() => {
console.log('no');
});
Parameters:
MaterialDialog.show( <Title> , <Description>, <Positive Button text>, <Negative Button text>, <Type>, <Callback Positive>, <Callback Negative>);
Title, Description and Button text are of type String. While Type is a constant. There are four types:
MaterialDialog.SUCCESS
MaterialDialog.INFO
MaterialDialog.WARNING
MaterialDialog.DANGER
Example
import React Component from 'react'; import AppRegistry StyleSheet Text View TouchableOpacity from 'react-native'; import MaterialDialog from 'react-native-material-dialogs'; { MaterialDialog; } { return <View => <TouchableOpacity => <Text => Press me to see dialog! </Text> </TouchableOpacity> </View> ; } const styles = StyleSheet; AppRegistry;
💕 Thanks
About Author
Built with <3 by Arjun Komath / arjunkomath@gmail.com