Utkarsh Utkarsh - 1 year ago 156
iOS Question

Unxpected Lines on TextInput in React Native 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 };

Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download