source

Learn local and remote images with the source prop.

source: local and remote

The source prop works in two ways. Remote images take a {`{ uri: '...' }`} object; local images use a require call.

For a local image: source={'{ require('./assets/logo.png') }'}. The path is relative to your project's assets folder. The extension can be .png, .jpg or .webp.

Local images are bundled into the app; they need no internet and load faster. Remote images can change dynamically; for example, product photos from a server.

Loading remote images

Remote images may show an empty box while they download. You can show a loading image with loadingIndicatorSource; a small spinner image works well.

If the load fails, the onError prop receives a function. You can catch the error and show a fallback image.

This lesson focuses on the basic flow of remote images: giving uri is enough. Fallback and loading patterns get a deeper treatment at the advanced level.

Exercise Show a local logo

Write an <Image> and give its source prop require('./assets/logo.png'). Add style with width: 100 and height: 100. Export the App function.

Show example solution

function App() {
  return (
    <Image
      source={require('./assets/logo.png')}
      style={{ width: 100, height: 100 }}
    />
  );
}
export default App;

Test yourself

Local image source

import { Image } from 'react-native';

function App() {
  return (
    <Image source={____('./assets/logo.png')} style={{ width: 80, height: 80 }} />
  );
}

Show answer

import { Image } from 'react-native';

function App() {
  return (
    <Image source={require('./assets/logo.png')} style={{ width: 80, height: 80 }} />
  );
}

What does source take for a remote image?
- A number
- Only a string
- A { uri: '...' } object
- A color value
Show answer

A number — an object with a uri key is passed.
Match the source types

require

Local image
uri

Remote image address
loadingIndicatorSource

Loading image
onError

Error handler

Next lesson: resizeMode

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies