Skip to content
Material design dialogs for React Native πŸ’¬
JavaScript
Branch: master
Clone or download
Latest commit e79a9cc Dec 15, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example 0.7.2 Dec 17, 2017
images README.md improvements Dec 3, 2017
src Add testIDs to the dialog buttons Jan 5, 2018
.eslintrc.json Disable import eslint rules Nov 12, 2017
.gitignore initial commit Feb 25, 2017
.npmignore Fix .npmignore Dec 15, 2018
LICENSE Initial commit Feb 24, 2017
README.md README.md improvements Dec 3, 2017
index.d.ts Fix onOk and onCancel Typescript definitions Dec 15, 2018
index.js added SinglePickerMaterialDialog Feb 27, 2017
package.json 0.7.6 Dec 15, 2018
yarn.lock Add react-native-typography Dec 8, 2017

README.md

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 can’t perform that action at this time.