Material design dialog components for React Native. JavaScript-only, for iOS and Android.
Getting started
Step 1
If you're not using Expo, install react-native-vector-icons
Step 2
Install react-native-material-dialog
npm install react-native-material-dialog --save
Example
- Run the example app via Expo or check the code.
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.
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={() => this.setState({ visible: false })}
onCancel={() => 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 |
backgroundColor | color of the dialog background | '#FFFFFF' | string |
colorAccent | color of the action text | '#51BC78' | string |
scrolled | whether the form is in scrolled mode | false | bool |
addPadding | automatically add paddings to the content | true | 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 |
backgroundColor | color of the dialog background | '#FFFFFF' | 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 |
backgroundColor | color of the dialog background | '#FFFFFF' | string |
colorAccent | color of the action text | '#51BC78' | string |
scrolled | whether the form is in scrolled mode | false | bool |