Navigate back to the homepage

React Native borderWidth

Infinitbility
React Native
July 4th, 2021 · 1 min read
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.

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

Subscribe Our Newsletter You will get monthly free programming book

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]

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.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

How to download file in react

How to download file in react

Download file example in react

July 3rd, 2021 · 1 min read
Sequelize Operators Example with query

Sequelize Operators Example with query

Sequelize Operators

July 2nd, 2021 · 2 min read
© 2020–2021 Infinitbility
Disclaimer
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]