CODEWITHSUNDEEP
reactjsreact-native
amit
amit

Reputation: 10261

TouchableHighlight not respecting state change

I have a <TouchableHighlight> component wrapping a <Text>, and onPress I am setting the state boolean to false to make it disappear. Works like a charm on iOS but on Android, the <Text> disappears but the <TouchableHighlight> is still rendered.

Any pointers? 

{(this.state.showUpdateToast && this.state.updateCount > 0) ?
          (<TouchableHighlight 
            underlayColor='rgba(116, 59, 243, 1)' 
            style={styles.toast} 
            onPress={this.refresh.bind(this)}
          >
            <Text style={styles.toastText}>
              {this.state.updateCount}{this.state.updateCount < 2 ? this.props.getLabel('updateToastSingle') : this.props.getLabel('updateToast')}
            </Text>
          </TouchableHighlight>) 
          : null
        }

Upvotes: 3

Views: 436

Answers (1)

Saleel
Saleel

Reputation: 899

Not sure if this will solve the issue, but can you try something like this:

<TouchableHighlight
  underlayColor="rgba(116, 59, 243, 1)"
  style={[styles.toast, !(this.state.showUpdateToast && this.state.updateCount) && { opacity: 0 }]}
  onPress={this.refresh.bind(this)}
>
  <Text style={styles.toastText}>
    {this.state.updateCount}{this.state.updateCount < 2 ? this.props.getLabel('updateToastSingle') : this.props.getLabel('updateToast')}
  </Text>
</TouchableHighlight>

Upvotes: 2

Related Questions