Display Local and Remote Images

Display Local and Remote Images in React Native

Images in React Native can be displayed with the built in Image component, which is similar the the img tag on the web. We’ll use Image to show both local images (included in the source of the app), and remote images (fetched from a web address).

High resolution images

We can specify higher resolution images for higher density screens by appending @2x or @3x to the image name.

.
├── coffee.png
├── coffee@2x.png
└── coffee@3x.png

When importing the images, the @2x and @3x are excluded from the path, however the extension is required.

import coffee from '../images/coffee.png'

Displaying images

React Native's <Image /> component is used to display images - similar to the <img /> element in HTML. The source prop is used instead of src to specify the image's path.

When using a local image, the image is passed to the source prop, however, when loading a remote image - such as a URL - you must provide an object to source with a uri property.

Local:

import { Image } from 'react-native'
import coffee from '../images/coffee.png'
...
<Image source={coffee} />

Remote:

import { Image } from 'react-native'
...
<Image source={{ uri: 'https://good-coffee.com/coffee.png' }} />

Dimensions must be specified for the <Image /> component to display.

<Image
  source={coffee}
  style={styles.img}
/>

const styles = StyleSheet.create({
  img: {
    width: 200,
    height: 200,
  },
})

👍If the dimensions aspect ratio is incorrect, the <Image /> component will automatically clip the image. This behavior can be overridden with the resizeMode prop.

<Image
  source={coffee}
  style={styles.img}
  resizeMode="contain"
/>

const styles = StyleSheet.create({
  img: {
    width: 200,
    height: 100,
  },
})

New component

🤔<Image /> - used for displaying images.

🐦   Previous   💼   Next