Reputation: 43
Normally when using this.setState(), the component re-renders after updating state via setState(). Unfortunately, I have this problem where the state updates but the component doesn't re-render until interacting with the component again (i.e. clicking the component again). Here's my code:
constructor(props) {
super(props);
this.state = {
value: new Date(),
time: 0,
displayTime: null,
show: false,
};
this.showTimePicker = this.showTimePicker.bind(this);
}
showTimePicker() {
console.log(this.state.show);
this.setState({show: true}, () => console.log(this.state.show));
//console.log to verify state changes
}
render() {
return(
<View>
//code that determines if the datetimepicker modal shows up
{this.state.show && (
<DateTimePicker
value={this.state.value}
mode="time"
display="spinner"
onChange={(date, value) => {
console.log(value, 'value');
this.setTime(value);
setShow(this.state.show);
}}
/>
)}
//when button is pressed this.state.show changes to true
<Button title="Change Time" onPress={this.showTimePicker}></Button>
</View>
);}
So what I want is for the DateTimePicker modal to show up every time the button is pressed. What happens currently though is when I press the button nothing registers (state still changes) until I click the screen again (then the modal shows up). How can I get it so that the button makes the modal pops up instantly?
Upvotes: 1
Views: 550
Reputation: 1133
I faced the same issue while I was using the app in debug mode
, So can just disable the debug mode and it should work properly.
Here is the similar question : UI doesn't update until tap on the screen when setState is called inside a realm listener callback
Upvotes: 2