Change React Native Image source on click

Question

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 \"

Answer 1

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 (
      
    );
  }
  render(){
    return (
      
        
           this.setState({ showSoundImg: !this.state.showSoundImg }) } 
          />
            {this.renderImage()}
          
        
      
    );
  }
}