How to close a component like modal with React Native?

Question

I created a class Index that call a component "TelaAdd" like a modal. The Modal open but i don't know how to close that. I tried to use setShow but doesn't work. In the Modal has a Icon that was closing it before, but i had to change code creating a class component and it stopped working. I'd like to press the icon "IconVoltar" in Modal and close that.

Index.js

import  TelaAdd  from  ' ./AddHospital/Modal '


class Index extends Component 

{

constructor (props) {

    super(props)   
    this.state = {
        listaFirebase: [],
        showModal: false,
        search: ''              
    }}

   openModal(value) {

     this.setState({
        showModal: value })}


 render () {    
    return (            
        <Container>
          <TouchableOpacity style={styles.addButton}
            activeOpacity={0.7}
            onPress={() => this.openModal(true)}>

                <Icon name="plus" size={20} color='#f2f2f2' />
          </TouchableOpacity>

          <TelaAdd               
                show={this.state.showModal}
                setShow(that's right?) />
        </Container>

---

The other file Modal.js

export default ({ show, setShow })  =>  {

   const onCancel = () => 
    {
       setShow(false) 
    }

       return (
        <ModalHead transparent={ true } visible = { show }             
         animationType='slide' >
           <ModalArea>
                    <ModalBody>
                        <Voltar onPress = { (  => onCancel () } >
                            <IconVoltar width="30" height="30" fill="#000" />
                        </Voltar>
                   </ModalBody>
           </ModalArea>
       </ModalHead>"
}

Answer 1

Looks like you may need to bind this to the open modal handler.

This can be done in the constructor

constructor (props) {
  super(props)   ;
  this.state = {
    listaFirebase: [],
    showModal: false,
    search: ''              
  };

  this.openModal = this.openModal.bind(this);
}

Or can be done using an arrow function

openModal = (value) => {
  this.setState({ showModal: value });
};

It also appears you don't pass a setShow callback to the modal correctly, it looks like it should be the openModal callback.

render () {
  return (
    <Container>
      <TouchableOpacity style={styles.addButton}
        activeOpacity={0.7}
        onPress={() => this.openModal(true)}
      >
        <Icon name="plus" size={20} color='#f2f2f2' />
      </TouchableOpacity>
      <TelaAdd               
        show={this.state.showModal}
        setShow={this.openModal} // <-- pass this.openModal as setShow
      />
    </Container>