React-Native: How to make image array

Question

I have a screen on which I want to have 4 images.

How can I make it so that when I click on the image it goes to the next one from the array (I suppose that's how it would be made). I also wanted to have buttons to go to the next image or go back to the previous one in addition to the touch.

I hope someone could assist me with this. I am not sure how to approach it. I want to find the best way to implement it.

Thank you !

UPDATE: Everything works thanks to Codesingh's answer !

Codesingh · Accepted Answer · 2017-04-21 18:35:05Z

3

I'm considering that you have 3 images.

Please go through it:

    var arr=[{image:require('image1')},{image:require('image2')},{image:require('image3')}];

    Class CoolSlider extends component{

    constructor(props)
    {
      super(props);
      this.state = {
        counter:0,
      }
    }

    changeImage(button)
    {
      if(button == 1)
      {
        this.setState({counter: this.state.counter + 1})
      }
      else
      {
        this.setState({counter: this.state.counter - 1}) 
      }

    }

    render()
    { 

      let button1 = false,button2 = false; 
     if(this.state.counter == 0)
      {
        //make the previous button disable
         button2=true;
      } 

     if(this.state.counter == 2)
     {
         button1=true;
     } 

    //     if(arr.length == 1 )
    //    {
    //        button1=true;
    //        button2=true;  
    //    }
return (
    <View>
    <Image source = {arr[this.state.counter].image} />
    <TouchableHighlight disabled={button1} onPress = this.changeImage(1)>
    <Text>
      Next
    </Text>
    </TouchableHighlight>

    <TouchableHighlight disabled={button2} onPress = this.changeImage(2)>
    <Text>
      Previous
    </Text>
    </TouchableHighlight>
)
    }
    }

The edit is here:

changeImage(button) {
    if(button == 1) {
      //if you reach the end i.e below statement then counter 0
      if (this.state.counter == arr.length - 1) this.setState({counter: 0})
      else this.setState({counter: this.state.counter + 1})
    }
    //similarly if you reach the starting then counter will be at end of the 
    array 
    else {
      if (this.state.counter == 0) this.setState({counter: arr.length - 1})
      else this.setState({counter: this.state.counter - 1}) 
    }
  }

Cheers:)

edited Apr 21, 2017 at 18:35

answered Apr 5, 2017 at 19:36

Codesingh

3,3941 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

TheNewbie Over a year ago

Quick question. I tried to make it loop like Rob suggested below you, but I can't seem to make it work do you have any idea how to do it ? I don't get error, it just doesnt work. I want to be able to just press the plus button and the images to loop. Everything else works perfectly the way you did it. Thanks !

Codesingh Over a year ago

when you press plus button then what's happening ?

TheNewbie Over a year ago

Actually nothing. Only the minus button goes to the previous image. But the plus doesn't do anything. If I do it like Rob below. Also if I press the minus after it reached the last image, it won't loop. So the app starts. I can click twice the minus button and then, nothing.

Codesingh Over a year ago

The problem is here : if(button == 1) { if (this.state.counter == arr.length - 1) this.setState({counter: 0}) else this.setState({counter: this.state.counter + 1}) }

Codesingh Over a year ago

whenever the this.state.counter in his code reaches to the end of the array then change the state to 0.. But this.state.counter never reaches because it's not getting incremented and it will get incremented only when it goes inside the above if statement in the comments and it never reaches inside so button does nothing :)

|

Rob · Accepted Answer · 2017-04-05 19:59:17Z

1

You could also make this an infinite loop with a small modification to @Codesingh's answer. I also changed it to not be specific to the number of images you have, and formatted it correctly as per recommended JS coding standards:

(NOTE: untested)

const arr = [require('image1'), require('image2'), require('image3')];

Class CoolSlider extends component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
  }

  changeImage(button) {
    if(button == 1) {
      if (this.state.counter == arr.length - 1) this.setState({counter: 0})
      else this.setState({counter: this.state.counter + 1})
    } else {
      if (this.state.counter == 0) this.setState({counter: arr.length - 1})
      else this.setState({counter: this.state.counter - 1}) 
    }
  }

  render() {
    let button1 = false,button2 = false; 
    if(this.state.counter == 0) {
      //make the previous button disable
      button2=true;
    } 

    if(this.state.counter == (arr.length - 1)) {
      button1=true;
    } 


    return (
      <View>
        <Image source = {arr[this.state.counter]} />
        <TouchableHighlight disabled={button1} onPress = this.changeImage(1)>
          <Text>
            Next
          </Text>
        </TouchableHighlight>

        <TouchableHighlight disabled={button2} onPress = this.changeImage(2)>
          <Text>
            Previous
          </Text>
        </TouchableHighlight>
      </View>
    )
  }
}

answered Apr 5, 2017 at 19:59

Rob

1,25313 silver badges24 bronze badges

2 Comments

Rob Over a year ago

Please update with the different versions you are using - you can find out the react native versions with the following commands: react-native -v. Also, are you getting any errors at all?

TheNewbie Over a year ago

Sorry for that ! These are the versions I am using of react: react-native-cli: 2.0.1 react-native: 0.42.0 I only get error if I enable remote debugging. Otherwise just a white screen and after around 30 seconds, the app stops responding and crashes. I added two screenshots to the main post of the error. The full one is insanely long.

Collectives™ on Stack Overflow

React-Native: How to make image array

2 Answers 2

19 Comments

(NOTE: untested)

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

(NOTE: untested)

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related