How to Make Rounded or Custom Border Radius in React Native ?

React Native offers a simple solution to achieving this effect through the border­Radius property. In this article, we’ll see how we can apply border-radius to the react native components.

Border Radius holds a significant role. It acts as a styling attribute that controls the curvature of corners for various UI elements. With this attri­bute, we can round the edges of buttons, cards, images, and any other element.

Properties of Border Radius

Before we dive into examples, let’s understand the key properties associated with borderRadius:

• borderRadius: This property specifies the radius of all four corners of the element equally, creating rounded corners.
• borderTopLeftRadius: This property allows you to define a specific radius for the top-left corner.
• borderTopRightRadius: This property allows you to define a specific radius for the top-right corner.
• borderBottomLeftRadius: This property allows you to define a specific radius for the bottom-left corner.
• borderBottomRightRadius: This property allows you to define a specific radius for the bottom-right corner.

Syntax:

<Component style={{ borderBottomRightRadius: value }} />
<Component style={{ borderBottomLeftRadius: value }} />
...

Steps to install & configure React Native

Step 1: Create a react native application by using this command:

npx create-expo-app borderRadius

Step 2: After creating your project folder, i.e. borderRadius, use the following command to navigate to it:

cd borderRadius

Project Structure

The project structure will look like this.

Example 1: In this example, there is a centered container that contains two main compo­nents: a button and a card. The button with blue backg­round and rounded corners (top-left and bottom-right corners are more rounded than the others) and white text.

Javascript

// App.js

import React from "react";
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
} from "react-native";

const App = () => {
    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}>
                    Click Me
                </Text>
            </TouchableOpacity>
            <View style={styles.card}>
                <Text style={styles.cardHeading}>
                    Geeksforgeeks
                </Text>
                <Text style={styles.cardText}>
                    A Computer Science portal for geeks. It
                    contains well-written, well-thought, and
                    well-explained computer science and
                    programming articles.
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
        padding: 20,
    },
    button: {
        backgroundColor: "#007BFF",
        padding: 15,
        // Apply borderRadius to the button
        borderTopLeftRadius: 55,
        borderTopRightRadius: 25,
        borderBottomLeftRadius: 25,
        borderBottomRightRadius: 55,
        justifyContent: "center",
        alignItems: "center",
        width: "60%",
    },
    buttonText: {
        color: "white",
        fontSize: 18,
    },
    card: {
        backgroundColor: "white",
        // Apply borderRadius to the Card
        borderRadius: 10,
        marginTop: 20,
        padding: 15,
        width: "90%",
        shadowColor: "rgba(0, 0, 0, 0.1)",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 1,
        shadowRadius: 4,
        elevation: 3,
    },
    cardHeading: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 10,
    },
    cardText: {
        fontSize: 16,
    },
});

export default App;

Step 4: Go to the Terminal and type the following command to run the react native application:

npx expo start

• To run on Android:

npx react-native run-android

• To run on iOS:

npx react-native run-ios

Output:

Example 2: In this example, The image is displayed within a container that is centered on the screen. By applying border­Radius prope­rties, the image has custom rounded corners. To fetch and display the image from a specific URL, the Image compo­nent’s source prop is utili­zed.

Javascript

// App.js
import React from "react";
import { View, Image, StyleSheet } from "react-native";

const App = () => {
    const imageUrl =
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png";
    return (
        <View style={styles.container}>
            <Image
                source={{ uri: imageUrl }} // Load image from URL
                style={styles.profileImage}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    profileImage: {
        width: 300,
        height: 300,
        // Apply borderRadius to the Image
        borderTopLeftRadius: 105,
        borderTopRightRadius: 25,
        borderBottomLeftRadius: 25,
        borderBottomRightRadius: 105,
    },
});

export default App;

Output: