How to Use React Native Border Radius

This article teaches how to utilize borderRadius in react native. First, we will go through and comprehend an example of the borderRadius prop in React Native.

We will also learn how to utilize borderRadius in react native and round any given box corner.

React Native Border Radius

React Native provides the borderRadius prop to round all corners. The borderRadius prop only accepts numbers between 1 and 100; if you put more than 100, the outcome should be the same as the 100 value.

Example Code:

import React from 'react';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (<View style = {styles.container}><View style = {
    styles.middle
  } />
    </View>);
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: '#01CDE8',
    borderWidth: 5,
    borderRadius: 10,
  },
});
export default App;

If the rounded border is concealed, try overflow: 'hidden' as well. The borderRadius prop is used to create a curve that extends from all four corners.

However, to add a specific curvature to a given intersection, we require other unique properties such as borderTopRightRadius, borderTopLeftRadius, border boundary of topStartRadius, and TopEndRadius.

However, the behaviour of some properties is consistent, such as borderTopLeftRadius and borderTopStartRadius, borderTopRightRadius and borderTopEndRadius. As a result, both props are the same.

Output:

We all know that the borderRadius prop will round all corners, but if you want to round specific corners, see the following instructions:

1. TopStartRadius - Create a border in the top left corner.
2. TopEndRadius - Create a border at the top right corner.
3. BottomStartRadius - To create the bottom left corner.
4. BottomEndRadius - To create the bottom right corner border.

Let us illustrate with an example below:

import React from 'react';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (<View style = {styles.container}><View style = {
    styles.middle
  } />
    </View>);
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: '#01CDE8',
    borderWidth: 5,
    backfaceVisibility: 'hidden',
    borderTopStartRadius: 1,
    borderTopEndRadius: 20,
    borderBottomStartRadius: 20,
    borderBottomEndRadius: 1,
  },
});
export default App;

Output:

Let’s create a basic dashboard or profile page for a personal or routine monitoring application. This example will use borderRadius to design profile photographs, cards, buttons, input fields, and icons.

Example Code:

import {Image, StyleSheet} from 'react-native';

export default function App() {
  return (
    <Image
  style = {styles.profile} source = {
    {
      uri:
          'https://cdn.britannica.com/43/172743-138-545C299D/overview-Barack-Obama.jpg?w=800&h=450&c=crop',
    }
  } />
  );
}

const styles = StyleSheet.create({
  profile: {
    marginTop: 20,
    height: 100,
    width: 100,
    backgroundColor: "wheat",
    borderRadius: 50,
  },
});

Our Image component now has a circular borderRadius. It should result in the following output:

Note that it is widely used for decorating thumbnails for profile pictures.