CODEWITHSUNDEEP
javascriptiosreact-native
Brandon
Brandon

Reputation: 161

React Native Modal Not Closing

I'm overlaying the following Modal component in my iOS app while waiting for several async requests to come back. 

<Modal transparent={true} visible={this.state.visible}>
    <View style={{flex: 1}}>
        <ActivityIndicator color="white" size="large"/>
    </View>
</Modal>

this.state.visible is set to false once all the requests have returned. However, about 50% of the time the modal remains on the screen indefinitely, even after the requests have come back. I've logged this.state.visible at the top of my render function and it is false as expected, yet the modal does not disappear. Any thoughts as to why this may be happening?

Upvotes: 16

Views: 17259

Answers (3)

Awais Ibrar
Awais Ibrar

Reputation: 635

You can use the react-native-paper modal.

import { Modal } from 'react-native-paper';

Upvotes: 0

Ankit Pandey
Ankit Pandey

Reputation: 220

A simple solution for now, before showing the dialog again, first, make it invisible with time delay, then show the dialog again

this.setState({
    showPopUp: false,
  }, () => {
    let timer = setTimeout(() => {
      this.setState({
        showPopUp: true,
      });
    }, 300);
  })

Upvotes: 3

Eduardo Sganzerla
Eduardo Sganzerla

Reputation: 971

Perhaps it was the same problem I'm facing here.

I get this problem when closing one modal and opening another, some people are getting this with a modal and an alert...

https://github.com/facebook/react-native/issues/10471

For now, the solution is a timeout before the action (600ms should solve it).

Upvotes: 5

Related Questions