Add border to Image in React-native

Add border to Image in React-native using custom stylesheet

Add border to Image in React-native using the stylesheet

Hi guys, In this article, we are going to learn about How to add border to image in react-native, for this we have to add a react-native Image component then will add the custom stylesheet to that image component and add three props to display border i.e. borderRadius, borderWidth, borderColor so let’s start with the example

1. Create a project

In my case, I have already created a project to display a circular image to know more about this, check this post

So I am using my previous project.

2. Imports following components

3. Style for Circular Image with border

As you saw in the above stylesheet I added width, height, borderRadius to make image circular, borderWidth is the width of border and borderColor is color for the border. these three props are mandatory to display border and convert image component to circular shape.

4. Assign stylesheet to the Image component

You can assign stylesheet using two ways first is inline, and second is create const stylesheet and use in the component. in this example, I had created stylesheet and assign to image component like below

5. See full source code

6. Output

Add border to Image in React-native using custom stylesheet

Thank you 🙂

Leave a Reply

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