react native flatlist render an extra row at the bottom - react-native

Question

Flatlist rendered 4 rows but the data variable only have 3 objects
Array items:
const data = [
{ type: 250, amount: 2, points: 150 },
{ type: 250, amount: 2, points: 150 },
{ type: 250, amount: 2, points: 150 },
];
My flatlist:
<FlatList
style={styles.list}
data={data}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={{
paddingTop: pxToPercentage(8),
}}
renderItem={({ item }) => {
return (
<View style={styles.rowStyle}>
<Text style={styles.typeStyle}>{item?.type}</Text>
<Text>{item?.amount}</Text>
<Text style={styles.pointStyle}>{item?.points}</Text>
</View>
);
}}
/>
Edit:
There is no error here, but a blank view between flatlist and footer how can i remove it

Answer 1

There is no Error, I ran also the same code in my project, and this is working fine.
import React from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
export default function App() {
const data = [
{ type: 250, amount: 2, points: 150 },
{ type: 250, amount: 2, points: 150 },
{ type: 250, amount: 2, points: 150 },
];
return (
<View>
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => {
return (
<View style={{ backgroundColor: "grey", margin: "10px" }}>
<Text>
{item?.type} | {item?.amount} | {item?.points}
</Text>
</View>
);
}}
/>
</View>
);
}
You can see in the picture, this is the output of the above code, there are only three lists, as I change the background color to grey.