How to use the Image component in React-native?

favourite part of learning or building anything is making it visually compelling,

and in the react-native "Image" component exactly does that thing, it gives you a way to add images to your project, so let's take a look at how.

now "Image" component enables us to display various types of images, some examples :

• static images -> ex: images in your project's assets folder

• network images -> ex: images you get online through URL,

• images from the local disks -> ex: camera roll images,

Case 1: Using static images in your Project

a) First make sure you have created an 'assets' folder in your root directory,

b) bring your images to that folder

c) import the "Image" component in your project 'App.js' / 'App.tsx' file.

import {Image} from 'react-native'

d) import the specific image from the 'assets' folder, and assign it to a variable.

const logoImage = require('./assets/exampleimage.png')

e) now in JSX code, invoke the 'Image' component and specify the source prop.

<Image source = {logoImage}/>

f) add style to the Image to make sure it is visible,

<Image source={logoImage} style={{width: 200, height:200}} />

And That's how you add Static/local Image to your React-native project.

Case2: Use Network / URL image in React-native

here you do not need to import anything, just in your <Image /> component, you have to make changes in the source, i.e we need to pass in our URL as an object with key 'uri'

a) go to the web

b) copy the URL of any image you want to add to your project

https://th.bing.com/th/id/OIP.6q3ur7gIwjIEJW1G387CoQHaEL?rs=1&pid=ImgDetMain

c) Passing our URL as an object to the key 'uri' in the source,

<Image source={{uri:'https://th.bing.com/th/id/OIP.6q3ur7gIwjIEJW1G387CoQHaEL?rs=1&pid=ImgDetMain'}}

d) add styling to the image

<Image source={{uri:'https://th.bing.com/th/id/OIP.6q3ur7gIwjIEJW1G387CoQHaEL?rs=1&pid=ImgDetMain'} style={{height: 200,width:200}} />

With that, you learned how you can add images to your 'React-Native' Project,

Of course there are other more advanced types of methods, which we will cover in further blogs or you can refer to the official documentation if this blog is not what you need:
https://reactnative.dev/docs/image

I hope I helped you in some way or the other,

Wish you the best in building something good that makes our world a better place, All the best!