Display Image From Android Asset Folder In React Native

This tutorial explains how to get image from the android asset folder and display the image in react native application. This example covers, fetching and displaying an image from network location using Image Component of react native.

React native provides a unified media management system so developers can easily manage all the image files by placing them together into a single folder. So here is the complete step by step tutorial to display Image from Android Asset Folder in react native application.

You can check out our previous post for image retrieval and display in react native.

1. Show Image From HTTP URL In React Native
2. Get Image From Local Resource Folder In React Native

Show Image From The Android Asset Folder In React Native

Lets see the project structure of react native application to display the image from the Android Asset folder.

Step-1 : First create the new reactive project.

Step-2 : Create the images folder inside the of asset folder of Android Project. Lets see the below screenshot, that provides you more understanding about folder structure.

Project Path : D:\MobileApp\android\app\src\main\assets

Step-3 : Place the images inside the "images" folder. 

              

App.js
This Component helps to display image from Local Resource Folder. Follow the below steps, that helps to configure Image Component in App Component.

1. Add Image Component in import block.

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

2. Add Image tag in render’s return block.

• Source attribute in Image tag, where we are specifying the image location.
• Also we have added inline style to Image tag, that helps to set the image size as per the device width.
• For images in the Android assets folder, use the asset:/ scheme

<Image
  style={{width: '100%', height: 200,resizeMode : 'contain' }}
  source={{uri :'asset:/images/android-image.jpg'}}  
/> 

Complete Source Code for App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Show Image From Local Resource Folder.
        </Text> 

 <Image
  style={{width: '100%', height: 200,resizeMode : 'contain' }}
         source={{uri :'asset:/images/android-image.jpg'}}  
         /> 
  
      </View>
   
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
 fontWeight: 'bold'
  },
  
});

Screenshot  :

Download Link :

https://github.com/skptricks/React-Native/tree/master/Display%20Image%20From%20Android%20Asset%20Folder%20In%20React%20Native

Demo :

This is all about displaying image from android asset folder in react native application. Hope You like this tutorial.