Navigate back to the homepage

React Native borderRadius

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

Hello Friends,

Welcome To Infinitbility!

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

We are going to learn how to use borderRadius in react native and how to round any specific corner of box.

Basically, React Native provide borderRadius to make corner round something like squre bracket [] to parenthesis ().

Let’s start today article borderRadius in React Native

Note:

If the rounded border is not visible, try applying overflow: 'hidden’ as well.

The borderRadius prop is used to give a curve from all the corners. But to give a specific curve to a particular corner we use other specific props

like, borderTopLeftRadius borderTopRightRadius borderTopStartRadius borderTopEndRadius

But behavior of some props are the same as, borderTopLeftRadius and borderTopStartRadius,borderTopRightRadius and borderTopEndRadius So, both the props are the same.

To make corner rounded, React Native provide below props and we are going to learn with example.

Table of content

  1. All corners
  2. Specific corner

All corners

React Native provide borderRadius prop to make all corners rounded and borderRadius prop only accept number between 1 to 100 or if you put more then 100 value it should same output of 100 value 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 borderRadius: 10
25 },
26});
27
28export default ViewStyleProps;

output

React Native, borderRadius

Specific corner

We are know borderRadius prop will make all corner curve but if want make specific corner rounded then you have to below React Native props

  1. borderTopStartRadius - To make Top Left corner
  2. borderTopEndRadius - To make Top Right corner
  3. borderBottomStartRadius - To make Bottom Left corner
  4. borderBottomEndRadius To make Bottom Right corner

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 backfaceVisibility: "hidden",
25 borderTopStartRadius: 1,
26 borderTopEndRadius: 20,
27 borderBottomStartRadius: 20,
28 borderBottomEndRadius: 1
29 },
30});
31
32export default ViewStyleProps;

output

React Native, borderRadius

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 borderWidth

React Native borderWidth

borderWidth in React Native

July 4th, 2021 · 1 min read
How to download file in react

How to download file in react

Download file example in react

July 3rd, 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]