Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unexpected Lines under TextInput in React Native Android App

I am building an app using React Native and I get a weird unexpected line below every TextInput on my physical android device as shown below in the picture. Also, the lines don't show up in the iOS simulator.

enter image description here

My code for the Input Component:

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ value,  onChangeText, placeholder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <TextInput
        secureTextEntry={secureTextEntry}
        placeholder={placeholder}
        autoCorrect={false}
        style={inputStyle}
        value={value}
        onChangeText={onChangeText}
      />
    </View>
  );
};

const styles = {
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 14,
    lineHeight: 23,
    flex: 2,
  },
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#ddd'
  }
};

export { Input };
like image 758
UtkarshPramodGupta Avatar asked Feb 07 '17 15:02

UtkarshPramodGupta


People also ask

How do I get rid of underline in TextInput React Native?

To change or remove the underline we need to use the underlineColorAndroid prop. This is only necessary for Android as the iOS TextInput comes relatively unstyled. This can be set to any color, which includes transparent. To remove the line add underlineColorAndroid="transparent" to your TextInput .

How do you focus TextInput in React Native?

Two methods exposed via the native element are .focus() and .blur() that will focus or blur the TextInput programmatically.

How do you make multiline TextInput in React Native?

To align text to the top multiline TextInput with React Native, we can set the textAlignVertical style to 'top' . to add the multiline prop to make the TextInput a multiline input. We set the numberOfLines to set the text input height to 5 lines high.

What is TextInput in React Native?

TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.


1 Answers

According to React docs to remove the border:

<TextInput underlineColorAndroid='transparent' />

TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

Also you can try to disable autoCorrect tag. It might help too:

<TextInput autoCorrect={false} />

Credits:

  1. underlineColorAndroid
  2. autoCorrect
like image 84
Jordan Enev Avatar answered Oct 13 '22 00:10

Jordan Enev