React Native Image

React Native Image

The Image component is used to display the image on the screen. The Image can be loaded from different sources such as static resources, temporary local files, local discs, network images, etc.

Adding Image

To create a new folder img inside the src folder. We will add our Image (myImage.png) inside this folder.

Screen Density

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

Static Image Resources

The static images are added in-app by placing them somewhere in the source code directory and providing their path.

Images From Hybrid App's Resources

The hybrid app, which is built (UI) using both React Native and platform code, can also use the Image bundled into the app.

Network Images

The dynamic and network images are also displayed in the Image component. To access the network image, it is required to specify the dimensions of an Image manually.

Uri Data Images

The encoded image data use the "data:" uri scheme in the image component. The data image is also required to specify the dimension of the Image.

Background Image via Nesting

The background image is set using the ImageBackground component. It is also the same props as Image, and we can add any component as children on the top of it.