Display circular image in react-native

Display circular image in react-native

Hi guys, In this post, we learn to display a circular image view in react-native. In this article, we are display image from URL and assign the style to image and use borderRadius style props to make Round shape image

You can see the below screenshot

Display circular image in react-native

As you see in the above screenshots, the image you are seeing is actually square, so let’s start with an example

1. Create a new project

2. Imports following components

In my case, I am using my old project which I had created previously

3. Code to display the circular image

As you see in the above Image component we set the URL as the source, then add style with height, width, and borderRadius to make image view Round shape, we need to set borderRadius: 200 / 2 to make image view Round shape.

4. Full page code

If you know more about react-native image component for nice image loader then check out this post

5. Output

Display circular image react-native

Thank you 🙂

Leave a Reply

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