React Native FlatList cuts Text at the bottom

Question

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).

ImportScreen.js:

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(
            <View style={styles.container}>
                <Text style={{color: 'white', marginBottom: 10}}>IMPORT SCREEN</Text>
                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='Search terms' 
                        placeholderTextColor='#757575'
                        value={this.props.captionValue} 
                        onChangeText={(value) => this.props.captionChanged(value)}
                    />
                    <TouchableOpacity style={{marginLeft: 10}}>
                        <Icon name='ios-search' color='white' size={32} />
                    </TouchableOpacity>
                </View>
                <FlatList
                    style={styles.results}
                    data={results}
                    renderItem={({item}) => <Text style={styles.resultsText}>{item}</Text>}
                    keyExtractor={(item) => item}
                />
            </View>
        );
    }
}

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'
    }
});

Thanks in advance guys!

Answer 1

You add contentContainerStyles to FlatList component where the styles will be applied to the scroll view content container which wraps all of the child views.