React Native Image Changer

Question

I have six images,i want change this images with two button, back button and next button.If i using two images no problem but i using six images have problem.

ss2 ss3

Welcome to [so]! Questions along the lines of "I want to do X; can someone tell me how to write my code?" are considered off-topic on Stack Overflow. Please see [help/on-topic] for more details. Note that if your question is, "I want to do X and I tried approach Y but it didn't work; can anyone help me figure out what I did wrong?" then that question is on-topic on Stack Overflow, and you'll find many people willing to help you with your problem. — lucascaro, Mar 04 '19 at 19:06

Subhendu Kundu · Accepted Answer · 2019-03-05T06:51:10.563

0

So you have to keep the data in a array and do a setState of the index on button click to the next one. Suppose current index is 0, when you click on next, increment the index to 1 and do a setState. For example,

import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { View, TouchableOpacity, Image, Text } from 'react-native';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            images: [],
            selectedIndex: 0
        }
    }

    _ToggleNext = () => {
        if(this.state.selectedIndex == this.state.images.length - 1)
            return;

        this.setState(prevState => ({
            selectedIndex: prevState.selectedIndex + 1
        }))
    }

    _TogglePrev = () => {
        if(this.state.selectedIndex == 0)
         return;

        this.setState(prevState => ({
            selectedIndex: prevState.selectedIndex - 1
        }))
    }

    render() {
        const {selectedIndex, images} = this.state;
        return (
             <View>
                  <Image
                    source={{ uri: images[selectedIndex]}}
                    style={styles.image}
                  />
                  <TouchableOpacity onPress={this._ToggleNext}>
                    <Text>Next</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={this._TogglePrev}>
                    <Text>Pr</Text>
                  </TouchableOpacity>
             </View>
        )
    }
}

EDIT: Link - https://snack.expo.io/rysnt5iUV

edited Mar 05 '19 at 06:51

answered Mar 04 '19 at 18:43

Subhendu Kundu

3,618
6
26
57

Thanks how i add my images i try and i have error this.state = { images: [('./images.png')], selectedIndex: 0 } – Hüseyin Tamer Mar 04 '19 at 19:21
Umm so if you add `this.state = { images: ['./images.png', './images1.png', './images2.png', './images3.png', './images4.png']` then you need to change the source of Image a bit different. For more info try https://facebook.github.io/react-native/docs/image or https://stackoverflow.com/questions/53482449/wants-to-set-image-url-by-using-state-in-react-native – Subhendu Kundu Mar 04 '19 at 19:34
I try but images does not seem this.state = { images: ['./image1.png','./image2.png', './image3.png'], selectedIndex: 0 } – Hüseyin Tamer Mar 04 '19 at 19:54
Thats why I gave the other two links :) So you need to change `` to `` Try this will work. – Subhendu Kundu Mar 04 '19 at 20:03
I try two links and i changed [] . but this time i have error code 500 – Hüseyin Tamer Mar 04 '19 at 20:17
My rn version is 0.56 and this images have local – Hüseyin Tamer Mar 04 '19 at 20:17
Cause the images arent there in your project. You need add this images. – Subhendu Kundu Mar 04 '19 at 20:18
i check the path, no problem. – Hüseyin Tamer Mar 04 '19 at 20:27
Send a screenshot of your directory and path of your js file where you are requiring them – Subhendu Kundu Mar 04 '19 at 20:28
@SubhenduKundu `require(images[selectedIndex])` you cannot do this as this is a dynamic require and `react-native` doesn't support dynamic requires. – Andrew Mar 04 '19 at 21:16
Aha, I hear what you saying Andrew, I have added a working example. @HüseyinTamer, you can follow the example. :) – Subhendu Kundu Mar 05 '19 at 06:50
All the best :) – Hüseyin Tamer Mar 05 '19 at 22:06

React Native Image Changer

1 Answers1