🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Material design compliant dialog components for React Native, includes a generic dialog that can contain any view and several pre-styled scenarios.

Modal_Popup React Native

Documentation

React Native Material Dialog

npm version License: MIT npm downloads

Material design dialog components for React Native. JavaScript-only, for iOS and Android.

React Native Material Dialog iOS Showcase React Native Material Dialog Android Showcase

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

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.

Material Design Collection

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.

Material Design Collection

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.

Material Design Collection

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

References

License

Contact

Tweet me @hectahertz


You May Also Like