Image Component

Image puts a picture on screen — from a web URL or a file in your project. Unlike images on websites, you always need to tell React Native the width and height.

<Image
  source={{ uri: "https://picsum.photos/200" }}
  style={{ width: 200, height: 200, borderRadius: 12 }}
/>

Image sources

There are two ways to provide an image:

// Remote image (requires width + height)
<Image
  source={{ uri: "https://example.com/photo.jpg" }}
  style={{ width: 100, height: 100 }}
/>

// Local asset (dimensions are inferred)
<Image source={require("./assets/logo.png")} />

Resize modes

Control how the image fits its container:

resizeMode	Behavior
"cover"	Fills the area, may crop
"contain"	Fits entirely, may show gaps
"stretch"	Stretches to fill exactly
"center"	Centers at original size

<Image
  source={{ uri: avatarUrl }}
  style={{ width: 80, height: 80, borderRadius: 40 }}
  resizeMode="cover"
/>

Performance tip

For lists with many images, use expo-image instead of the built-in Image — it supports caching, blur placeholders, and animated transitions.

Try this: Display a circular avatar by setting borderRadius to half the image width.