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!

Try using ContentContainerStyle for FlatList component. It should help.. — Ashwin Mothilal, Sep 23 '18 at 08:07
@AshwinMothilal now thats the answer I was looking for Sir. Please add an answer so I can accept it as correct, thanks! — Dieguinho, Sep 23 '18 at 17:00

score 12 · Accepted Answer · answered Sep 24 '18 at 05:38

12

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.

answered Sep 24 '18 at 05:38

Ashwin Mothilal

2,462
1
16
21

How would this be performed? In my case I have cards in a flatlist, the last card fills at the end of the list is cut off a little. I tried adding paddingBottom, but that didn't work. Adding margin bottom to all the cards work, but now I have an ugly layout. How do I add more space to the bottom of the flatlist? – Christian Rudder Nov 19 '22 at 03:24
Found it: I had added padding top to my flatlist, this messed it up. I instead adding marginTop, which had the desired effect. – Christian Rudder Nov 19 '22 at 03:42

React Native FlatList cuts Text at the bottom

1 Answers1