Too many space between rendered items flatlist React Native

Question

I have been trying to render items from flatlist, the components render correctly, however, the space between the rendered components are too much. Spaces I am sure that I did not create. Also, the last item on the flatlist does not display completely as the flatlist will not scroll to the bottom of the item. please see my code and screenshot below

Component

import { View, Text, StyleSheet, Image } from "react-native";
import { FontAwesome, MaterialCommunityIcons } from "@expo/vector-icons";

export default function PostComponent() {
  return (
    <View
      style={{
        width: "90%",
        backgroundColor: "blue",
        marginVertical: 10,
        alignSelf: "center",
      }}
    >
      <View
        style={{
          height: "20%",
          width: "100%",
          backgroundColor: "white",
          flexDirection: "row",
          marginBottom: 5,
          paddingHorizontal: 5,
        }}
      >
        <View
          style={{
            width: "30%",
            height: "100%",
            borderRadius: 50,
            overflow: "hidden",
          }}
        >
          <Image
            style={{ width: "100%", height: "100%" }}
            source={require("../assets/imggg.jpg")}
          />
        </View>
        <View
          style={{
            width: "70%",
            height: "100%",
            justifyContent: "center",
            padding: 10,
          }}
        >
          <Text style={{ fontSize: 20, fontWeight: "bold" }}>Jane Doe</Text>
          <Text style={{ fontSize: 15, fontStyle: "italic" }}>
            Something Casual
          </Text>
        </View>
      </View>
      <View style={{ width: "100%", backgroundColor: "white" }}>
        <View style={{ overflow: "scroll" }}>
          <Text style={{ textAlign: "justify" }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
            mollitia, molestiae quas vel sint commodi repudiandae consequuntur
            voluptatum laborum numquam blanditiis harum quisquam eius sed odit
            fugiat iusto fuga praesentium optio, eaque rerum!
          </Text>
        </View>
        <View
          style={{
            width: "100%",
          }}
        >
          <Image
            style={{ width: "100%" }}
            source={require("../assets/imggg.jpg")}
          />
        </View>
      </View>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-evenly",
          paddingTop: 10,
        }}
      >
        <FontAwesome name="heart" size={35} color="black" />
        <MaterialCommunityIcons name="poker-chip" size={35} color="#e6b800" />
        <FontAwesome name="comment" size={35} color="black" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({});

Render

import { View, Text, StyleSheet, Image, FlatList } from "react-native";
import PostComponent from "../../Components/PostComponent";
import { auth, db, storage } from "../../firebase";
import { collection, query, getDocs, orderBy } from "firebase/firestore";

const postData = [];
async function getPosts() {
  const q = query(collection(db, "Posts"), orderBy("postTime"));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots

    postData.push({ id: doc.id, ...doc.data() });
  });
}

function Posts() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    getPosts()
      .then(() => {
        setLoading(false);
      })
      .catch((e) => console.log(e));
  }, []);

  const renderPosts = ({ item }) => <PostComponent />;

  if (loading) {
    return <Text>Loading Posts</Text>;
  }
  return (
    <View style={{ backgroundColor: "pink", height: "100%" }}>
      <FlatList data={postData} renderItem={renderPosts} />
    </View>
  );
}

const styles = StyleSheet.create({});

export default Posts;

Result

Answer 1

You can try the Element Inspector to check as to what element the space comes from and you can fix it from there