React Native Border Radius with background color Example

This tutorial explains how to add border radius and background color in Image Component 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.

Set Border Radius In React Native

This is an Example to Set Border Radius of an Image in React Native. We will set the border radius of the Image using StyleSheet element borderRadius.

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, Text } 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}>
        <Text style={styles.setFontSize}> Normal Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorder} />

        <Text style={styles.setFontSize}>{'\n '} Border Radius Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorderRadius} />
      </View>
    );
  }

Step 7 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setFontSize: {
    fontSize: 20,
    fontWeight : 'bold' 
  },
  setBorder:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 3,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here.   
  },
  setBorderRadius:
  {
    width: 170,  // Setting up image width. 
    height: 170,  // Setting up image height.  
    borderWidth: 3,  // Set border width.  
    borderColor: '#F44336',  // Set border Hex Color code here. 
    borderRadius: 60,  // 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 with background color in react native application.

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


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.setFontSize}> Normal Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorder} />

        <Text style={styles.setFontSize}>{'\n '} Border Radius Image</Text>
        <Image source={require('./images/logo.jpg')} style={styles.setBorderRadius} />
      </View>
    );
  }
}


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

The above example will display the below output.

Screenshot :

This is all about React Native Border Radius with background color Example 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.