Example to Set Border Radius of an Image in React Native

In this tutorial, we are going to explain how to set border radius on an images in react native application. if you remember a month back we have shared demo on React Native to display or show Border Around Images, similarly here we are going to implement for setting border radius of  an images. Lets get started.

Set Border In React Native component :
Using below CSS properties you can set border width and color in react native component.
borderWidth : This will set border width.
borderColor  : This will set border color.

Set Border Radius In React Native component :
Using below CSS properties you can set border radius around image in react native application.
borderColor: '#F44336',  // Set border Hex Color code here. 
borderRadius: 10  // Set border Radius.

React Native Set Border Radius Stylesheet 

Lets follow the below steps to set border radius to Image component in React Native.

Step-1: First create the new reactive project.

Step-2 : Create the "images" folder inside the react native project structure and refer the below screenshot.

Step-3 : Place the images inside the "images" folder

Step-4: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step-5: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';

Step-6: Open App.js component and  and Implement render method. The render method returns Image component wrapped by root View component.

render() {

    return (
      <View style={styles.container}>
        <Image source={require('./images/realm_logo.png')} style={styles.setBorder} />
      </View>
    );
  }

Step-7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setBorder:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 1,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here. 
    borderRadius: 10,  // Set border Radius.
       
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to add border radius around the Image component in react native application.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Image source={require('./images/realm_logo.png')} style={styles.setBorder} />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setBorder:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 1,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here. 
    borderRadius: 10,  // Set border Radius.
       
  }
});

The above example will display the below output.

Screenshot :

This is all about react native adding border radius css property around the image component in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.