react-native-material-dialog

by hectahertz

Material design dialogs for React Native 💬

134 Stars 57 Forks Last release: almost 2 years ago (v0.7.6) MIT License 107 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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';

this.setState({ visible: false })} onCancel={() => this.setState({ visible: false })}> Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running. ;

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';

({ 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';

{ 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

  • https://material.io/guidelines/components/dialogs.html

License

Contact

Tweet me @hectahertz

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.