Navigate back to the homepage

React Native borderColor

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

Hello Friends,

Welcome To Infinitbility!

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

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

Basically, React Native provide borderColor to show color on border and manage border color.

Let’s start today article borderColor in React Native

To make color border, React Native provide borderColor 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 borderColor prop to show color on border and it accept color name, hex cod, and rgb. Let’s understand with example.

In this example, we will see grey border color around box.

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 borderColor: "grey",
25 },
26});
27
28export default ViewStyleProps;

Output

React Native, borderColor

Specific border side

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

borderStartColor - To show Left border color borderTopColor - To show Top border color borderEndColor - To show Right border color borderBottomColor - To show Bottom border color

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 borderWidth: 5,
24 borderTopStartRadius: 10,
25 borderBottomEndRadius: 10,
26 borderStartColor: "pink",
27 borderEndColor: "pink",
28 },
29});
30
31export default ViewStyleProps;

Output

React Native, borderColor

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

React Native borderRadius

React Native borderRadius

borderRadius in React Native

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

React Native borderWidth

borderWidth in React Native

July 4th, 2021 · 1 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]