CODEWITHSUNDEEP
javascriptcssreactjsreact-native
bart
bart

Reputation: 91

React Native - Text Input's Bottom Border

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

text input img

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

Upvotes: 1

Views: 1624

Answers (3)

faery
faery

Reputation: 101

"In React Native Paper's TextInput, you can use the theme prop to customize the input style. For example, to remove the blue underline that appears when the input is active, you can set colors.underlineColor to transparent in the theme prop. Additionally, you can set underlineColor to transparent to remove the border bottom width. Here's an example code snippet:

  theme={{
          colors: {
          primary: 'transparent',
          underlineColor: 'transparent',
             },
          }}
    underlineColor="transparent"

Upvotes: 0

Bala Vigness
Bala Vigness

Reputation: 457

You can make your borders invisible by adding simple styles and don't need to install third party libraries like (react-native-paper).

import {TextInput} from "react-native";



<TextInput
          style={styles.dummy}
          placeholder="Email Address or UserName" />

And the styles are

const styles = StyleSheet.create({
    dummy: {
    marginTop: 30,
    padding: 13,
    alignContent: "center",
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth:0,
    (// width: '85%',
    // height: 50,
    // borderColor: "#808080",
    // borderRadius: 10,
    // marginHorizontal: 22,
    // borderBottomWidth:0,
    // ) }        //You can use if you wanted. Not necessary.

And the output will look like the below image,enter image description here

Upvotes: 1

Daniel L
Daniel L

Reputation: 263

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"/>

Upvotes: 1

Related Questions