Post Link : https://www.skptricks.com/2018/08/remove-textinput-component-bottom-uderline-in-react-native.html
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...*/}
style=
// Adding hint in TextInput using Placeholder option.
placeholder="Enter Your First Name"
// Making the Under line Transparent.
underlineColorAndroid="transparent"
/>
Top comments (0)