CODEWITHSUNDEEP
androidiosreactjsreact-native
UtkarshPramodGupta
UtkarshPramodGupta

Reputation: 8152

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 };

Upvotes: 8

Views: 5051

Answers (3)

Mohit
Mohit

Reputation: 1

You can work with prop underlineStyle

underlineStyle={{display: 'none'}}

Upvotes: 0

Jordan Enev
Jordan Enev

Reputation: 18664

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

Upvotes: 15

Wojtek Szafraniec
Wojtek Szafraniec

Reputation: 599

Border on the bottom in input is natural behaviour for Android, for iOS there is not border bottom.

Upvotes: 0

Related Questions