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.
|
1 |
import { AppRegistry, StyleSheet, TextInput, View } from 'react-native'; |
3. Add View as parent view in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View> </View> ); } |
4. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 } }); |
5. Call the MainContainer class in View.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View style={styles.MainContainer}> </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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 }, TextInputStyleClass:{ // Setting up Hint Align center. textAlign: 'center', // Setting up TextInput height as 50 pixel. height: 50 } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<View style={styles.MainContainer}> <TextInput // Adding hint in Text Input using Place holder. placeholder="Enter Text in TextInput" // Making the Under line Transparent. underlineColorAndroid='transparent' // Calling the custom TextInputStyleClass. style={styles.TextInputStyleClass}/> </View> |
8. Complete Source Code for index.android.js file :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native'; class Myproject extends Component { render() { return ( <View style={styles.MainContainer}> <TextInput // Adding hint in Text Input using Place holder. placeholder="Enter Text in TextInput" // Making the Under line Transparent. underlineColorAndroid='transparent' // Calling the custom TextInputStyleClass. style={styles.TextInputStyleClass}/> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 10 }, TextInputStyleClass:{ // Setting up Hint Align center. textAlign: 'center', // Setting up TextInput height as 50 pixel. height: 50 } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
Screenshot before hiding the underline :
Screenshot after hiding the Underline :
Also Read :
Add Rounded Corner Borders to Text Input in React Native Android iOS
Set Text Color in React Native Android iOS Tutorial
React Native Check Text Input is Empty or Not Android iOS Tutorial
How to change Image border color in React Native Tutorial- Add border to Image in React Native using custom style sheet
