Introduction

Progress Simple Dialog is a useful component for React Native developers who want to add a simple and customizable dialog to their mobile applications. It provides a loading indicator with a message, which is commonly used in applications to indicate that something is happening in the background.

The component is easy to use and can be installed through npm. Once installed, it can be imported into your React Native application. The component takes a few props, such as visible, message, and indicatorColor, which allow you to customize the appearance and behavior of the dialog to suit your application’s needs.

One of the primary features of Progress Simple Dialog is its ability to control its visibility through the visible prop. This prop allows you to toggle the visibility of the dialog based on specific actions, such as a button press or the completion of an asynchronous task.

Additionally, the message prop allows you to display a message to the user while the loading indicator is displayed. This message can be customized to provide context to the user about what is happening in the background.

Finally, the indicatorColor prop lets you set the color of the loading indicator in the dialog. This prop is useful for matching the color scheme of your application or for providing visual feedback to the user about the status of the operation.

Overall, Progress Simple Dialog is a great component for developers who want to add a simple and customizable loading dialog to their React Native applications. It is easy to use, has several useful props, and can be customized to fit your application’s needs.

Installation

npm install react-native-dialogs –save

Or

yarn add react-native-dialogs

Example

import React, { Component } from "react";
import {
    Alert,
    Button,
    StyleSheet,
    View,
} from "react-native";
import {  ConfirmDialog } from "react-native-simple-dialogs";

const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        backgroundColor: "#F5FCFF",
        flex: 1,
        justifyContent: "center",
    },

});

class Example extends Component {
    state = {}

    openConfirm = (show) => {
        this.setState({ showConfirm: show });
    }

    optionYes = () => {
        this.openConfirm(false);
        setTimeout(
            () => {
                Alert.alert("The YES Button touched!");
            },
            300,
        );
    }

    optionNo = () => {
        this.openConfirm(false);
        setTimeout(
            () => {
                Alert.alert("The NO Button touched!");
            },
            300,
        );
    }

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

                <View style={ { height: 40 } } />

                <Button
                    onPress={ () => this.openConfirm(true) }
                    title="Confirm Dialog"
                />

                <View style={ { height: 40 } } />
                <ConfirmDialog
                    title="Confirm Dialog"
                    message="Are you sure about that?"
                    onTouchOutside={ () => this.openConfirm(false) }
                    visible={ this.state.showConfirm }
                    negativeButton={
                        {
                            title: "NO",
                            onPress: this.optionNo,
                            // disabled: true,
                            titleStyle: {
                                color: "blue",
                                colorDisabled: "aqua",
                            },
                            style: {
                                backgroundColor: "transparent",
                                backgroundColorDisabled: "transparent",
                            },
                        }
                    }
                    positiveButton={
                        {
                            title: "YES",
                            onPress: this.optionYes,
                        }
                    }
                />
            </View>
        );
    }
}

export default Example;

Tutorial

Coming Soon…