react-native-irvs-modal

react-native-custom-modal

A simple and fully customizable React Native component that implements a modal.

Success	Error	Warning

Installation

If using yarn:

yarn add react-native-irvs-modal

If using npm:

npm i react-native-irvs-modal

Usage

import React, { Component } from 'react';
import { Modal } from 'react-native-irvs-modal';

class ExampleScreen extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            isVisible: true
        }
    }

    render() {
        return (
            <Modal
                visible={this.state.isVisible} 
                type="success"
                title="Success!"
                message="Modal was rendered."
                confirmButtonAction={() => { this.setState({isVisible:false}) }}
            />
        )
    }
}

export default ExampleScreen;

Documentation

Modal Component

Name	Description	Default	Type
type	Modal type to render	null	String
animation	Animated effect for modal	none	String
visible	Sets the display status of the component	false	Boolean
title	Component header title	null	String
message	Text displayed in modal content	null	String
showConfirmButton	Display or not confirm button	true	Boolean
confirmButtonText	Text displayed on confirmation button	"OK"	String
confirmButtonColor	Confirmation Button Color	#3085d6	String
confirmButtonAction	Function by clicking the confirm button	null	Func
showCancelButton	Display or not cancel button	false	Boolean
cancelButtonText	Text displayed on cancel button	"Cancel"	String
cancelButtonColor	Cancel Button Color	#aaa	String
cancelButtonAction	Function by clicking the cancel button	null	Func
image	Custom image in modal header	null	Object
imageWidth	Image width	60px	Number
imageHeight	Image height	60px	Number

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Iago Ronan

License

MIT