Is there any way to change the image on particular time period?

Question

I used some code to replace the image using state but for me not working.

React Native Environment Info: System: OS: macOS 10.14.4 CPU: (2) x64 Intel(R) Pentium(R) CPU 2127U @ 1.90GHz Memory: 21.40 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.14.1 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 IDEs: Xcode: 10.2/10E125 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: ^0.59.4 => 0.59.4 npmGlobalPackages: create-react-native-app: 2.0.2 react-native-cli: 2.0.1

import imagebuttontap from './../../assets/png/final_tap.gif';
import imagebuttonwave from './../../assets/png/final_wave.gif';

State defined

 this.state{OnImage: imagebuttonwave,};

Button event

ChangeMe(){
  this.setState({ showSoundImg: !this.state.showSoundImg });
  if(!this.state.showSoundImg){
    setTimeout(()=>{this.setState({OnImage:imagebuttontap})}, 4000)
    this.setState({OnImage:imagebuttonwave}); 
  }

renderImage(){
    if(this.state.showSoundImg){
        var imgSource = imagebuttonoff;
        this.state.appOn = 1;
    return (
      <Image
        style={{width:imageWidth, height:imageHeight}}
        source={imgSource }
      />
    );}
    else{
    this.state.appOn = 0;   
    var imgSource1 = imagebuttonwave;
     console.log('Button off');
    //this.setState({OnImage:imagebuttonwave});
    return (
      //<FLAnimatedImage
      <Image
        style={{width:imageWidth, height:imageHeight}}
        source={this.state.OnImage}
        //source={imagebuttonwave}
      />      
    );}}

Return Statement

<View style={styles.buttonMain}>
      <TouchableOpacity            
            onPress={ () => this.setState({ showSoundImg: !this.state.showSoundImg })}
          >
            {this.renderImage()}
       </TouchableOpacity>
     </View>

I expect to change the image in particular time period.

Would be great if you send the code of the full component. It's missing some parts, like what's initial state, ~~what is TouchableOpacity~~ (didn't notice it was react-native earlier), etc. — darth-coder
@darth-coder - TouchableOpacity is react native component. Which part you think missing because I shared each part that uses — Karan Prajapati

Karan Prajapati Karan Prajapati · Accepted Answer · 2019-05-22T08:06:52

renderImage(){

    if(this.state.showSoundImg){
        var imgSource = imagebuttonoff;
    //  this.state.appOn = 1;
    return (
      <Image
        style={{width:widthN, height:imageHeight}}
        source={imgSource }
      />

    );
   }
    else{
    var imgSource1 = imagebuttonwave;
    return (
      <Image
        style={{width:widthN, height:heightN}}
        source={this.state.OnImage}
      />      
    );
   }

//Calling From

<TouchableOpacity 
          onPress={ () => {this.setState({ showSoundImg: !this.state.showSoundImg })
          }} 
          >
                {this.renderImage()}
           </TouchableOpacity>

Is there any way to change the image on particular time period?

1 Answers