How to Use Image in React Native: Syntax and Examples

In React Native, use the Image component to display images by specifying the source prop with a local file or a URL. You can customize the image size and style using the style prop.

Syntax

The Image component requires a source prop to specify the image location. Use { uri: 'image_url' } for remote images or require('path/to/image') for local files. The style prop controls size and appearance.

javascript

import React from 'react';
import { Image } from 'react-native';

export default function MyImage() {
  return (
    <Image
      source={{ uri: 'https://example.com/image.png' }}
      style={{ width: 100, height: 100 }}
    />
  );
}

Output

Displays a 100x100 pixel image loaded from the specified URL.

Example

This example shows how to display a local image and a remote image with custom sizes and styles.

javascript

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

export default function ImageExample() {
  return (
    <View style={styles.container}>
      <Image
        source={require('./assets/local-image.png')}
        style={styles.localImage}
      />
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.remoteImage}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 50
  },
  localImage: {
    width: 120,
    height: 120,
    borderRadius: 10
  },
  remoteImage: {
    width: 80,
    height: 80,
    borderWidth: 2,
    borderColor: 'blue'
  }
});

Output

Shows two images side by side: a local image with rounded corners and a remote image with a blue border.

Common Pitfalls

• For local images, forgetting to use require() causes errors.
• Not setting width and height styles results in images not showing.
• Using invalid URLs or missing network permissions can prevent remote images from loading.
• Not handling image loading states can cause blank spaces or layout jumps.

javascript

/* Wrong: Missing require for local image */
<Image source={'./assets/image.png'} style={{ width: 100, height: 100 }} />

/* Right: Use require for local image */
<Image source={require('./assets/image.png')} style={{ width: 100, height: 100 }} />

Output

Wrong code causes error; right code displays the local image correctly.

Quick Reference

Remember these key points when using Image in React Native:

• Use source={{ uri: 'url' }} for remote images.
• Use source={require('path')} for local images.
• Always set width and height in styles.
• Use resizeMode prop to control image scaling (e.g., cover, contain).
• Handle loading errors with fallback UI if needed.

Key Takeaways

Use the Image component with the source prop to display images in React Native.

Local images require require() while remote images use an object with uri.

Always specify width and height styles to make images visible.

Common mistakes include missing require for local images and invalid URLs.

Use resizeMode and style props to control image appearance and layout.