Get Image from Local Resource Folder in React Native

In this tutorial, we will explain how to get image from local resource 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 for Show Image from Local Resource Folder in react native.

Check out our blog archive on the topic if you’re looking to learn about Show Image From HTTP URL in React Native.

Static Image Resources In React Native

Lets see the project structure of react native application to display the image from the local resource folder.

Step-1: First create the new reactive project.

Step-2 : Create the "images" folder inside the react native project structure and refer the below screenshot.

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

Step-4 : Lets see the App.js Source code that helps to display image from the local resource 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.

<Image
  style={{width: '100%', height: 200,resizeMode : 'stretch' }}
  source={require('./images/react-image.png')}  
/> 

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 HTTP URL In React Native.
        </Text>    
   <Image
      style={{width: '100%', height: 200,resizeMode : 'stretch' }}
      source={require('./images/react-image.png')}  
   />   
      </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/Get%20Image%20from%20Local%20Resource%20Folder%20in%20React%20Native

Video Demo :

Some best practices to remember , while working with image component in react native application.

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;