rn-customizable-dialog

Simple and customisable dialog box component for react native which can be used for activity indicator, alert or any other kind of dialog.

SetUp

npm i rn-customizable-dialog

Usages

import { CustomDialog } from 'rn-customizable-dialog';

<CustomDialog title='TITLE' message='Message' loading={this.state.loading} action_required={this.state.action_required} visible={this.state.visible} onPress={()=> this.setState({ visible: false })} onConfirm={() => this.onConfirmPressed()} buttonPositiveTitle='OK' buttonNegativeTitle='ABORT' titleTextStyle={{ fontSize: 14, color: 'white' }} buttonStyle={styles.buttonStyle} buttonTextStyle={styles.buttonText} bodyTextStyle={styles.dialogBodyText} singleButtonTitle='OK' />`

Screenshots

Properties

| Prop | Type | default | Required | Note | | ------------|:--------------:| :-------:|:--------:|:-----:| | visible | boolean | NA|Required |set to true to make the dialog visible | title | string | NA |Optional|title of the dialog | message | string | NA |Optional| content of the dialog | action_required | boolean | NA |Optional|When more than one button is required and any action to be performed by clicking the dialog box set this to true | onPress | function | NA |Required| To perform task on press of the single button or negative button | onConfirm | function | NA |Optional|Perform task onclick the positive button, use when action_required is true | buttonPositiveTitle | string | NA |Optional|Use when action_required is true | buttonNegativeTitle | string | NA |Optional|Use when action_required is true | titleTextStyle | object | NA |Optional|See example | buttonStyle | object | NA |Required|See example | buttonTextStyle | object | NA |Optional|See example | bodyTextStyle | object | NA |Optional|See example | singleButtonTitle | object | NA |Optional|See example, use when action_required is false