Question 34907 in React native Question posted in
The official React Native documentation can be found here.

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

3

Answers


  1. 0

    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"/>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    "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"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search