How to use Image Component in React Native?

Hi Guys,

Today our leading topic is how to use the Image component in react native. this example will help you how to implement react native Image component example. it's a simple example of an image component in react native. if you have a question about how to add Images in react native then I will give a simple example with a solution. you will do the following things for how to create Images in react native.

I will give you a simple example of how to display Image in react native. This example shows fetching and displaying an image from local storage as well as one from the network.

So, let's following example:

Step 1 - Create project

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

expo init Images

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, Image, ScrollView } from 'react-native';

export default function App() {
    return (
        <ScrollView>
            <View style={styles.container}>
                <Image 
                    source={{
                        uri:'https://www.nicesnippets.com/image/nice-logo.png?ezimgfmt=rs:238x47/rscb1/ng:webp/ngcb1',
                    }}
                    style={styles.img1}
                    resizeMode='contain'
                />
                <Image 
                    source={require('./assets/react.png')}
                    style={styles.img2}
                    resizeMode='contain'
                />
            </View> 
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems:'center',
        marginTop:150,  
    },
    img1: {
        width:350,
        height:150,
    },
    img2: {
        width:500,
        height:200,
        marginVertical:10,
        borderRadius:20,
    },
});

Step 3 - Run project

In the last step run your project using bellow command.

expo start --web

Now run your project in a browser.

port : http://localhost:19006/

Output:

It will help you...