m0ngr31 February 2016

State updating, but not applying everywhere

I'm trying to make a loading indicator replace an image when a button is pushed, but it's not working right. Here's what my view looks like:

<View style={styles.header}>
   <ProgressBarAndroid style={this.state.showProgress ? styles.image : styles.hidden } />
   <Image style={this.state.showProgress ? styles.hidden : styles.image } source={{uri: '....'}} />
</View>

this.state.showProgress is set to false in the constructor, and nothing will show up at first, but when I push the button which runs this.setState({showProgress: true}), the loading indicator shows up.

Is there something I'm missing? If I copy the ternary operator from the ProgressBarAndroid control, I'll get the image showing up at the same time as it, but why not the reverse?

Is there a better way to accomplish this?

Answers


ericf89 February 2016

You could also do something like

<View style={styles.header}>
   { this.state.showProgress ? 
      <ProgressBarAndroid style={styles.image} /> : 
      <Image style={styles.image} source={{uri: '....'}} />
   }
</View>

That way you only have a single ternary and it's a little easier to look at. If that still doesn't work, there may be something wrong with the styles/elements specifically. You could post those so we could take a look.

Post Status

Asked in February 2016
Viewed 3,445 times
Voted 13
Answered 1 times

Search




Leave an answer