Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. - Material Docs

import { Dialog } from 'material-bread';

Dialogs are rendered with modal-react-native-web package. This mimics the default modal found in react-native . Passing in title , supportingText , actionItems , will create a standard dialog. You can also insert whatever you want inbetween supportingText and actionItems by passing in children

OPEN

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <View>
        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />
        <Dialog
          visible={this.state.visible}
          onTouchOutside={() => this.setState({ visible: false })}
          title={'Use Googles location service?'}
          supportingText={
            'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'
          }
          actionItems={[
            {
              text: 'Cancel',
              onPress: () =>  this.setState({ visible: false }),
            },
            {
              text: 'OK',
              onPress: () =>  this.setState({ visible: false }),
            },
          ]}
        />  
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Dialog } from 'material-bread';

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <View>
        <Button onPress={() => store.set({ visible: !this.state.visible })}>
          Open
        </Button>
        <Dialog
          visible={this.state.visible}
          onTouchOutside={() => this.setState({ visible: false })}
          title={'Use Googles location service?'}
          supportingText={
            'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'
          }
          actionItems={[
            {
              text: 'Cancel',
              onPress: () =>  this.setState({ visible: false }),
            },
            {
              text: 'OK',
              onPress: () =>  this.setState({ visible: false }),
            },
          ]}
        />
      </View>
    );
  }
}

Name

Description

Type

Default

actionItems

Array of actions to show at the bottom right

array

actionItemsContainerStyle

Styles action items container

object

contentStyle

Styles content container excluding action items

object

onRequestClose

Callback when dialog is closing

func

onShow

Callback when dialog is opening

func

onTouchOutside

Callback when clicking outside of dialog when shown

func

title

Adds a dialog title at the top

string

titleStyle

Additional styles for title

object

style

Styles container dialog

object

supportingText

Adds styled text below title

string

supportingTextStyle

Additional styles for supportingText

object

visible

Wether to show dialog or not

bool

You can create the dialogs shown in the Material Docs by adding components as children.

OPEN

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    visible: false,
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', }}>    
        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />
        <Dialog
            visible={this.state.visible}
            onTouchOutside={() => this.setState({ visible: false })}
            supportingText={'Discard draft?'}
            style={{width: 280}}
            actionItems={[
            {
                text: 'Cancel',
                onPress: () =>  this.setState({ visible: false }),
            },
            {
                text: 'OK',
                onPress: () =>  this.setState({ visible: false }),
            },
            ]}
        /> 
      </View>
    );
  }
}

OPEN

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    visible: false,
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', }}>    
        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />
        <Dialog
            visible={this.state.visible}
            onTouchOutside={() => this.setState({ visible: false })}
            title={'Set up backup account'}>
            <Ripple
            style={{
                flexDirection: 'row',
                alignItems: 'center',
                padding: 10,
            }}>
            <Avatar
                type="image"
                image={
                <Image
                    source={{
                    uri:
                        'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',
                    }}
                />
                }
                size={40}
            />
            <BodyText
                style={{
                fontSize: 14,
                fontWeight: '400',
                color: 'rgba(0, 0, 0, 0.54)',
                marginLeft: 20,
                }}>
                user1@gmail.com
            </BodyText>
            </Ripple>

            <Ripple
            style={{
                flexDirection: 'row',
                alignItems: 'center',
                padding: 10,
            }}>
            <Avatar
                type="image"
                image={
                <Image
                    source={{
                    uri:
                        'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',
                    }}
                />
                }
                size={40}
            />
            <BodyText
                style={{
                fontSize: 14,
                fontWeight: '400',
                color: 'rgba(0, 0, 0, 0.54)',
                marginLeft: 20,
                }}>
                user2@gmail.com
            </BodyText>
            </Ripple>

            <Ripple
            style={{
                flexDirection: 'row',
                alignItems: 'center',
                padding: 10,
            }}>
            <Avatar
                type="icon"
                content="add"
                color="#ccc"
                contentColor={'white'}
                size={40}
            />
            <BodyText
                style={{
                fontSize: 14,
                fontWeight: '400',
                color: 'rgba(0, 0, 0, 0.54)',
                marginLeft: 20,
                }}>
                Add account
            </BodyText>
            </Ripple>
        </Dialog>
      </View>
    );
  }
}

Dialog

Component #

Usage #

Props #

Demos #

Alert #

Simple #