Navigate back to the homepage

React Native borderWidth

Infinitbility
React Native
July 4th, 2021 · 1 min read

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.

1import React from "react";
2import { View, StyleSheet } from "react-native";
3
4const ViewStyleProps = () => {
5 return (
6 <View style={styles.container}>
7 <View style={styles.middle} />
8 </View>
9 );
10}
11
12const styles = StyleSheet.create({
13 container: {
14 flex: 1,
15 justifyContent: "center",
16 backgroundColor: "#fff",
17 padding: 20,
18 margin: 10,
19 },
20 middle: {
21 flex: 0.3,
22 backgroundColor: "beige",
23 borderWidth: 5,
24 },
25});
26
27export default ViewStyleProps;

Output

React Native, borderWidth

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

1import React from "react";
2import { View, StyleSheet } from "react-native";
3
4const ViewStyleProps = () => {
5 return (
6 <View style={styles.container}>
7 <View style={styles.middle} />
8 </View>
9 );
10}
11
12const styles = StyleSheet.create({
13 container: {
14 flex: 1,
15 justifyContent: "center",
16 backgroundColor: "#fff",
17 padding: 20,
18 margin: 10,
19 },
20 middle: {
21 flex: 0.3,
22 backgroundColor: "beige",
23 borderStartWidth: 5,
24 },
25});
26
27export default ViewStyleProps;

Output

React Native, borderWidth

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to download file in react

Download file example in react

July 3rd, 2021 · 1 min read

Sequelize Operators Example with query

Sequelize Operators

July 2nd, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]