• Stars
    star
    141
  • Rank 259,971 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material design dialogs for React Native ๐Ÿ’ฌ

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