React Native – Image

This post will give you an idea to Display Image in React Native Using Image Component. React Native Image is a component for displaying different types of images, including network images, static resources, temporary local images, and images from local disks, such as the camera roll.

Note that for network and data images, you will need to manually specify the dimensions of your image!

To Import Image in the Code

import { Image } from 'react-native'

Static Image Resources

The static images are added in app by placing it in somewhere in the source code directory and provide its path as:

<Image 
    source={require('./your-img.png')}  
    style={{width: 400, height: 400}} 
/>

require can also be used for including audio, video or document files in your project. Most common .mp3, .wav, .mp4, .mov, .html and .pdf.

Network Requests for Images

The dynamic and network images are also be displayed in the Image component. To access the network image, it is required to specify the dimensions of image manually.

<Image 
    source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/sample_img.png'}} 
    style={{width: 400, height: 400}} 
/>

Uri Data Images

The encoded image data use the “data:” uri scheme in the image component. The data image also required to specify the dimension of the image.

<Image 
    style={{width: 66, height: 58}} 
    source={{uri:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

import React, { Component } from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{ width: 66, height: 58 }}
          source={{
            uri:
              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
          }}
        />
        <Image 
          source={require('./assets/images.jpg')}  
          style={{width: 200, height: 150}} 
        />
        <Image
          source={{uri:'https://lh3.googleusercontent.com/23TzU98VChGFvna_j2PPl_15Wvw8TksyLcp82Ks3mH3neptwD3vSXzQrqHrDBrLP0To6cE1WKleh7ZvWwP_2OVmPpQ=w1200',}}
          style={{ width: 400, height: 400, margin: 16 }}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',
  },
});

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.0.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}