CODEWITHSUNDEEP
reactjsreact-native
m0ngr31
m0ngr31

Reputation: 830

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?

Upvotes: 0

Views: 51

Answers (1)

ericf89
ericf89

Reputation: 379

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.

Upvotes: 2

Related Questions