App.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
  ScrollView,
  Platform,
  Image
} from "react-native";
import {
  MaterialDialog,
  MultiPickerMaterialDialog,
  SinglePickerMaterialDialog
} from "react-native-material-dialog";
import { getStatusBarHeight } from "react-native-status-bar-height";

import { material } from "react-native-typography";

const map = require("./map.jpg");

export default class App extends Component {
  state = {
    basicNoActionsVisible: false,
    basicNoTitleVisible: false,
    basicOkCancelVisible: false,
    basicCustomLabelsVisible: false,
    basicCustomColorsVisible: false,
    basicScrolledListVisible: false,
    basicMapVisible: false,
    multiPickerVisible: false,
    multiPickerSelectedItems: [],
    scrolledMultiPickerVisible: false,
    scrolledMultiPickerSelectedItems: [],
    singlePickerVisible: false,
    singlePickerSelectedItem: undefined,
    scrolledSinglePickerVisible: false,
    scrolledSinglePickerSelectedItem: undefined
  };

  // TODO Add examples with more complex views

  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#303f9f" />
        <View style={styles.navigationBar}>
          <Text style={material.titleWhite}>react-native-material-dialog</Text>
        </View>
        <ScrollView>
          <View style={styles.contentContainer}>
            <View style={styles.sectionContainer}>
              <Text style={material.title}>MaterialDialog</Text>

              <TouchableOpacity
                onPress={() => this.setState({ basicNoActionsVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>TITLE & NO ACTIONS</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => this.setState({ basicNoTitleVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>NO TITLE & OK/CANCEL</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => this.setState({ basicOkCancelVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>TITLE & OK/CANCEL</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() =>
                  this.setState({ basicCustomLabelsVisible: true })
                }
              >
                <View style={styles.button}>
                  <Text style={material.button}>NO TITLE & CUSTOM LABELS</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() =>
                  this.setState({ basicCustomColorsVisible: true })
                }
              >
                <View style={styles.button}>
                  <Text style={material.button}>CUSTOM COLORS</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() =>
                  this.setState({ basicScrolledListVisible: true })
                }
              >
                <View style={styles.button}>
                  <Text style={material.button}>
                    SCROLLED WITH A CUSTOM LIST
                  </Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => this.setState({ basicMapVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>CUSTOM CONTENT</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.sectionContainer}>
              <Text style={material.title}>MultiPickerMaterialDialog</Text>

              <TouchableOpacity
                onPress={() => this.setState({ multiPickerVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>MULTI PICKER</Text>
                </View>
              </TouchableOpacity>
              <Text numberOfLines={1} style={material.caption}>
                {this.state.multiPickerSelectedItems.length === 0
                  ? "No items selected."
                  : `Selected: ${this.state.multiPickerSelectedItems
                      .map(item => item.label)
                      .join(", ")}`}
              </Text>

              <TouchableOpacity
                onPress={() =>
                  this.setState({ scrolledMultiPickerVisible: true })
                }
              >
                <View style={styles.button}>
                  <Text style={material.button}>SCROLLED MULTI PICKER</Text>
                </View>
              </TouchableOpacity>
              <Text numberOfLines={1} style={material.caption}>
                {this.state.scrolledMultiPickerSelectedItems.length === 0
                  ? "No items selected."
                  : `Selected: ${this.state.scrolledMultiPickerSelectedItems
                      .map(item => item.label)
                      .join(", ")}`}
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={material.title}>SinglePickerMaterialDialog</Text>

              <TouchableOpacity
                onPress={() => this.setState({ singlePickerVisible: true })}
              >
                <View style={styles.button}>
                  <Text style={material.button}>SINGLE PICKER</Text>
                </View>
              </TouchableOpacity>
              <Text numberOfLines={1} style={material.caption}>
                {this.state.singlePickerSelectedItem === undefined
                  ? "No item selected."
                  : `Selected: ${this.state.singlePickerSelectedItem.label}`}
              </Text>

              <TouchableOpacity
                onPress={() =>
                  this.setState({ scrolledSinglePickerVisible: true })
                }
              >
                <View style={styles.button}>
                  <Text style={material.button}>SCROLLED SINGLE PICKER</Text>
                </View>
              </TouchableOpacity>
              <Text numberOfLines={1} style={material.caption}>
                {this.state.scrolledSinglePickerSelectedItem === undefined
                  ? "No item selected."
                  : `Selected: ${this.state.scrolledSinglePickerSelectedItem.label}`}
              </Text>
            </View>
          </View>
        </ScrollView>

        <MaterialDialog
          title={"Information"}
          visible={this.state.basicNoActionsVisible}
          onCancel={() => {
            this.setState({ basicNoActionsVisible: false });
          }}
        >
          <Text style={material.subheading}>
            You logged out of the application.
          </Text>
        </MaterialDialog>

        <MaterialDialog
          visible={this.state.basicNoTitleVisible}
          onOk={() => {
            this.setState({ basicNoTitleVisible: false });
          }}
          onCancel={() => {
            this.setState({ basicNoTitleVisible: false });
          }}
        >
          <Text style={material.subheading}>Set alarm?</Text>
        </MaterialDialog>

        <MaterialDialog
          title={"Use Google's Location Service?"}
          visible={this.state.basicOkCancelVisible}
          onOk={() => {
            this.setState({ basicOkCancelVisible: false });
          }}
          onCancel={() => {
            this.setState({ basicOkCancelVisible: false });
          }}
        >
          <Text style={material.subheading}>
            Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </Text>
        </MaterialDialog>

        <MaterialDialog
          visible={this.state.basicCustomLabelsVisible}
          okLabel="KEEP"
          onOk={() => {
            this.setState({ basicCustomLabelsVisible: false });
          }}
          cancelLabel="DISCARD"
          onCancel={() => {
            this.setState({ basicCustomLabelsVisible: false });
          }}
        >
          <Text style={material.subheading}>Discard draft?</Text>
        </MaterialDialog>

        <MaterialDialog
          visible={this.state.basicCustomColorsVisible}
          title={"Save the conversation?"}
          titleColor="#F0F0F0"
          colorAccent="#6ABED0"
          backgroundColor="#181712"
          okLabel="SAVE"
          onOk={() => {
            this.setState({ basicCustomColorsVisible: false });
          }}
          cancelLabel="DISCARD"
          onCancel={() => {
            this.setState({ basicCustomColorsVisible: false });
          }}
        >
          <Text style={[material.subheading, { color: "#B0ABA0" }]}>
            Store the conversation log in Google Drive.
          </Text>
        </MaterialDialog>

        <MaterialDialog
          visible={this.state.basicScrolledListVisible}
          title={"Scrollable list"}
          scrolled
          onOk={() => {
            this.setState({ basicScrolledListVisible: false });
          }}
          onCancel={() => {
            this.setState({ basicScrolledListVisible: false });
          }}
        >
          <ScrollView contentContainerStyle={styles.scrollViewContainer}>
            {LONG_LIST.map(row => (
              <TouchableOpacity key={row}>
                <View style={styles.row}>
                  <Text style={material.subheading}>{row}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </MaterialDialog>

        <MaterialDialog
          visible={this.state.basicMapVisible}
          addPadding={false}
          title={"Location list"}
          onOk={() => {
            this.setState({ basicMapVisible: false });
          }}
          onCancel={() => {
            this.setState({ basicMapVisible: false });
          }}
        >
          <Image style={styles.mapView} source={map} />
        </MaterialDialog>

        <MultiPickerMaterialDialog
          title={"Pick some elements!"}
          items={SHORT_LIST.map((row, index) => ({ 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 });
          }}
        />

        <MultiPickerMaterialDialog
          title={"Pick some more elements!"}
          scrolled
          items={LONG_LIST.map((row, index) => ({ value: index, label: row }))}
          visible={this.state.scrolledMultiPickerVisible}
          selectedItems={this.state.scrolledMultiPickerSelectedItems}
          onCancel={() => this.setState({ scrolledMultiPickerVisible: false })}
          onOk={result => {
            this.setState({ scrolledMultiPickerVisible: false });
            this.setState({
              scrolledMultiPickerSelectedItems: result.selectedItems
            });
          }}
        />

        <SinglePickerMaterialDialog
          title={"Pick one element!"}
          items={SHORT_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 });
          }}
        />

        <SinglePickerMaterialDialog
          title={"Pick one element!"}
          scrolled
          items={LONG_LIST.map((row, index) => ({ value: index, label: row }))}
          visible={this.state.scrolledSinglePickerVisible}
          selectedItem={this.state.scrolledSinglePickerSelectedItem}
          onCancel={() => this.setState({ scrolledSinglePickerVisible: false })}
          onOk={result => {
            this.setState({ scrolledSinglePickerVisible: false });
            this.setState({
              scrolledSinglePickerSelectedItem: result.selectedItem
            });
          }}
        />
      </View>
    );
  }
}

const LONG_LIST = [
  "List element 1",
  "List element 2",
  "List element 3",
  "List element 4",
  "List element 5",
  "List element 6",
  "List element 7",
  "List element 8",
  "List element 9",
  "List element 10",
  "List element 12",
  "List element 13",
  "List element 14",
  "List element 15",
  "List element 16",
  "List element 17",
  "List element 18",
  "List element 19"
];

const SHORT_LIST = ["List element 1", "List element 2", "List element 3"];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  contentContainer: {
    flex: 1,
    paddingTop: getStatusBarHeight() + 56,
    justifyContent: "flex-start",
    alignItems: "stretch",
    padding: 20
  },
  sectionContainer: {
    paddingVertical: 16
  },
  navigationBar: {
    paddingTop: getStatusBarHeight() + 12,
    paddingBottom: 16,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: "#3F51B5",
    ...Platform.select({
      android: {
        elevation: 4
      },
      ios: {
        zIndex: 10
      }
    })
  },
  button: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    minWidth: 88,
    height: 36,
    borderRadius: 2,
    backgroundColor: "#E8EAF6",
    elevation: 2,
    paddingHorizontal: 16,
    marginTop: 16
  },
  scrollViewContainer: {
    paddingTop: 8
  },
  row: {
    height: 48,
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  mapView: {
    height: 200,
    width: 280
  }
});