React Native borderWidth

Hello Friends,

Welcome To Infinitbility!

This article will help you to use border width in react native, here we will discuss and understand example of React Native borderWidth prop.

We are going to learn how to use borderWidth in react native and how to provide width on specific border of box.

Basically, React Native provide borderWidth to show border on box and manage width border.

Let’s start today article borderWidth in React Native

To make border, React Native provide borderWidth props and we are going understand with example.

Table of content

1. All border side
2. Specific border side

All border side

React Native provide borderWidth prop to show border on box and it accept only number. Let’s understand with example.

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

const ViewStyleProps = () => {
    return (
      <View style={styles.container}>
        <View style={styles.middle} />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#fff",
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: "beige",
    borderWidth: 5,
  },
});

export default ViewStyleProps;

Output

Specific border side

We are know borderWidth prop will effect every side of box but if you want show any specific side of border then React Native provide below props

1. borderStartWidth - To show Left border
2. borderTopWidth - To show Top border
3. borderEndWidth - To show Right border
4. borderBottomWidth - To show Bottom border

Let understand with example

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

const ViewStyleProps = () => {
    return (
      <View style={styles.container}>
        <View style={styles.middle} />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#fff",
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: "beige",
    borderStartWidth: 5,
  },
});

export default ViewStyleProps;

Output

Thanks for reading…