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:

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

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:

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

Thanks!

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:

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

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:

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

Thanks!

• javascript
• android
• iphone
• react-native
• expo

7 Answers 7

Possible solution is

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

...

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

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

Set underline color to transparent.

--- Edit ---

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

  <TextInput
    underlineColor={"transparent"}
  />

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

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

Add the following style:

underlineStyle={{ height:0}}

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"

            />