Course Content

Foundations of React Native

Image Component

Theory

The Image component is used to display images in your app;
It's similar to the HTML <img> tag;
You can set the source of the image using the source prop;
Including the image's dimensions by providing its width and height is important.

Example

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

const App = () => {
  return (
    <View>
      <Text>The first line of text in the app.</Text>
      <Image
        source={{
          uri: "https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/9cad8004-02f1-46b0-a31a-e39addcbc716/basic-concepts/react-native-logo.png",
        }}
        width={64}
        height={64}
      />
    </View>
  );
};

export default App;

Code Description

Line 2: Imports the Image component from the react-native library.

Line 4: Declares a functional component named App.

Lines 5-16: The component returns a View component containing a Text component and an Image component. The Image component is displaying an image fetched from a remote URI. The width and height props are set to 64 to specify the dimensions of the displayed image.

In Practice

Everything was clear?

Section 2. Chapter 4