React Native Random Image Example

Jun 24, 2022 . Admin

Hi Guys,

I am going to show you example of how to create random image in react native. Here you will learn how to implement random image in react native. This tutorial will give you simple example of random image example in react native. it's simple example of react native random image example. So, let's follow few step to create example of how to use random image in react native.

In this example I will create a function called renderImage. This function stores images in an object called images. Then JavaScript Math.floor () and Math.random () functions.useEffect run on each render. This means that when the image changes, it renders, which then triggers another effect so I use the effect to render the image function. Then I will import the image component. I will call this component source props render image function. Then when the screen is refreshed I will be shown a different image.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Card, Title} from 'react-native-paper';

const App = () => {
    const [randomImage, setRandomImage] = React.useState('');
   
    const renderImage = () => {
        const Images = [
          { image: 'https://miro.medium.com/max/1024/1*xDi2csEAWxu95IEkaNdFUQ.png' },
          { image: 'https://image.shutterstock.com/image-vector/javascript-programming-language-script-code-260nw-1062509657.jpg' },
          { image: 'https://res.cloudinary.com/practicaldev/image/fetch/s--X2WDI7b6--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/i/2jlduu7hh4ry0q77akap.png' },
          { image: 'https://www.php.net/images/meta-image.png' },
        ];
        const randomImageIndex = Math.floor(Math.random() * Math.floor(4));
        return Images[randomImageIndex].image;
    };    
    
    React.useEffect(() => {
        setRandomImage(renderImage);
    });

    return (
        <View style={styles.container}>
            <Card>
                <Card.Content style={{ backgroundColor:'#3ae9ef' }}>
                    <Title style={{ textAlign:'center',marginBottom:15 }}>React Native Random Image</Title>
                </Card.Content>
                <Card.Cover source={{ uri: renderImage() }} />
            </Card>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:0.75,
        justifyContent:'center',
        padding:10,
    },
    image: {
        width:'100%',
        height:160,
        marginBottom:10,
    },
    title: {
        fontSize:20,
        marginBottom:20,
    },
});

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...

#React Native