react-native-material-dialog
Material design compliant dialog components for React Native.
Includes an generic dialog that can contain any view and several pre-styled scenarios.
Javascript-only, uses react-native's Modal component.
Follows the Material Design dialog specification.
Installation
Step 1
Install react-native-vector-icons (if you do not already have it)
npm i react-native-vector-icons --save && react-native link react-native-vector-icons
If you have any issues with icons not working or installation of React Native Vector Icons, check out their installation guide here
Step 2
Install react-native-material-dialog
npm install react-native-material-dialog --save
Included components
Roadmap
- Support for stacked action buttons.
- Dialog that holds a slider.
- Simple dialog component that accepts a string as content and styles it.
More examples
See example/App.js
MaterialDialog
Basic and customizable dialog that can hold any component.
import { MaterialDialog } from 'react-native-material-dialog';
<MaterialDialog
title={"Use Google's Location Service?"}
visible={this.state.visible}
onOk={() => {
ToastAndroid.show("Pressed OK", ToastAndroid.SHORT);
this.setState({visible: false})
}}
onCancel={() => {
ToastAndroid.show("Pressed CANCEL", ToastAndroid.SHORT);
this.setState({visible: false})
}}>
<Text style={styles.dialogText}>
Let Google help apps determine location. This means sending anonymous location
data to Google, even when no apps are running.
</Text>
</MaterialDialog>
Props
Name | Description | Default/Required | Type |
---|---|---|---|
visible | shows or hides the dialog | required | bool |
children | element to be rendered in the content of the dialog | required | element |
onCancel | callback when the dialog is closed or the cancel action is pressed | required | func |
onOk | callback when the ok action is pressed | undefined | func |
cancelLabel | label for the cancel action | 'CANCEL' | string |
okLabel | label for the ok action | 'OK' | string |
title | text for the dialog title | undefined | string |
titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string |
colorAccent | color of the action text | '#51BC78' | string |
scrolled | whether the form is in scrolled mode | false | bool |
SinglePickerMaterialDialog
Ready to use dialog that allows to choose only one option from a list.
import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
<SinglePickerMaterialDialog
title={'Pick one element!'}
items={LIST.map((row, index) => ({ value: index, label: row }))}
visible={this.state.singlePickerVisible}
selectedItem={this.state.singlePickerSelectedItem}
onCancel={() => this.setState({ singlePickerVisible: false })}
onOk={(result) => {
this.setState({ singlePickerVisible: false });
this.setState({ singlePickerSelectedItem: result.selectedItem });
}} />
Props
Name | Description | Default/Required | Type |
---|---|---|---|
visible | shows or hides the dialog | required | bool |
items | list of options to choose from | required | array of objects with a 'label' and 'value' property |
selectedItem | item that will be selected when opening the dialog | required | object with a 'label' and 'value' property |
onCancel | callback when the dialog is closed or the cancel action is pressed | required | func |
onOk | callback when the ok action is pressed | undefined | func |
cancelLabel | label for the cancel action | 'CANCEL' | string |
okLabel | label for the ok action | 'OK' | string |
title | text for the dialog title | undefined | string |
titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string |
colorAccent | color of the action text | '#51BC78' | string |
scrolled | whether the form is in scrolled mode | false | bool |
MultiPickerMaterialDialog
Ready to use dialog that allows to choose several options from a list.
import { MultiPickerMaterialDialog } from 'react-native-material-dialog';
<MultiPickerMaterialDialog
title={"Pick some elements!"}
colorAccent={this.props.colorAccent}
items={LIST.map((row, index) => {
return {value: index, label: row}
})}
visible={this.state.multiPickerVisible}
selectedItems={this.state.multiPickerSelectedItems}
onCancel={() => this.setState({multiPickerVisible: false})}
onOk={(result) => {
this.setState({multiPickerVisible: false});
this.setState({multiPickerSelectedItems: result.selectedItems});
}}/>
Props
Name | Description | Default/Required | Type |
---|---|---|---|
visible | shows or hides the dialog | required | bool |
items | list of options to choose from | required | array of objects with a 'label' and 'value' property |
selectedItems | items that will be selected when opening the dialog | required | array of objects with a 'label' and 'value' property |
onCancel | callback when the dialog is closed or the cancel action is pressed | required | func |
onOk | callback when the ok action is pressed | undefined | func |
cancelLabel | label for the cancel action | 'CANCEL' | string |
okLabel | label for the ok action | 'OK' | string |
title | text for the dialog title | undefined | string |
titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string |
colorAccent | color of the action text | '#51BC78' | string |
scrolled | whether the form is in scrolled mode | false | bool |