CODEWITHSUNDEEP
imagereact-nativeecmascript-6toggletouchablehighlight
Anilkumar iOS Developer
Anilkumar iOS Developer

Reputation: 3755

How to make image as toggle button to show two different images in react native

I am doing react native project. In that, I have to show custom image like toggle button, In that, for OFF one image and ON another image I have to display, And in that, two components should have to display according to ON/OFF states.

I am new to this domain.

I have knowledge to set image touchable/Onpress, but, How to set custom image and act like toggle according to that components switch.

this.toggleAction() = () => {
//switching components for ON/OFF states

}

 <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_toggle_on.png')} />
  onPress={() => this.toggleAction()}>
    </TouchableHighlight>

Any suggestions?

Upvotes: 0

Views: 2616

Answers (1)

Ahmad Zahid
Ahmad Zahid

Reputation: 13

You need to store the current state of Toggle button in a state variable:

this.state={
toggle:false
}

then you need to change the state in the onPress method of your TouchableOpacity. After that you just need conditional rendering to show the different images

   render(
<TouchableOpacity onPress={()=>this.setState({toggle:!this.state.toggle})}>
   
{
  this.state.toggle==true?
 <Image src={ YOUR TOGGLE ON SOURCE}/>
 :
 <Image src={ YOUR TOGGLE Off SOURCE}/>

}
)

Upvotes: 0

Related Questions