CODEWITHSUNDEEP
androidreactjsreact-native
aravind_reddy
aravind_reddy

Reputation: 5486

how to disable the line under text in text input android react native

I am trying to render a text input in react-native(android) with and a line below it which am getting from borderBottomWidth property put when am typing there are two lines appearing which is not looking good and couldn't remove it i tried giving underlineColorAndroid='transparent' but didn't work

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          autoCapitalize='none'
          autoCorrect={false}
          underlineColorAndroid='rgba(0,0,0,0)'
          style={styles.textInput}
         />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#000',
    padding: 8,
  },
  textInput: {
    paddingVertical: 0,
    marginHorizontal: 10,
    textAlign: 'center',
    height: 18,
    fontSize: 14,
    alignSelf: 'flex-start',
    borderStyle: 'solid',
    borderWidth:0,
    borderBottomWidth: 1,
    color: '#1ac9e8',
    minWidth: 48,
    borderColor: '#1ac9e8',
    fontFamily: 'Monaco'
  }
});

https://snack.expo.io/rylmazFSH

any workarounds ?picture

Upvotes: 2

Views: 2518

Answers (3)

Rishav Kumar
Rishav Kumar

Reputation: 5460

Update the style of your textInput. I found the style from snack

  textInput: {
    paddingVertical: 0,
    marginHorizontal: 10,
    textAlign: 'center',
    height: 18,
    fontSize: 14,
    alignSelf: 'flex-start',
    borderStyle: 'solid',
    borderWidth:0,
    color: '#1ac9e8',
    minWidth: 48,
    fontFamily: 'Monaco'
  }



  <TextInput
    underlineColorAndroid="transparent"
        autoCorrect={false}
        keyboardType="visible-password"
style = {styles.textInput}
    />

Upvotes: 0

Mehran Khan
Mehran Khan

Reputation: 3636

Add autoCorrect={false} should remove underline but in some android devices it will not work as described in this link

Try this it is working 

autoCorrect={false}
keyboardType="visible-password"

Snack link : https://snack.expo.io/@mehran.khan/underline-android

Upvotes: 10

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

underlineColorAndroid="transparent"

Upvotes: 0

Related Questions