title: React Native FlatList cuts Text at the bottom
body: <p>I'm trying to make a search screen, I have a FlatList that fills all of the unused space in the screen and has a style which sets a padding to 10.
  I have hardcoded data for now just to test how it would look like when I scroll all the way down, the last text element is cut in half... if I remove the padding it shows the last item correctly, but the text shows sticked to the border of the FlatList and adding padding to every FlatList item seems like overkill (as someone suggested in another post).</p>
  
  <p><a href="https://i.stack.imgur.com/vSU6rt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vSU6rt.png" alt="enter image description here"></a></p>
  
  <p>ImportScreen.js:</p>
  
  <pre><code>const results = [
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      'tert ert r ert',
      'asdasdasd',
      'dasd cxzceewrw',
      'rewr',
      'jyuyjkyuj ky',
      'iuyiuyiyuiuyiyuiyu',
      'uyigfhg gerte ert',
      ' ',
      'tert ert r ert'
  ];
  
  class ImportScreen extends Component{
      render(){
          return(
              &lt;View style={styles.container}&gt;
                  &lt;Text style={{color: 'white', marginBottom: 10}}&gt;IMPORT SCREEN&lt;/Text&gt;
                  &lt;View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}&gt;
                      &lt;TextInput 
                          style={styles.textInput}
                          placeholder='Search terms' 
                          placeholderTextColor='#757575'
                          value={this.props.captionValue} 
                          onChangeText={(value) =&gt; this.props.captionChanged(value)}
                      /&gt;
                      &lt;TouchableOpacity style={{marginLeft: 10}}&gt;
                          &lt;Icon name='ios-search' color='white' size={32} /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                  &lt;FlatList
                      style={styles.results}
                      data={results}
                      renderItem={({item}) =&gt; &lt;Text style={styles.resultsText}&gt;{item}&lt;/Text&gt;}
                      keyExtractor={(item) =&gt; item}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          width: '100%',
          flex: 1,
          backgroundColor: '#121212',
          padding: 10
      },
      textInput: {
          borderWidth: 1,
          borderRadius: 5,
          color: 'white',
          borderColor: '#303030',
          backgroundColor: '#232323',
          minWidth: 100,
          flex: 1
      },
      results: {
          width: '100%',
          flex: 1,
          backgroundColor: "#303030",
          borderRadius: 5,
          padding: 10,
          marginTop: 10
      },
      resultsText: {
          color: 'grey'
      }
  });
  </code></pre>
  
  <p>Thanks in advance guys!</p>