React Native Show Border Around Image Component Android

This post explains how to add rectangular border around the image component in react native application. This is pretty simple, you need to use borderWidth and borderColor properties of css stylesheet design.

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.

React Native Border Stylesheet :

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

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

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

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

Step-4 : Create HomeActivity class and Implement render method. The render method returns Image component wrapped by root View component.

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.addBorder}
          source={{ uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/768px-React-icon.svg.png"}}
        />
      </View>
    );
  }
}

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',
    backgroundColor: "#e5e5e5"
  },
  addBorder: {
    width: 200,
    height: 200,
    resizeMode: "stretch",
    // Set border width.
    borderWidth: 2,
    // Set border color.
    borderColor: 'red',
    }
});

Complete Source Code for App.js 

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

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
 
import React, { Component } from "react";
import { Platform, StyleSheet, View, Image } from "react-native";

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.addBorder}
          source={{ uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/768px-React-icon.svg.png"}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',
    backgroundColor: "#e5e5e5"
  },
  addBorder: {
    width: 200,
    height: 200,
    resizeMode: "stretch",
    // Set border width.
    borderWidth: 2,
    // Set border color.
    borderColor: 'red',
    }
});

The above example will display the below output.

Screenshot :

This is all about react native BorderColor and borderWidth properties. 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.

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Show%20Border%20Around%20Image%20Component%20Android