Show Image From HTTP URL in React Native Android iOS Tutorial

How to display image in react native application using online URL step by step example with source code.

Hello Guys, Today we would going to learn about showing image in react native application using online website HTTP URL. As we all know that react native is in its evolving stage because of it is platform independent. So let’s get started. Before going further please read my previous tutorial about Installing React Native on Windows.

Note: There is no need to add internet permission.

Contents in this project Show Image From HTTP URL in React Native :-

  1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
  2. Add Image component in import block.
  3. Create let variable in render block with.
  4. Assign Image Url to let variable using uri .
  5. Add Image tag in render’s return block.
  6. Add Source attribute in Image tag and Assign Let variable name to it.
  7. Add inline style to Image tag.
  8. Complete source code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add Image component in import block.

3. Create let variable in render block with.

4. Assign Image URL to let variable using uri .

5. Add Image tag in render’s return block.

6. Add Source attribute in Image tag and Assign Let variable name to it.

7. Add inline style to Image tag.

 8. Complete Source Code for index.android.js file.

Screenshot :-

Show Image

10 Comments

  1. how do i save captured image to remote server folder

  2. and what if image url not working or you didn’t get image.
    How to apply placeholder.

  3. I have tried your method but it can display the image in iOS but not in Android, may I know why?

  4. Hi Admin, can you please upload the example on how use RSA in react-native,
    “react-native-rsa-native”

Leave a Reply

Your email address will not be published. Required fields are marked *