bpk-component-dialog

bpk-component-dialog

Backpack React Native dialog dialog.

Simple

Day	Night

Multiple CTAs

Day	Night

Bottom

Day	Night

Installation

Check the main Readme for a complete installation guide.

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import BpkButton from 'backpack-react-native/bpk-component-button';
import { icons } from 'backpack-react-native/bpk-component-icon';
import BpkDialog, { DIALOG_TYPE, BUTTON_TYPE } from 'backpack-react-native/bpk-component-dialog';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
  }

  openDialog = () => this.setState({ isOpen: true });

  handlePositiveAction = () => {
    // Do something
    this.setState({
      isOpen: false,
    });
  };

  handleNegativeAction = () => {
    // Do something else
    this.setState({
      isOpen: false,
    });
  };

  handleDismissAction = () => {
    // Do something else
    this.setState({
      isOpen: false,
    });
  };

  render() {
    return (
      <View>
        <BpkButton onPress={this.openDialog} title="Show dialog" />
        <BpkDialog
          dialogType={DIALOG_TYPE.alert}
          title={'Backpack Dialog'}
          description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'}
          icon={{
            iconId: icons.tick,
            iconColor: 'monteverde'
          }}
          actions={[
            {
              text: 'Accept',
              type: BUTTON_TYPE.primary,
              callback: this.handlePositiveAction
            },
            {
              text: 'Decline',
              type: BUTTON_TYPE.destructive,
              callback: this.handleNegativeAction
            }
          ]}
          scrimAction={{
            enabled: true,
            callback: this.handleDismissAction
          }}
          isOpen={this.state.isOpen}
        />
      </View>
    );
  }
}

Props

BpkDialog

Property	PropType	Required	Default Value
dialogType	DIALOG_TYPE	true	-
title	string	false	-
description	string	false	-
icon	struct: { iconId: string, iconColor: string}	true	-
action	array<action_type>*	false	-
scrimAction	struct: { enabled: boolean, callback: func}	false	-
isOpen	boolean	true	-

* action_type has the following structure: { text: stirng, type: BUTTON_TYPE, callback: func }