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

Question

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?

score 0 · Answer 1 · answered Feb 22 '19 at 07:07

0

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}/>

}
)

answered Feb 22 '19 at 07:07

Ahmad Zahid

13
6

Where can I load two components ON/OFF states? – Anilkumar iOS - ReactNative Feb 22 '19 at 07:18
Inside the render method – Ahmad Zahid Feb 22 '19 at 07:37
The thing is, In same screen, I am showing ON state data, And OF state data I have to switch to another component, and another thing is, I am showing toggle image is bottom of the screen which is I am showing ON state data. – Anilkumar iOS - ReactNative Feb 22 '19 at 07:44
I am new to this react native, Can you add that in above your solution? – Anilkumar iOS - ReactNative Feb 22 '19 at 07:47

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

1 Answers1