Creating Modal Object need help dealing with isVisible state

Question

I am currently trying to create a Modal object using react-native-modal like this

const ModalExample = (props) => {
    return (
        <Modal isVisible={props.isVisible}>
               <Text>Hello!</Text>
               <Button title="Hide modal" onPress={this.setModalVisibility} />
        </Modal>
    )
}

The problem is that the onPress is supposed to change the state from true to false but doesn't have access to the state within the class. Here is the button that initializes the modal and how i'm calling the object:

<Button title="Show modal" onPress={this.setModalVisibility} />
<ModalExample isVisible={this.state.modalVisible}/>

and just incase here is my setModalVisibility that is within the class

setModalVisibility = () =>{
     this.setState({modalVisible: !this.state.modalVisible})
}

Thanks for any help

ravibagul91 · Accepted Answer · 2019-09-18 01:27:20Z

1

You need to pass the function as well,

<ModalExample isVisible={this.state.modalVisible} setModalVisibility={this.setModalVisibility}/>

Call that function in modal,

const ModalExample = (props) => {
    return (
        <Modal isVisible={props.isVisible}>
             <Text>Hello!</Text>
             <Button title="Hide modal" onPress={props.setModalVisibility} />
        </Modal>
    )
}

Note: You don't have access to this in functional component.

edited Sep 18, 2019 at 1:27

answered Sep 18, 2019 at 1:25

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wilson Sim Over a year ago

If it helps, please mark it as the solution and close the question. thanks!

Collectives™ on Stack Overflow

Creating Modal Object need help dealing with isVisible state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related