CODEWITHSUNDEEP
javascriptandroidiphonereact-nativeexpo
davidesp
davidesp

Reputation: 3962

How to get rid of the bottom border of the React Native Paper TextInput when focused

I'm using react-native with react-native-paper.

I have the following code:

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';

export default class Header extends Component {

  state = {
    text: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} style={styles.input} />
        <Button mode="contained" style={styles.button}>Add Todo</Button>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    height: 40,
  },
  input: {
    flex: 1,
    height: 40,
    justifyContent: "center",
  },
  button: {
    flex: 0,
    height: 40,
    justifyContent: "center",
    backgroundColor: "#54c084",
  },
});

which outputs something like this:

enter image description here

then, when the input gets the focus it is like this:

enter image description here

I need to get rid of the bottom border on the TextInput.

Any idea on how to do that?

EDIT 01

Interesting, if I do:

<TextInput value={this.state.text} style={styles.input} theme={{ colors: {primary: "#f00"} }} />

then, I get the following output:

enter image description here

but I just want to modify the color of the bottom border, and keep untouched the color of the caret.

Thanks!

Upvotes: 5

Views: 12097

Answers (7)

Sir&#39;Damilare
Sir&#39;Damilare

Reputation: 314

this solution works fine on ios, yet ti be tested on android

<TextInput

                onPress={debounce}
                scrollEnabled={false} //2
                style={styles.inputContainerStyle}
                multiline
                placeholder="Type something"
                value={noteText}
                onChangeText={updateNoteBody}
                autoFocus={true}
                ref={editFieldRef}
                editable={noteEditable}

                mode={'outlined'} //study here
                cursorColor={'red'} //and here
                outlineStyle={{borderColor: 'transparent'}} //and here
                textColor={"red"} //and here


                style={{ textAlign: 'auto', width: '100%', lineHeight: 30, borderWidth: 0,
                    color: BaseColor.unchangeableClack, backgroundColor: colorPaleteToUse, 
                }}

                textAlignVertical="top"

            />

Upvotes: 0

Abdul rahim
Abdul rahim

Reputation: 11

Add the following style:

underlineStyle={{ height:0}}

Upvotes: 1

Chun
Chun

Reputation: 487

Possible solution is

const theme = useTheme();
const { colors } = theme;

...

<TextInput
  underlineColor="transparent"
  theme={{...theme, colors: {...colors, primary: 'transparent'}}}
/>

Upvotes: 7

Ajay Kadoula
Ajay Kadoula

Reputation: 306

To change the Underline and Label color when focused, you need to pass the props theme, like this:

theme={{colors: {text: 'black', primary: 'rgb(23, 157, 227)'}}}
  • Text is to change the values that you put in the input
  • Primary is to change the underline and the label color

Upvotes: 2

Sanyam Jain
Sanyam Jain

Reputation: 1194

Set underline color to transparent.

--- Edit ---

You can set underline color by setting transparent to prop underlineColor.

  <TextInput
    underlineColor={"transparent"}
  />

Upvotes: 3

Shashin Bhayani
Shashin Bhayani

Reputation: 1578

you have set the underlineColor prop to transparent

<TextInput 
  value={this.state.text}
  style={styles.input}
  underlineColor="transparent"   // add this
/>

EDIT

This is an issue in react-native-paper. You can not change active text input underline color. https://github.com/callstack/react-native-paper/issues/688.
However, if you want to change unfocused text input underline color you can user above code

Upvotes: 3

flix
flix

Reputation: 1974

as Docs describe:

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

so you can simply use underlineColorAndroid props:

<TextInput 
  value={this.state.text}
  style={styles.input}
  underlineColorAndroid="transparent"
/>

Upvotes: 1

Related Questions