How to add image in React Native

Image is basic core component of any application, almost every app have images in them so here you are gonna learn easy and fastest way to add image in react native.

How to add image in react native

There are two types of image which you want in your app. Here are the simple code example and at bottom you are gonna get live working code example.

1. local Image
2. Network Images (online images)

1. Local Image

For this you just have to include Image component at start

import { Image } from 'react-native';

after that you just have to include This image component

<Image
 style={{ height: 20px, width:20px}}
 source={require('assets/logo.png')}
 />
      

2. Network Images

Here we also have to import same Image component from react native just source is gonna be different

 <Image
 style={{ height: 20px, width: 20px}} source={{ uri: 'https://google.com'}}
/>

Working Example

Important useful Properties

These are the props of the component image

1. blurRadius –

blurRadius adds blur filter to the image. ex. – blurRadius=”5″

      <Image style={styles.logo} source={require('./assets/snack-icon.png')} blurRadius="5"/>

2. defaultSource –

When we use network image then sometimes image is not found then it is the placeholder image source. Here you can put 404 image or your logo.

It is same as image source just write defaultSource and give the image location. If you have any problem using it comment down below.

3. loadingIndicatorSource –

When we use network image then image is gonna take sometime to load so we can put loading indicator or any kind of loading image. This is same as loadingIndicatorSource.

4. resizeMode –

We all use different type of image in our app. All are from different dimensions then we can resize that according to our usage. These are the possible options.

cover	Scale the image according to image aspect ratio for larger then view dimensions
contain	Scale the image according to image aspect ratio for less then view dimensions
stretch	Change aspect ratio and increase width or height independently
repeat	For larger frame image is gonna repeat
center	Center the image in view

If you have any problem comment down below. If you want more information go to https://reactnative.dev/docs/image