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

• Run the example app via Expo or check the code.

Included components

• [x] MaterialDialog
• [x] SinglePickerMaterialDialog
• [x] MultiPickerMaterialDialog

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 |

References

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

License

• MIT

Contact

Tweet me @hectahertz