Setting Border Color of TextInput Component In React Native

This tutorial explains how to change border color of TextInput Component in react native application. In this demo we have added few style-sheet design property to TextInput layout component, that helps to change border color of text input field.
Here we have specified borderWidth, borderColor property of CSS Stylesheet in TextInput Component.

Code Snippet to change border color of TextInput layout  :

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

React native TextInput border color :

Lets follow the below steps to Set Border Color of 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 borderWidth, borderColor property of CSS Stylesheet in TextInput Component. This CSS property will set the border color in TextInput layout.

 <TextInput
          style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 1,  marginBottom: 20 }}
          // 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: 1,  marginBottom: 20 }}
          // 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: 'blue', borderWidth: 1,  marginBottom: 20 }}
          // 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 Set Border Color of TextInput Component  in React Native application.

/**
 * 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}>
          Remove TextInput Component Bottom Underline in React Native
        </Text>

        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 1,  marginBottom: 20 }}
          // 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: 1,  marginBottom: 20 }}
          // 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: 'blue', borderWidth: 1,  marginBottom: 20 }}
          // 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 Setting Border Color of 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.