This tutorial explains How to hide bottom border underline present on TextInput layout component in React Native application.
Text Input component by default comes with base bottom underline, shows just below the Text Input. Sometimes developer needs to remove this line to use custom border. So here we are going to provide complete guide to hide bottom underline of TextInput component.

underlineColorAndroid Prop would make the under line color as transparent so automatically the underline will be hidden.

underlineColorAndroid="transparent"

Remove underline in inputText in React Native :

Lets follow the below steps to remove bottom underline in TextInput Component in react native application :

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 the underlineColorAndroid="transparent" prop inside the TextInput layout, this helps you to hide bottom underline.

 {/* TextInput Component helps to accept user inputs via keyboard...*/}
TextInput
          style={{ height: 40, width: "95%" }}
// 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 

/**
 * 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 Component helps to accept user inputs via keyboard...*/}
TextInput
          style={{ height: 40, width: "95%" }}
// 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 :

Before hiding underline
After hiding underline


This is all about hiding Remove TextInput  Component Bottom Underline 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.