React Native Image Component Example

Apr 20, 2022 . Admin

Hi Guys,

In this article we will cover how to implement react native Image component example. if you have questions about how to work with images in react native then I will give a simple example with a solution. step by step explain how to add Images in react native. We will use how to create Images in react native. Follow the below tutorial step on how to use the Image component using 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.mywebtuts.com/image/logo-1.png',
                    }}
                    style={styles.img}
                    resizeMode='center'
                />
                <Image 
                    source={require('./assets/react.png')}
                    style={styles.img}
                    resizeMode='contain'
                />
            </View> 
        </ScrollView>
    );
}

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

Step 3 - Run project

In the last step run your project using bellow command.