Jerry Zhou
Jerry Zhou

Reputation: 43

React Native this.setState() only re-renders after interacting with the component again

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

Answers (1)

Dipan Sharma
Dipan Sharma

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

Related Questions