React Native Image

Summary: in this tutorial, you will learn how to use the React Native Image component to display images on your mobile app.

Introduction to the React Native Image component

The Image component allows you to display an image on your mobile app. To use the Image component, you follow these steps:

First, import the Image component from the react-native library:

import Image from 'react-native';Code language: JavaScript (javascript)

Second, use the Image component to show an image:

<Image source={uri: imageUri } />Code language: JavaScript (javascript)

The source can be a remote URL or a path to an image. The Image component supports different types of images:

Network images are images stored on a remote server that can be accessed via URLs. These images require an internet connection:

<Image source={{uri: 'http://imageUrl'}} />Code language: JavaScript (javascript)

The following example shows how to display the React Native logo located at https://reactnative.dev/img/tiny_logo.png:

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
                style={styles.image} />
        </SafeAreaView >
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 50,
        height: 50,
    },

});

export default App;Code language: JavaScript (javascript)

Output:

Static resources are images stored in the resources directory such as assets. These images are bundled with the app and can work without an internet connection:

<Image source={require('imagePath')} />Code language: JavaScript (javascript)

For example, the following app uses the Image component to show the login.png image from the assets directory within the project directory:

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image
                source={require('./assets/login.png')}
                style={styles.image}
            />
        </SafeAreaView >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 200,
        height: 200,
    },
});

export default App;Code language: JavaScript (javascript)

Output:

Temporary local images are images stored temporarily on the phone. These images are typically downloaded or created by the app during its runtime:

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

Images from local disks are images stored on the phone’s local storage such as photos taken with a phone camera and stored in the camera roll or gallery:

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

Note that you need to request permission before you can obtain the image.

Resize mode

Typically, the images do not perfectly fit within the view. To determine how images are resized to fit the image view, you use the resizeMode prop of the Image component.

The resizeMode prop supports the following values:

cover

The cover resize mode will scale the image to fill the view while maintaining the aspect ratio. It may crop parts of the images if the aspect ratio differs from the image.

contain

The contain mode scales the image to fit inside the view while maintaining the aspect ratio. Hence, the entire image will be visible. If the aspect ratio of the image differs from the view, there may be space.

stretch

The stretch mode stretches the image to fill the view without maintaining the aspect ratio. It may distort the image.

repeat

This repeat mode repeats the image to cover the entire view. It will create tiles of images to fill the space.

center

This center mode centers keeps the original size of the image and centers it in the view. If the image is larger than the view, it will be clipped. If the image is smaller, it will not be scaled.

The following shows how to use different resize modes to display the React Native logo https://reactnative.dev/img/tiny_logo.png:

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


const ImageDemo = () => {

    const url = 'https://reactnative.dev/img/tiny_logo.png';

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.heading}>Resize Mode</Text>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'cover' }]} />
                <Text style={styles.text}>cover</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'contain' }]} />
                <Text style={styles.text}>contain</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'stretch' }]} />
                <Text style={styles.text}>stretch</Text>
            </View>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'repeat' }]} />
                <Text style={styles.text}>repeat</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'center' }]} />
                <Text style={styles.text}>center</Text>
            </View>
        </SafeAreaView>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',

    },
    image: {
        width: 100,
        height: 150,
    },
    imageWrapper: {
        alignItems: 'center',
        margin: 10,
        borderColor: '#ddd',
        borderWidth: 1,
        padding: 8,
        borderRadius: 8,
    },
    heading: {
        fontSize: 32,
        width: '100%',
        textAlign: 'center',
        marginBottom: 16,
    },
    text: {
        fontSize: 24,
    }

});

export default ImageDemo;Code language: JavaScript (javascript)

Output:

Summary

• Use the React Native Image component to display a local or remote image.
• Use an appropriate resize mode to fit the image within the image view.