title: How to get rid of the bottom border of the React Native Paper TextInput when focused
body: <p>I'm using <code>react-native</code> with <code>react-native-paper</code>.</p>
  
  <p>I have the following code:</p>
  
  <pre><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 (
        &lt;View style={styles.container}&gt;
          &lt;TextInput value={this.state.text} style={styles.input} /&gt;
          &lt;Button mode="contained" style={styles.button}&gt;Add Todo&lt;/Button&gt;
        &lt;/View&gt;
      );
    }
  
  }
  
  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",
    },
  });
  </code></pre>
  
  <p>which outputs something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/7BSzs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7BSzs.png" alt="enter image description here"></a></p>
  
  <p>then, when the input gets the focus it is like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pYIRx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYIRx.png" alt="enter image description here"></a></p>
  
  <p>I need to get rid of the bottom border on the <code>TextInput</code>.</p>
  
  <p>Any idea on how to do that?</p>
  
  <p><strong>EDIT 01</strong></p>
  
  <p>Interesting, if I do:</p>
  
  <pre><code>&lt;TextInput value={this.state.text} style={styles.input} theme={{ colors: {primary: "#f00"} }} /&gt;
  </code></pre>
  
  <p>then, I get the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/402ET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/402ET.png" alt="enter image description here"></a></p>
  
  <p>but I just want to modify the color of the bottom border, and keep untouched the color of the caret.</p>
  
  <p>Thanks!</p>