CODEWITHSUNDEEP
javascriptreact-native
OstrichGlue
OstrichGlue

Reputation: 345

Change React Native Image source on click

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>
    );
  }
}

Upvotes: 8

Views: 26151

Answers (3)

Artur Musin
Artur Musin

Reputation: 21

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;

Upvotes: 0

Raj Suvariya
Raj Suvariya

Reputation: 1664

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>
    );
  }
}

Upvotes: 8

Manish Ahire
Manish Ahire

Reputation: 1343

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
    });

}

Upvotes: 4

Related Questions