How to close a modal in react native? - reactjs

Question

I am unable to close a modal. I am displaying few images inside it, and onPress of the "X(close)" icon, want to close the modal. I have tried setting the state of modalvisible to false, by default which is set to true. But on press of icon the modal doesn't gets closed. Any solution would be of great help.
export default class imagenav extends Component{
constructor(props){
super(props)
state = {
modalVisible: false,
}
}
openmodal(){
this.setState(modalVisible: true)
}
render() {
return (
<Container>
<Modal onRequestClose={() => {}}>
<GallerySwiper
style={{ flex: 1, backgroundColor: "black" }}
images={[
{source: {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",
dimensions: {width: 1080, height: 1920}}
},
]}
/>
<Header
style={{
backgroundColor: 'black',
borderBottomWidth: 0,
}}
>
<Right>
<Icon
name='close'
color='white'
onPress={() => {
this.setState({
modalVisible: false,
})
console.log("getting closed");
}}
/>
</Right>
</Header>
</Modal>
</Container>
);
}
}

Answer 1

You could use an inline if to only render your modal is your state allows it :
{this.state.modalVisible &&
<Modal onRequestClose={() => { }}>
<GallerySwiper
style={{ flex: 1, backgroundColor: "black" }}
images={[
{
source: {
uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",
dimensions: { width: 1080, height: 1920 }
}
},
]}
/>
<Header
style={{
backgroundColor: 'black',
borderBottomWidth: 0,
}}
>
<Right>
<Icon
name='close'
color='white'
onPress={() => {
this.setState({
modalVisible: false,
})
console.log("getting closed");
}}
/>
</Right>
</Header>
</Modal>
}

Answer 2

You have a state, but you are not using it
<Modal onRequestClose={()=> this.openmodal(false)} visible={this.state.modalVisible}> should be good to go.
oh and your openmodal function can be used for opening and closing the modal
openmodal(value){
this.setState({modalVisible: value})
}
<Icon
name='close'
color='white'
onPress={() => {
this.openmodal(false)
console.log("getting closed");
}}
/>

Answer 3

It is enough to put a state for it in visible as bellow:
<Modal onRequestClose={()=> null} visible={this.state.active} transparent={true}>
/////your Views and things to show in modal
</Modal>
in your state you have to make it as blew:
constructor(props) {
super();
this.state = {
active:false,
}
}
And then you have to toggle it in an onPress for example:
onPress=()={
this.setState({active:true})
}
So totally in your project you will have:
export default class imagenav extends Component{
constructor(props){
super(props)
state = {
modalVisible: false,
}
}
openmodal(){
this.setState({modalVisible: true})
}
render() {
return (
<Container>
<Modal visible={this.state.modalVisible} onRequestClose={() => {}}>
<View style={{flex:1}}>
<GallerySwiper
style={{ flex: 1, backgroundColor: "black" }}
images={[
{source: {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",
dimensions: {width: 1080, height: 1920}}
},
]}
/>
<Header
style={{
backgroundColor: 'black',
borderBottomWidth: 0,
}}
>
<Right>
<Icon
name='close'
color='white'
onPress={() => {
this.setState({
modalVisible: false,
})
console.log("getting closed");
}}
/>
</Right>
</Header>
</View>
</Modal>
</Container>
);
}
}
Update:
According to your last request there is a way. You can pass flag to your next screen and in the componentDidMount() of next screen you can check it. if it is true you can show the modal otherwise ignore it.
I hope I could help. :)