React Native Images - React Native

What is React Native Images?

In this section, we will be learning about how to work with images in React Native.

Adding Image

Let us create a new folder img within src folder. We can add our image (my-image.png) in this folder.

Image can be accessed with the help of the below syntax.

src/components/myComponent/MyPresentationalComponent.js

Syntax

OUTPUT

React Native Images

Screen Density

React native allows the users to have a way to optimize images for various devices using @2x, @3x suffix. The app will do image loading with required density.

This will be names of the image inside img folder.

Network Images

When we are using network images, instead of require we need to use source property. Good practice is to define width and height for network images.

src/components/myComponent/MyPresentationalComponent.js

Example

OUTPUT

React Native Network Image.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics