React Native Image Examples

In this tutorial we will learn how to load image in React Native from a live URL or from the assets folder. It will contain a string if using a live URL or the path of the image from the folder.

fluttertpoint.com
fluttertpoint.com

Types of Images in React Native

Mainly there are two types of images which are used in every application. Either from a live server which contains a string URL or can be from the local folder. We will create examples for both types of images.

  • Image from the live URL
  • Image from the local folder

1. Image In Class Component In React Native

In this example we loaded both type images, Network image and local disk image.

import React, { Component } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    render() {
        return (
            <SafeAreaView style={styles.mainView}>
                <View style={styles.mainView}>

                    {/* Image from the assets folder */}
                    <Image source={require('../assets/logo.png')} />

                    {/* Image from the URL */}
                    <Image
                        style={styles.tinyLogo}
                        source={{ uri: 'https://www.fluttertpoint.com/wp-content/uploads/2021/09/cropped-FlutterTPoint-Logo-3-220x54.png' }}
                    />
                    
                    <Image
                        style={styles.logo}
                        source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
                    />

                </View>
            </SafeAreaView>

        );
    }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        margin: 15,
        justifyContent: 'center',
    },
    tinyLogo: {
        marginTop: 20,
        width: 300,
        height: 60,
    },
    logo: {
        marginTop: 50,
        width: 66,
        height: 58,
    },
})

To browse the image from the local disk first create a folder and put the image in that folder. You can copy and paste from other folder. After that provide the path of that image inside the require which is a property of source of Image tag. Simply create an assets folder and paste the images there. Assets folder is commonly created in general projects to store the media files.

2. React Native Image in Functional Component

The image tag which loads the image from the URL or from the local folder is remain same as in class component. Only the functional component changes.

import React, { Component } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const Home =()=>{
    return (
        <SafeAreaView style={styles.mainView}>
            <View style={styles.mainView}>

                {/* Image from the assets folder */}
                <Image source={require('../assets/logo.png')} />

                {/* Image from the URL */}
                <Image
                    style={styles.tinyLogo}
                    source={{ uri: 'https://www.fluttertpoint.com/wp-content/uploads/2021/09/cropped-FlutterTPoint-Logo-3-220x54.png' }}
                />
                
                <Image
                    style={styles.logo}
                    source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
                />

            </View>
        </SafeAreaView>

    );
}
export default Home;

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        margin: 15,
        justifyContent: 'center',
    },
    tinyLogo: {
        marginTop: 20,
        width: 300,
        height: 60,
    },
    logo: {
        marginTop: 50,
        width: 66,
        height: 58,
    },
})

In the above code we loaded two types of images. First one is from the live URL and another one is from the local disk folder. The result is shown in below screenshot.

Result:

React Native Image
React Native Image

You can learn more about this topic in react native from here. Learn more react native tutorials.

Thank you for visiting this tutorial hope you learn about loading Image in React Native. For any query please comment in the comment section below.

close

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment