How to display image from url in React Native? Code Example

To display an image from remote url in React native, we need to pass the url in source prop of <Image> component. The source prop accepts an object with uri key and image url as value.

The important thing to remember is that we need to pass the height/width of desired rendering.

Code Example

1. Fixed width & height

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 200,
    height: 50,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

The output will look like this –

Live Demo

2. Displaying image at center of enclosing container

By using flex property and resizeMode, we can display our remote image without using height/width style.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tinyLogo: {
    flex: 1,
    resizeMode: 'center'
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://akashmittal.com/wp-content/uploads/2020/10/site-logo-small.png',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

The output will look like this –

Live Demo

Conclusion

Images in React native mobile apps can be displayed either by url or locally or even using base64 data scheme. In this article we saw how we can use <Image> component to display images from url.