0

Hi I am trying to change image on a button click but cant seem to get the image to change. Here is my code. 

constructor(){
   super()
   this.state = {
      autologin_active: true
   }
}

toggleAutoLogin(){
   this.state.autologin_active = this.state.autologin_active ? false : true;
}


<TouchableHighlight onPress={() => this.toggleAutoLogin()} style={styles.registerButton} underlayColor='#99d9f4'>
  <View style={styles.detailBoxTick}>
    <Image style={styles.imageTickStyle} source={this.state.autologin_active ? Images.rememberTickImg : Images.rememberUnTickImg} />
    <Text style={styles.tickBoxText}>
      Auto Login
    </Text>
  </View>          
</TouchableHighlight>

can some one please help. Not sure what I am doing wrong. Have checked with alert that the state is changing on click. Thanks in advance

dogwasstar
  • 852
  • 3
  • 16
  • 31

1 Answers1

1

If I got you correctly, in toggleAutoLogin(), you are updating your state with this.state.autologin_active = ..... which is updating the state but preventing the re-render so that you can't see the image changing.

You need to update the state with setState({}) in order to re-render the component (Image).

Your code for toggleAutoLogin() would be:

this.setState({ autologin_active: this.state.autologin_active ? false : true})

Roshan Gautam
  • 480
  • 1
  • 5
  • 15