Get Image from Local Resource Folder in React Native Android iOS Tutorial

How to get display image file from local Resource directory in react native application from locally folder same for both Android and iOS using source require.

React native comes with 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.

Benefit you get : Same image calling structure for both iOS and android. So single image file works for both.

Contents in this project Show Image from Local Resource Folder :-

Start a fresh React Native project. If you don’t know how then read my this tutorial.
Add Image component in import block.
Create folder for image inside your project’s folder and put your image in it.
Add Image tag in render’s return block.
Add Source attribute in Image tag and Assign image path using require.
Add inline style to Image tag.
Complete source code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add Image component in import block.

<br />
import {<br />
 AppRegistry, Image<br />
} from ‘react-native’;

import {

AppRegistry, Image

} from ‘react-native’;

3. Create folder for image inside your project’s folder and put your image in it.

Open your project folder for example my project name is Myproject -> Create a folder inside your project folder like i did in below screenshot name as images.
Place your image inside images folder.

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

<br />
return (</p>
<p> <Image /></p>
<p> );

return (

);

5. Add Source attribute in Image tag and Assign image path using require.

<br />
return (<br />
 <Image source={require(‘./images/laptop.png’)} /><br />
 );

return (

);

6. Add inline style to Image tag.

<br />
return (</p>
<p> <Image source={require(‘./images/laptop.png’)} style = {{height: 200, width: 250, resizeMode : ‘stretch’,}} /></p>
<p> );

return (

);

7. Complete Source Code for index.android.js file.

<br />
import React, { Component } from ‘react’;<br />
import {<br />
 AppRegistry, Image</p>
<p>} from ‘react-native’;</p>
<p>export default class Myproject extends Component {<br />
 render() {</p>
<p> return (</p>
<p> <Image source={require(‘./images/laptop.png’)} style = {{height: 200, width: 250, resizeMode : ‘stretch’,}} /></p>
<p> );<br />
 }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);