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

React Native Image

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

Introduction

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
Bootcamp

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.

Code:

import React, { Component } from 'react'
import { Image } from 'react-native'
const App = () => (
  <Image source= {{uri:'https://www.codingninjas.com/assets-landing/images/security_cn.png'}} style={{width: 400, height: 300}}/>
)
export default App

Output:

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}>
     <Image
       style={styles.stretch}
       source= {{uri:'https://www.codingninjas.com/assets-landing/images/security_cn.png'}}
     />
   </View>
 );
}
export default App

Output:


 

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.

Conclusion

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