I currently have an Image wrapped inside of a TouchableOpacity tag. The image is of a sound icon, and when the user clicks it, I would like the icon to switch between the "sound on" icon and the "sound off" icon. The relevant code can be seen below. I'm not worrying about the toggle portion of it yet, I just would like to be able to switch the image when tapping it.

Simplified code is below:

const soundImg = require('../images/sound.png');
const muteImg = require('../images/sound-mute.png');

class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
  };
  render(){
    let imageXml = <Image
      style={ homeStyles.optionsImage }
      source={ gearImg }
    />;
    return (
      <View style={ commonStyles.container }>
        <View style={ commonStyles.footer }>
          <TouchableOpacity
            style={ homeStyles.soundButton }
            onPress={ () => imageXml.source = { muteImg } }>
            { imageXml }
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

I currently have an Image wrapped inside of a TouchableOpacity tag. The image is of a sound icon, and when the user clicks it, I would like the icon to switch between the "sound on" icon and the "sound off" icon. The relevant code can be seen below. I'm not worrying about the toggle portion of it yet, I just would like to be able to switch the image when tapping it.

Simplified code is below:

const soundImg = require('../images/sound.png');
const muteImg = require('../images/sound-mute.png');

class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
  };
  render(){
    let imageXml = <Image
      style={ homeStyles.optionsImage }
      source={ gearImg }
    />;
    return (
      <View style={ commonStyles.container }>
        <View style={ commonStyles.footer }>
          <TouchableOpacity
            style={ homeStyles.soundButton }
            onPress={ () => imageXml.source = { muteImg } }>
            { imageXml }
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

• javascript
• react-native

• store the image source in state and do a setState() with new image source on button press. This will rerender the component and you can set the new image from the state. – Ankit Aggarwal Commented Jun 17, 2017 at 19:29

3 Answers 3

Tag is JSX Syntax so you cannot edit its property by .(dot) syntax. Following is the correct way to do it.

import soundImg from '../images/sound.png';
import muteImg from '../images/sound-mute.png';

class HomeScreen extends Component {
  constructor() {
    super();
    this.state = { showSoundImg: true };
  }
  static navigationOptions = {
    header: null,
  };
  renderImage() = {
    var imgSource = this.state.showSoundImg? soundImg : muteImg;
    return (
      <Image
        style={ homeStyles.optionsImage }
        source={ imgSource }
      />
    );
  }
  render(){
    return (
      <View style={ commonStyles.container }>
        <View style={ commonStyles.footer }>
          <TouchableOpacity
            style={ homeStyles.soundButton }
            onPress={ () => this.setState({ showSoundImg: !this.state.showSoundImg }) } 
          />
            {this.renderImage()}
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

I'm using the following way and its working fine.

class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
};

constructor() {
    super();

    this.state = {
      flagImage:true
    };
}

render(){
    let imageXml = <Image
      style={ homeStyles.optionsImage }
      source={ gearImg }
    />;
    return (
      <View style={ commonStyles.container }>
        <View style={ commonStyles.footer }>
          <TouchableOpacity
            style={ homeStyles.soundButton }
            onPress={ this.changeImage }>

          <Image source={ this.state.flagImage === true ?                  
                          require('../images/sound.png') : 
                          require('../images/sound-mute.png')}
           />

          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

changeImage() {

   this.setState({
      flagImage:!this.state.flagImage
    });

}

This is how I implemented toggle control with component function.

import React, { useState } from 'react';
import { View, Image, StyleSheet, Pressable, Text, Switch } from 'react-native';

import images from '../assets/images';


function ToggleControl(props) {
    
    let [flag, setFlag] = React.useState(true);
    let toggleSwitch = () => setFlag(previousState => !previousState);
    
    let imageUri = flag ? images.toggleOn : images.toggleOff;

    return (
        <Pressable onPress={ () => toggleSwitch() } >
            <Image source={{ uri: imageUri }} style={{width: 44, height: 20}}  />
        </Pressable>
    );
}

export default ToggleControl;