react-native-button-modal

ButtonModal

Demo (source code in example file)

Installation

If react-native-vector-icons and native-base haven't been installed already, use the following:

$ npm install native-base --save
$ npm install react-native-vector-icons --save
$ npm install react-native-button-modal --save

If both have been installed, use the following:

$ npm install react-native-button-modal --save

Usage

Import the ModalButton

import ModalButton from 'react-native-modal-button';

Initialize the state variables (inside the constructor of the parent component)

constructor(props) {
    super(props);
    this.state = {
      displayPopup: false,
    };
 }

Create the ModalButton

<ButtonModal
    success={false}
    reference='popup'
    content={
        <Popup/>
    }
    buttonMessage={'Click here to display popup'}
    buttonType={'rectangle'}
    isVisible={this.state.displayPopup}
    showModal={() => this.setState({displayPopUp: true})}
    hideModal={() => this.setState({displayPopup: false})}
/>

Full Example

Initialize the state variables and the handler

import React, {Component} from 'react';
import {Button} from 'react-native';
import ModalButton from 'react-native-modal-button';
 
export default class ParentExample extends Component{
    constructor(props) {
        super(props);
        this.state = {
          counter: 0,
          modalSuccess: false,
          isModalVisible: false, //YOU MUST HAVE A STATE VARIABLE TO DECIDE MODAL VISIBILITY
        };
        this.updateCounter = this.updateCounter.bind(this)
    }
 
    updateCounter(){
    if(this.state.counter < 10){
      this.setState({
        counter: this.state.counter + 1,
      })
    }else{
      this.setState({
        counter: 10,
        modalSuccess: true, //the button will turn green after ten clicks
      })
    }
  }
 
    render(){
        return(
            <ButtonModal
                success={this.state.modalSuccess}
                content={
                    <Button onPress={this.updateCounter}></Button>
                }
                buttonMessage={'Click here to display popup'}
                buttonType={'rectangle'}
                isVisible={this.state.isModalVisible}
                showModal={() => this.setState({isModalVisible: true})} //OPENS THE MODAL
                hideModal={() => this.setState({isModalVisible: false})} //HIDES THE MODAL
            />
        );
    }
}

Prop	Type	Default Value	Description
isModalVisible	boolean	FALSE	Decides if the modal will display
buttonType	String	rectangle	Decides the type of initial button to display (either 'rectangle' or 'icon')
iconName	String	rectangle	React Native Vector Icon name (can only be used if buttonType == 'icon')
buttonMessage	String	Click here	The message inside the initial button (can only be used if buttonType=='rectangle')
content	node	null	The content to be displayed inside the modal
iconSize	int	27	Specifies the size of the icon
buttonTextSize	int	15	Font size of the text inside the initial button
confirmTextSize	int	15	Font size of the text inside the confirm button
allowClick	int	TRUE	Allow the modal to be opened. If set to false, the initial button will grey out. If true, the initial button will be darker.
allowClose	int	TRUE	Allow the modal to be closed. If set to false, the confirm button will grey out. If true, the initial button will display dark blue.
success	boolean	FALSE	Changes the color of the initial button to green.
showModal	function	null	Specifies the function to open the modal
hideModal	function	null	Specifies the function to close the modal.
closeButtonText	String	Confirm	Message on close button.
disableConfirm	Boolean	FALSE	Disable the confirm button, but allows the modal to be closed with the back arrow and swipe down.
hideConfirmButton	Boolean	FALSE	Hide the confirm button.
openButtonBackgroundColor	String	white	Button to open modal's background color
openButtonTextColor	String	black	Button to open modal's text color
closeButtonBackgroundColor	String	blue	Button to close modal's background color
closeButtonTextColor	String	black	Button to close modal's text color