Add border to Image in React-native

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.

react-native init ProjectName

2. Imports following components

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

3. Style for Circular Image with border

const styles = StyleSheet.create({ 
  imageCircleStyle:{
    width: 200,
    height: 200,
    borderRadius: 200 / 2,  
    borderWidth: 1,
    borderColor: '#0250a3', 
  }
});

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

  <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={styles.imageCircleStyle}  <--- Assign style like this
        />

5. See full source code

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


//Define a color for toolbar
global.backgroundColor = '#176abf';


export default class Home extends Component {

  constructor() {
    super();
    this.state = {
     
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'DetailsView',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };


  componentDidMount() {
   // do API call here
  }

  render() {
    return (
      <View style={styles.container}>
       <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={styles.imageCircleStyle}
        />
        <Text style={styles.text}>Learn React-native app development</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({ 
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    marginTop: 30,
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0250a3',
  },
  imageCircleStyle:{
    width: 200,
    height: 200,
    borderRadius: 200 / 2,    
    borderWidth: 1,
    borderColor: '#0250a3', 
  }
});

6. Output

Thank you 🙂