How to Show Image Using React Native?

Hi Guys,

In this blog, I will explain you how to show image in react native. You can easily display image in react native. First i will import namespace Image

, after I will show image using Image tag in react native.

To show image using react native, one component available id Image. when you show the image you can use source prop to what image you want to show.

Here, I will give you full example for simply display image using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init SHOWIMAGE

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from 'react';
import { Image } from 'react-native';
export default class MyImage extends Component {
  render() {
    let pic = {
      uri: 'http://aatmaninfotech.com/frontTheme/images/aatmaninfotech-logo.png'
    };
    return (

      
    );
  }
}
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

Step 3 - Run project

In the last step run your project using bellow command.

expo start --web

Now run your project in browser.

port : http://localhost:19006/

Output

It will help you...