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>
        );
    },
 
};