Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Table of contents
Static Image Sources
Images from Hybrid Apps
Implementation of React Native Images
Adding Style to Buttons
Frequently Asked Questions
Does Android support WebP and GIF?
Which property is used to control the blur radius of the blur filter?
What should I do if my image file takes a lot of time to load or the image file gets corrupted itself?
Last Updated: Mar 27, 2024

React Native Image

Author Vasu Bansal
0 upvote
Master Python: Predicting weather forecasts
Ashwin Goyal
Product Manager @


In this blog, we will learn about working with React Native Images. Any good application always has a combination of text, buttons, and a lot of images. We can display images in our applications with the help of the Image Component in React Native.

It is a react component for displaying images of various types, such as network images, static resources, temporary local images, and images from local disc, such as the camera roll.

You can also read the blog React Native Status Bar on the Coding Ninjas Website to further enhance your knowledge and skills.

Static Image Sources

We can display static images in our application easily by placing them in the code directory. It is better to organize all the images in an image directory to maintain a good directory structure. You can include the image in your application as follows.

<Image source = {require('./assets/logo.png')} >
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job

Images from Hybrid Apps

Hybrid application denotes those apps which are built using both platform-specific code and React Native. The syntax for including images in hybrid apps is slightly different from adding static images.

<Image source={{uri: 'asset:/logo.png'}} style={{width: 100, height: 120}} />

Implementation of React Native Images

In this section, we will see a sample application that will display an image (logo of coding ninjas in this case) in our React Native application. To achieve this, we use the React Native Image component.


import React, { Component } from 'react'
import { Image } from 'react-native'
const App = () => (
  <Image source= {{uri:''}} style={{width: 400, height: 300}}/>
export default App


Not only this, we can add various styles to images.

Adding Style to Buttons

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
 container: {
   paddingTop: 50,
 stretch: {
   width: 700,
   height: 300,
   resizeMode: 'stretch',

const App = () => {
 return (
   <View style={styles.container}>
       source= {{uri:''}}
export default App



Also See, Image Sampling

Frequently Asked Questions

Does Android support WebP and GIF?

WebP and GIF are not supported by default on Android. However, we can use them by including some optional modules in the build.gradle file.

Which property is used to control the blur radius of the blur filter?

The property named blurRadius is used to adjust the blur radius of a blur filter that is added to an image in React Native.

What should I do if my image file takes a lot of time to load or the image file gets corrupted itself?

It is always good to display a default image for the cases like image files loading very slowly or the image file getting corrupted itself.


In this article, we have extensively discussed React Native Image and saw a sample application along with its implementation. Check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development.

We hope this blog has helped you enhance your knowledge regarding React Native Images. You can also consider our React Js Course to give your career an edge over others. Do upvote our blog to help other ninjas grow. Happy Coding!

Previous article
React Native Progress Bar
Next article
React Native Video Player
Live masterclass