React Native - Text Input's Bottom Border-CodePudding

i'm trying to create a text input without border. i gave still and properties then this happened.

There is a bottom border line with black color. how can i remove this border?

import { TextInput } from 'react-native-paper'

those are style codes

width: width * 0.6,
height: height * 0.075,
paddingLeft: 15,
fontSize: 12,
borderRadius: 25,

and text input

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}/>

CodePudding user response：

The documentation states "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."

Still, if you add borderBottomWidth: 0 to your styles, that should "remove" it.

For react-native-paper, the solution would be adding the following inside your component:

underlineColor="transparent"

Should look like this:

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}
    underlineColor="transparent"/>