Remove Text Input Bottom Underline in React Native Android iOS

How to hide bottom border  underline present on TextInput layout component in React Native Android iOS application using underlineColorAndroid=’transparent’ prop .

Text Input component by default comes with base bottom underline, shows just below the Text Input. This line tells the user that Text Input below area starts from here. Sometimes developer needs to remove this line to use custom border. So in this tutorial we would going to hide the under line using underlineColorAndroid=’transparent’ prop. underlineColorAndroid Prop would make the under line color as transparent so automatically the underline will be hidden.

Contents in this project Remove Text Input Bottom Underline :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, StyleSheet, TextInput and View component in import block.

3. Add View as parent view in render’s return block.

4. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.

5. Call the MainContainer class in View.

6. Create another class named as TextInputStyleClass . Using the TextInputStyleClass we have been setting up Text Input hint align center and height as 50 pixels.

7. Create Text Input component inside the View. placeholder is used to show hint inside Text Input. underlineColorAndroid=’transparent’ prop is used to hide the underline. Now calling the TextInputStyleClass.

8. Complete Source Code for index.android.js file :

Screenshot before hiding the underline :

Underline

Screenshot after hiding the Underline :

Leave a Reply

Your email address will not be published. Required fields are marked *