Navigate back to the homepage

How to create a border in react native?

Infinitbility
React Native
November 29th, 2021 · 1 min read
How to create a border in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React native provides borderWidth property to make border, borderWidth plays the main role to make any border because it required CSS to make any type of border.

The borderWidth decides the thickness of the border and 1 its min value.

After borderWidth, come borderColor and borderRadius property which decide color and cornor round things.

Above those things, react-native provides the option to decide top, bottom, left, and right specific styles.

For example,

when you want to show the border at the bottom only then do you have to use the borderBottomWidth property, it will show only the border at the bottom.

this rules apply for borderColor and borderRadius also.

Now take an example to create a box border.

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

Output

border, React Native, Example

Learn detailed documentation for borderWidth, borderColor, and border Radius.

  • React Native borderWidth
  • React Native borderColor
  • React Native borderRadius

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

Tutorials

Categories

More articles from Infinitbility

How to sort an array of objects by a property value in typescript?

How to sort an array of objects by a property value in typescript?

Example of sorting array of objects in typescript.

November 28th, 2021 · 1 min read
How to make tooltip clickable in react material UI?

How to make tooltip clickable in react material UI?

Example of creating clickable tooltip componant in react.

November 27th, 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]