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 |