Modal not hiding when setState updates are done in try / catch and the response is quick

[lucastonon]

Hi, I would like to reopen #10417

I am having this problem for a while and the only solution that worked for me was to create a timeout big enough that even in slow devices it works.

When using try/catch, if the work is finished quickly (quick api responses for instance), when we setState({showLoader: false}) it won't remove the Modal and we will have to close and run the app again to clear it.

I am going to use the same example as the issue link mentioned

makeRequest = () => {
  this.setState({ loading: true })
  Media.request(url)
  .then(response => {
    // todo
  }, e => {
    this.setState({ loading: false })
  })
}

render() {
  return(
    <View>
      <Modal
          animationType={'slide'}
          transparent={false}
          visible={this.state.loading}
          onRequestClose={() => {} }
       >
        <View></View>
      </Modal>
      <Text onPress={this.makeRequest}>Do Magic</Text>
    </View>
  )
}

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[RinorDreshaj]

have you tried putting the request after the setState

makeRequest = () => {
	this.setState({ 
		loading: true 
	}, () => {
		// this ensures that the state has been set to loading: true
		Media.request(url)
		.then(response => {
			// todo
		}, e => {
			this.setState({ loading: false })
		})	
	})
}

and to make the code cleaner you can use .catch clause as its the same as onRejected callback: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

and even better use the finally clause to set the loading to false, so you know that either if promise is fulfilled or rejected the laoding will be set to false

makeRequest = () => {
	this.setState({ 
		loading: true 
	}, () => {
		// this ensures that the state has been set to loading: true
		Media.request(url)
		.then(response => {/* todo */})
		.catch(error => {})
		.finally(() => {
			this.setState({ loading: false })
		})		
	})
}

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.