0PricingLogin▼
React Native Academy · Lesson

Showing Images from Local and Remote Sources

Load images from the assets folder and from remote URLs using the Image component, set resizeMode, and display loading placeholders.

The Image Component Introduction

The Image component shows photos, icons, and art. Just remember to give it a width and height — without a size it renders as an invisible empty box.

import { Image, View, StyleSheet } from 'react-native';

export default function SimpleImage() {
  return (
    <View style={{ padding: 16 }}>
      <Image
        source={{ uri: 'https://picsum.photos/200/200' }}
        style={styles.image}
      />
    </View>
  );
}

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

Loading Local Images with require()

Show an image from your assets with require() and a fixed path. It gets bundled into your app at build time, so it loads instantly and works offline.

import { Image, StyleSheet } from 'react-native';

export default function LocalImage() {
  return (
    <Image
      source={require('./assets/icon.png')}
      style={styles.logo}
    />
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 100,
    height: 100,
  },
});

// You can also provide @2x and @3x variants:
// assets/icon.png
// assets/icon@2x.png  ← used on 2× screens
// assets/icon@3x.png  ← used on 3× screens

All lessons in this course

  1. The View Component as a Container
  2. Displaying Text and Styling Fonts
  3. Showing Images from Local and Remote Sources
  4. Composing a Simple Profile Card
← Back to React Native Academy