How to Make Rounded Corners TextInput in React Native?

Dec 08, 2022 . Admin

This tutorial will provide example of border-radius property of textinput not working in react-native. I’m going to show you about react native styling input rounded border. if you want to see an example of add rounded corner borders to text input in react native then you are a right place. I’m going to show you about how to make rounded corners textinput. Alright, let’s dive into the steps.

In this example, We will create to rounded corners textinput in react native.you can easy to style borderRadius in react native.below's this example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, TextInput} from 'react-native';

export default function App() {
  const [firstName, setFirstName] = useState('');
  return (
    <SafeAreaView style={styles.container}>
        <View style={styles.containerView}>
            <TextInput
                style={styles.inputSimpleBorder} 
                placeholder="Enter Name"
                onChangeText={newText => setFirstName(newText)}
                defaultValue={firstName}
            />
            <StatusBar style="auto" />
        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
    container: {
      justifyContent:'center',
    },
    containerView: {
        marginTop: '70%',
        padding:30,
    },
    title: {
        textAlign:'center', 
        fontSize: 20, 
        fontWeight: 'bold', 
        marginBottom: 20,
        color:'black'
    },
    inputSimpleBorder: {
        marginBottom: 15,
        backgroundColor: "white",
        borderWidth: 1,
        borderColor: 'grey',
        padding: 10,
        fontSize: 20,
        borderRadius:20
    },
});

Step 3: Run Project

In the last step run your project using the below command.