react-native-button-modal v1.1.4

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