Add Rounded Corner Borders to TextInput Component in React Native

This post explains How to display rounded corner border around EditText TextInput component in React Native application. We need to specify borderRadius style-sheet property in TextInput  layout component.

code snippet to set rounded corner border to TextInput Component :

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18 }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>

React Native Rounded Corner Border to TextInput Component :

Lets follow the below steps to Add Rounded Corner Borders to TextInput Component in React Native.

Step-1 :  Create a new React Native project.

Step-2 :  Add Platform, StyleSheet, Text, View, TextInput Component in import block.

import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

Step-3 :  Create TextInput component inside the render block and specify borderRadius, borderColor, borderWidth
 property of CSS Stylesheet in TextInput Component. This CSS property will change the TextInput field border to rounded corner.

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18 }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>

Complete Source Code for App.js 

Lets see the complete source code that helps to Add Rounded Corner Borders to TextInput Component in React Native.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
     <Text style={styles.headerText}>
       Add Rounded Corner Borders to TextInput Component in React Native
     </Text>
     
        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18 }}
          // Adding hint in TextInput using Placeholder option.
          placeholder=" Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'red', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18 }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />


      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Screenshot :

This is all about adding rounded corner borders to TextInput Component in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.