title: Reduce height and vertical padding for a react-native-paper TextInput
body: <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',
      backgroundColor: '#c1deff',
    },
    input: {
      flex: 1,
    },
    button: {
      flex: 0,
    },
  });
  </code></pre>
  
  <p>which outputs the following screen:</p>
  
  <p><a href="https://i.stack.imgur.com/1G2Bb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1G2Bb.png" alt="enter image description here"></a></p>
  
  <p><strong>My goal is</strong> to reduce the height for the <code>TextInput</code>. It also looks like it has some vertical padding. Is it possible to decrease that as well? I'm just trying to save space on the screen and in my opinion is taking lot of it area.</p>
  
  <p><strong>EDIT 01</strong></p>
  
  <p>I tried with the following style:</p>
  
  <pre><code>input: {
    flex: 1,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
  }
  </code></pre>
  
  <p>but didn't work, because I got the following result:</p>
  
  <p><a href="https://i.stack.imgur.com/urDdE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/urDdE.png" alt="enter image description here"></a></p>
  
  <p>which as you can see, doesn't look good (obvious).</p>
  
  <p>Thanks!</p>