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-21T18:35:05.907

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 '17 at 18:35

answered Apr 05 '17 at 19:36

Codesingh

3,316
1
11
18

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 ! – TheNewbie Apr 19 '17 at 18:04
when you press plus button then what's happening ? – Codesingh Apr 19 '17 at 18:46
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. – TheNewbie Apr 19 '17 at 22:21
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 Apr 20 '17 at 18:48
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 :) – Codesingh Apr 20 '17 at 18:51
I fixed the plus button to work with the below code, but I have no loop. I tried playing with the code a lot, but nothing. All I can do is go back with minus and forward with plus, but after reaching the end I can't make it loop. – TheNewbie Apr 20 '17 at 22:26
My code was the same. I fixed it by removing all the code between `render() { let button1 = false; let button2 = false; ` and `return(` Thank you ! – TheNewbie Apr 22 '17 at 14:09
Now all I need is to change the animation when the images are changing. If you have any tips for that I would love to hear them, especially from a more experienced coder. I will probably try with some third party library. – TheNewbie Apr 22 '17 at 14:12
It would be difficult to implement because i don't have environment installed in my system...and giving you untested code will take time to resolve, if you don't mind can we work on team viewer..? – Codesingh Apr 22 '17 at 19:22
Pff, I thought I fixed it, but I had some problems. I don't really have time to work in TeamViewer. If you could write some suggestions on how to implement the animations, I could fix it after that. Hopefully. – TheNewbie Apr 23 '17 at 22:13
But now you implemented the animation part using third party... so think its perfect and there is no need to work on animation.... – Codesingh Apr 24 '17 at 18:19
It didn't work sadly. I thought it did. I still need the fade animation when changing the images. – TheNewbie Apr 24 '17 at 19:36
Yea, thats all I need. Fade is more than enough. I prefer a more simple way so I can understand the code and use it by myself later. – TheNewbie Apr 24 '17 at 20:21
I don't know if the React Animatable or a Third party is better for this like the : https://github.com/oblador/react-native-animatable. I tried it, but I couldn't implement it. I also tried React Native Layout Animations, but that also didn't work, no matter what I did I couldn't enable the experimental UIManager – TheNewbie Apr 24 '17 at 20:25
Did you try Fading Entrances in react-native-animatable? – Codesingh Apr 24 '17 at 20:26
I tried the Declarative way, but it didn't work. I am not sure where to place the code exactly. I tried it around the Image component, but didn't get anything. – TheNewbie Apr 24 '17 at 20:29
try this around your image component – Codesingh Apr 24 '17 at 20:33
container: { flex: 1, backgroundColor: '#F5FCFF', }, – Codesingh Apr 24 '17 at 20:33
I tried it but nothing. I also tried making it Animatable.View, then I tried with just the image Animatable.Image. Then I tried your code inside the Image directly without the View, but still no Animation. – TheNewbie Apr 24 '17 at 21:24

score 0 · Answer 2 · answered Apr 05 '17 at 19:59

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

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? — Rob, Apr 10 '17 at 20:53
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. — TheNewbie, Apr 11 '17 at 13:14

React-Native: How to make image array

2 Answers2

(NOTE: untested)