React Native - Images

---

---

In this chapter, we will understand how to work with images in React Native.

Adding Image

Let us create a new folder img inside the src folder. We will add our image (myImage.png) inside this folder.

We will show images on the home screen.

App.js

 import React from 'react'; import ImagesExample from './ImagesExample.js' const App = () => { return ( <ImagesExample /> ) } export default App 

Local image can be accessed using the following syntax.

image_example.js

 import React, { Component } from 'react' import { Image } from 'react-native' const ImagesExample = () => ( <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} /> ) export default ImagesExample 

Output

Screen Density

React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density.

The following will be the names of the image inside the img folder.

 my-image@2x.jpg my-image@3x.jpg 

Network Images

When using network images, instead of require, we need the source property. It is recommended to define the width and the height for network images.

App.js

 import React from 'react'; import ImagesExample from './image_example.js' const App = () => { return ( <ImagesExample /> ) } export default App 

image_example.js

 import React, { Component } from 'react' import { View, Image } from 'react-native' const ImagesExample = () => ( <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}} style = {{ width: 200, height: 200 }} /> ) export default ImagesExample 

Output