react-native-dialogbox

() ()
This is a custom component for React Native, a simple popup, compatible with ios and android.
>This is a forked distro of react-native-popup that adds support for the current versions of react-native, and adds additional features (style overrides, promise support). The originating distro can be found here

Demo

Props

• isOverlay bool - default true
• isOverlayClickClose bool - default true
• onDismiss function() - optional callback called when overlay dismisses dialogbox
• style object - optional override for system styles

Methods

• alert(message: string|number, ...) : Promise

e.g.

	this.dialogbox.alert(1);

	this.dialogbox.alert(1, 'two', '10 messages at most');

	this.dialogbox.alert('promise example').then(() => this.dialogbox.alert('dismissed'));

• tip({ title: string, content: string|number|array<string|number> isRequired, btn: {title: string default 'OK', style: object, callback: function}, }) : Promise

e.g.

	this.dialogbox.tip({
		content: 'come on!',
	});

	this.dialogbox.tip({
		title: 'TipTip',
		content: 'come on!',
	});

	this.dialogbox.tip({
		content: ['come on!', 'go!'],
		btn: {
			text: 'OKOK',
			callback: () => {
				this.dialogbox.alert('over!');
			},
		},
	});

	this.dialogbox.tip({
		content: 'promise example',
		btn: {
			text: 'done'
		}
	}).then(() => (this.dialogbox.alert('done')));

	this.dialogbox.tip({
		content: 'style example',
		style: {
			color: 'red';
		}
	});

• confirm({ title: string, content: string|number|array<string|number> isRequired, buttonFlow: 'auto' | 'row' | 'column' default 'auto', ok: {title: string default 'OK', style: object, callback: function}, cancel: {title: string default 'Cancel', style: object, callback: function}, }) : Promise

e.g.

	this.dialogbox.confirm({
		content: 'Are you ready?',
	});

	this.dialogbox.confirm({
		content: 'Are you ready?',
		ok: {
			callback: () => {
				this.dialogbox.alert('Very good!');
			},
		},
	});

	this.dialogbox.confirm({
		title: 'title',
		content: ['come on!', 'go!'],
		ok: {
			text: 'Y',
			style: {
				color: 'red'
			},
			callback: () => {
				this.dialogbox.alert('Good!');
			},
		},
		cancel: {
			text: 'N',
			style: {
				color: 'blue'
			},
			callback: () => {
				this.dialogbox.alert('Hurry up！');
			},
		},
	});

	this.dialogbox.confirm({
		title: 'title',
		content: ['come on!', 'go!'],
		ok: {
			text: 'Y',
			style: {
				color: 'red'
			}
		},
		cancel: {
			text: 'N',
			style: {
				color: 'blue'
			}
		},
	}).then((event) => {
		if (event.button) {
			this.dialogbox.alert(`You selected ${event.button.text}`);
		} else {
			this.dialogbox.alert('Dialog cancelled');
		}
	});

• pop({ title: string, content: string|number|array<string|number> isRequired, buttonFlow: 'auto' | 'row' | 'column' default 'auto', btns: {title: string default 'OK', style: object, callback: function} }) : Promise

e.g.

	this.dialogbox.pop({
		title: 'Animals',
		content: 'Which animal do you like?',
		btns: [
			{
				text: 'Frog',
				callback: () => {
					this.dialogbox.alert('Ribbit!');
				},
			},
			{
				text: 'Dog',
				callback: () => {
					this.dialogbox.alert('Woof!');
				},
			},
			{
				text: 'Cat',
				callback: () => {
					this.dialogbox.alert('Meow!');
				},
			}
		]
	});

	this.dialogbox.pop({
		title: 'Animals',
		content: 'Which animal do you like?',
		btns: [
			{
				text: 'Frog'
			},
			{
				text: 'Dog'
			},
			{
				text: 'Cat'
			}
		]
	}).then(event => {
		if (event.button) {
			this.dialogbox.alert([
				`You selected ${event.button.text}`, 
				`It was button index ${event.index}`
			]);
		} else {
			this.dialogbox.alert([
				'Dialog was dismissed without selection', 
				'Index for this event is always -1'
			]);
		}
	});

	this.dialogbox.pop({
		title: 'Animals with Stacked Buttons',
		content: 'Which animal do you like?',
		buttonFlow: 'column',
		btns: [
			{
				text: 'Frog'
			},
			{
				text: 'Dog'
			},
			{
				text: 'Cat'
			}
		]
	}).then(event => {
		if (event.button) {
			this.dialogbox.alert([
				`You selected ${event.button.text}`, 
				`It was button index ${event.index}`
			]);
		} else {
			this.dialogbox.alert([
				'Dialog was dismissed without selection', 
				'Index for this event is always -1'
			]);
		}
	});

Usage

Step 1 - install

npm install react-native-dialogbox --save

Step 2 - import and use in project

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DialogBox from 'react-native-dialogbox';

export default class App extends Component {

	handleOnPress = () => {
		// alert
		this.dialogbox.alert(1);
	},

	render() {
		return (
			<View style={styles.container}>

				<Text style={styles.btn} onPress={this.handleOnPress}>click me !</Text>

				{/** dialogbox component */}
				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>

			</View>
		);
	},

};