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.
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.
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 ...