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

Question

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!

Answer 1

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