Image

Learn about the Image component and see how we can use and style it.

React Native’s Image component can be used to render images. This component can render both the local images that we bundle with our application and the network images we download from the internet.

Usage

To implement and use the Image component, we first have to import it from the react-native library.

Press + to interact
import { Image } from 'react-native';

Rendering local images

Once the Image component has been imported, we can use it inside our application to render images. To render local or static images, we first have to reference them inside our application. It is a good practice to place all the static images inside the assets folder of the application. We can reference local images like this.

Press + to interact
const reactLogo = require('./assets/languages/react.png')

Note: The require() command returns a number that is a reference to the image.

Once the Image component has been imported and the image to be rendered has ...

Access this course and 1400+ top-rated courses and projects.