CODEWITHSUNDEEP
javascriptlistviewreact-nativereact-native-flatlist
Khalil Khalaf
Khalil Khalaf

Reputation: 9407

Can't view last item of a List

I am using FlatList to view list of people, however, I have noticed that the last item is always a little off:

See item Amy Butts, I have to drag to top in order to see it. This screen is within a stackNavigator that has a header. Would that be the issue? how to solve it?

I tried marginBottom: 40 on the FlatList but it did not change anything.

enter image description here

Code:

let renderRow = ({item}) => {
    return (
        <View style={{flexDirection: "row", justifyContent: "space-between"}}>

            <TouchableOpacity style={{ flexDirection: "row", justifyContent: "flex-start", marginLeft: 10}} onPress={this.myFunction.bind(this, item)} >
                <View style={{}}>
                    <Image style={styles.Image} source={{uri: item.Image}} />
                </View>

                <View style={{ marginTop: 15, marginLeft: 10}}>
                    <Text >{item.name}</Text>
                </View>

            </TouchableOpacity>
        </View>
    );
}

return(
    <FlatList style={{marginTop: 10, backgroundColor: "white"}} 
        keyExtractor={(item, index) => item.id}
        data={this.state.result}                          
        renderItem={renderRow.bind(this)} 
        ItemSeparatorComponent={renderSeparator.bind(this)} 
    />
)

With paddingBottom (or top), now the last two items will not be shown:

enter image description here

Upvotes: 4

Views: 3793

Answers (1)

bennygenel
bennygenel

Reputation: 24660

You need to add paddingBottom or marginBottom to the FlatList with a suitable value to your design.

// Some padding amount that is suitable for your design
<FlatList style={{marginTop: 10, backgroundColor: "white", paddingBottom: 40}} 
    keyExtractor={(item, index) => item.id}
    data={this.state.result}                          
    renderItem={renderRow.bind(this)} 
    ItemSeparatorComponent={renderSeparator.bind(this)} 
/>

Upvotes: 3

Related Questions