Image Component in React Native

Image is a built-in React Native component used to display images on a mobile screen.

import { Image } from "react-native";

It can display both local and remote images.

The Image component is imported from the react-native package.

import { Image } from "react-native";

It can also be imported together with other components.

import {
    View,
    Text,
    Image
} from "react-native";

<Image
    source={require("./assets/logo.png")}
/>

The source prop specifies which image should be displayed.

Local images are stored inside the project and can be loaded using require().

For example, suppose the project contains:

assets/
    logo.png

The image can be displayed using:

<Image
    source={require("./assets/logo.png")}
/>

An Image normally needs explicit dimensions to display correctly.

<Image
    source={require("./assets/logo.png")}
    style={{
        width: 100,
        height: 100
    }}
/>

Here the image is 100 pixels wide and 100 pixels high.

The style prop can be used to control the appearance and size of an Image.

const styles = StyleSheet.create({

    image: {
        width: 150,
        height: 150
    }

});

<Image
    source={require("./assets/logo.png")}
    style={styles.image}
/>

Images can also be loaded from a remote URL.

<Image
    source={{
        uri: "https://example.com/image.jpg"
    }}
    style={{
        width: 200,
        height: 200
    }}
/>

For remote images, the uri property is used.

The syntax of the source prop depends on where the image is stored.

The resizeMode property controls how an image fits inside its available dimensions.

<Image
    source={require("./assets/logo.png")}
    style={styles.image}
    resizeMode="contain"
/>

Different resize modes are useful for different image layouts.

contain scales the image so that the complete image fits inside the available space while maintaining its aspect ratio.

<Image
    source={require("./assets/logo.png")}
    style={{
        width: 200,
        height: 150
    }}
    resizeMode="contain"
/>

This is useful when the entire image needs to remain visible.

cover scales the image to cover the available area while maintaining its aspect ratio.

<Image
    source={require("./assets/banner.jpg")}
    style={{
        width: 300,
        height: 150
    }}
    resizeMode="cover"
/>

Some parts of the image may be cropped.

stretch stretches the image to fill the specified dimensions.

<Image
    source={require("./assets/banner.jpg")}
    style={{
        width: 300,
        height: 150
    }}
    resizeMode="stretch"
/>

The image may not maintain its original aspect ratio.

The repeat mode repeats the image to fill the available area when supported by the platform.

<Image
    source={require("./assets/pattern.png")}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="repeat"
/>

The center mode displays the image at its original size when possible and places it in the center of the available area.

<Image
    source={require("./assets/logo.png")}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="center"
/>

The borderRadius style can be used to create rounded images.

const styles = StyleSheet.create({

    image: {
        width: 150,
        height: 150,
        borderRadius: 75
    }

});

A large border radius can be used to create a circular image.

Circular images are commonly used for profile pictures.

<Image
    source={require("./assets/profile.jpg")}
    style={{
        width: 100,
        height: 100,
        borderRadius: 50
    }}
/>

The border radius should generally be half of the width and height for a circular image when those dimensions are equal.

Image components are commonly placed inside View containers.

<View>

    <Image
        source={require("./assets/logo.png")}
        style={{
            width: 100,
            height: 100
        }}
    />

    <Text>
        Soopro Pathshala
    </Text>

</View>

Flexbox can be used to center an image inside a View.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },

    image: {
        width: 150,
        height: 150
    }

});

<View style={styles.container}>

    <Image
        source={require("./assets/logo.png")}
        style={styles.image}
    />

</View>

Image and Text can be combined to create user interface sections.

<View>

    <Image
        source={require("./assets/profile.jpg")}
        style={{
            width: 100,
            height: 100
        }}
    />

    <Text>
        Rahul Kumar
    </Text>

</View>

A remote image URL can come from a JavaScript variable.

const imageUrl =
    "https://example.com/profile.jpg";

return (
    <Image
        source={{
            uri: imageUrl
        }}
        style={{
            width: 120,
            height: 120
        }}
    />
);

This is useful when image URLs come from an API.

Many APIs return image URLs as part of their JSON data.

const student = {
    name: "Rahul",
    image: "https://example.com/rahul.jpg"
};

return (
    <View>

        <Image
            source={{
                uri: student.image
            }}
            style={{
                width: 100,
                height: 100
            }}
        />

        <Text>
            {student.name}
        </Text>

    </View>
);

When an image needs to behave like a background with content placed over it, React Native applications can use components and libraries designed for that purpose.

A common approach is to use ImageBackground.

import {
    ImageBackground,
    Text
} from "react-native";

<ImageBackground
    source={require("./assets/banner.jpg")}
    style={{
        width: 300,
        height: 200
    }}
>

    <Text>
        Welcome
    </Text>

</ImageBackground>

Remote images may take time to load because they are downloaded from a network source.

For a better user experience, applications can show loading indicators or placeholder content while remote data and images are being loaded.

<Text>
    Loading image...
</Text>

In real applications, loading state is usually controlled with React state.

Remote image requests can fail because of an invalid URL or network problems.

React Native provides image events such as onError that can be used to respond to image loading errors.

<Image
    source={{
        uri: "https://example.com/profile.jpg"
    }}
    style={{
        width: 100,
        height: 100
    }}
    onError={() => {
        console.log("Image failed to load");
    }}
/>

Images that communicate important information should be made understandable to users who rely on accessibility features.

React Native supports accessibility-related properties that can be used to describe interface elements.

<Image
    source={require("./assets/logo.png")}
    style={{
        width: 100,
        height: 100
    }}
    accessible={true}
    accessibilityLabel="Company logo"
/>

<View style={styles.card}>

    <Image
        source={require("./assets/course.jpg")}
        style={styles.courseImage}
        resizeMode="cover"
    />

    <Text style={styles.title}>
        React Native Course
    </Text>

    <Text>
        Learn mobile app development.
    </Text>

</View>

This structure can be used for course cards, product cards and profile cards.

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

export default function App() {

    return (
        <View style={styles.container}>

            <Image
                source={require("./assets/profile.jpg")}
                style={styles.profile}
            />

            <Text style={styles.name}>
                Rahul Kumar
            </Text>

            <Text style={styles.course}>
                React Native Student
            </Text>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },

    profile: {
        width: 150,
        height: 150,
        borderRadius: 75
    },

    name: {
        marginTop: 20,
        fontSize: 24,
        fontWeight: "bold"
    },

    course: {
        marginTop: 8,
        fontSize: 16
    }

});

• Give images appropriate width and height.
• Use local assets for images bundled with the application.
• Use remote URLs when images are provided by an API or server.
• Choose an appropriate resizeMode.
• Use borderRadius for rounded or circular images.
• Handle remote image loading and errors when necessary.
• Use appropriate image dimensions and formats.
• Provide accessibility information for meaningful images.
• Avoid unnecessarily large image files.

Image
 ↓
Choose Source
 ↓
Local / Remote
 ↓
Set Width & Height
 ↓
Apply Style
 ↓
Choose resizeMode
 ↓
Add Border Radius
 ↓
Handle Loading / Errors
 ↓
Display in UI

The Image component is essential for creating profile screens, course cards, product screens, banners, galleries and many other mobile interfaces.