React Native Render Item in array one by one on button Click

Question

I intend to render each item in the array one by one on button click accordingly, with zero progress

`import React from 'react'; import { View, StyleSheet, SafeAreaView, Image } from 'react-native';

const imagesArray = [
    require('../assets/0.jpg'), 
    require('../assets/1.jpg'), 
    require('../assets/2.jpg'), 
    require('../assets/10.jpg'), 
]

function CheckMalaria(props) {
    const [image, setImage] = React.useState(imagesArray[0]);
    
    let index = 1
    const getImages = () => {
        let randomImage = Math.floor(Math.random()*imagesArray.length);
        setImage(randomImage)
    } 
    console.log(image)

    return (
       <Screen style={styles.container}>
            <AppHeaderText style={styles.headerText} children='Review in Progress' />

            
            <View style={styles.questionContainer}>
            <Image style={styles.image}  source={image} />

                <AppText style={styles.text} children={questionsArray[0]} />
            </View>
            
            <View style={styles.buttonContainer}>
                <AppButton title='Yes' color='secondary' onPress={() => getImages()} />
                <AppButton title='No' color='danger' />
            </View>
            
       </Screen>

    );
}
export default CheckMalaria;`

Kailash · Accepted Answer · 2022-09-27 03:47:42Z

You'll have to do likewise for showing image one by one, on click of next button -

 import React from 'react'; 
 import { View, StyleSheet, SafeAreaView, Image } from 'react-native'; 

 const imagesArray = [
        require('../assets/0.jpg'), 
        require('../assets/1.jpg'), 
        require('../assets/2.jpg'), 
        require('../assets/10.jpg'), 
    ]
    
    function CheckMalaria(props) {
        const [selectedImage, setSelectedImage] = React.useState(0);
        
        const nextImage = () => {
                setSelectedImage(prev => prev+1);
         }

        return (
           <Screen style={styles.container}>
        
            {/* Your Other Code */}

                <Image style={styles.image}  source={imagesArray[selectedImage]} />
    
                <AppButton title='Next Image ' color='secondary' onPress={nextImage} />
                 
           </Screen>
    
        );
    }
    export default CheckMalaria;`

Collectives™ on Stack Overflow

React Native Render Item in array one by one on button Click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related