Material design dialog components for React Native

by React Native Example

react-native-material-dialog

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

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

GitHub