Basically i have a react native tab to search for an avalaible room based on the user input, after the user submit their input, the app will render a flat list of the avalaible rooms. The problem is after i tried to submit my input, the flat list actually renders but i can’t scroll down to see the rendered flat list, do you guys have any idea to fix it? By the way here’s my code (I partially use indonesian language for the code so just ignore any words you can’t understand):

import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  Keyboard,
  Button,
  FlatList,
  ScrollView,
} from "react-native";
import { useEffect, useState } from "react";
import DateTimePicker from "@react-native-community/datetimepicker";
import { Dropdown } from "react-native-element-dropdown";
import { format } from "date-fns";

const data = [
  { label: "Selasar", value: "selasar" },
  { label: "Kelas", value: "kelas" },
  { label: "Lab", value: "lab" },
];

export default function PinjamRuanganScreen() {
  const [tanggal, setTanggal] = useState(new Date());
  const [mulai, setMulai] = useState(new Date());
  const [selesai, setSelesai] = useState(new Date());
  const [jenis, setJenis] = useState(null);
  const [kapasitas, setKapasitas] = useState(0);
  const [searched, setSearched] = useState(false);
  const [result, setResult] = useState([]);

  const formatDate = (date) => {
    return format(date, "yyyy-MM-dd");
  };

  const formatTime = (date) => {
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    const formattedTime = `${hours}:${minutes}`;
    return formattedTime;
  };

  const changeDate = ({ type }, selectedDate) => {    if (type === "set") {
      const currentDate = selectedDate;
      setTanggal(currentDate);
    }
  };

  const changeMulai = ({ type }, selectedDate) => {    if (type === "set") {
      const currentDate = selectedDate;
      setMulai(currentDate);
    }
  };

  const changeSelesai = ({ type }, selectedDate) => {    if (type === "set") {
      const currentDate = selectedDate;
      setSelesai(currentDate);
    }
  };

  const handleSubmit = async () => {
    try {
      const response = await fetch(
        `http:(my-ip-address):4000/ruangan/cari-ruangan?jenis=${jenis}&tanggal=${formatDate(
          tanggal
        )}&mulai=${formatTime(mulai)}&selesai=${formatTime(
          selesai
        )}&kapasitas=${kapasitas}`
      );
      const data = await response.json();
      setResult(data.ruanganTersedia);
      setSearched(true);
      console.log(result.length);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <SafeAreaView style={styles.container}>
        <Text style={styles.label}>Tanggal peminjaman: </Text>
        <DateTimePicker
          value={tanggal}
          mode="date"
          onChange={changeDate}
          style={styles.timePicker}
        />
        <Text style={styles.label}>Dari jam: </Text>
        <DateTimePicker
          value={mulai}
          mode="time"
          onChange={changeMulai}
          style={styles.timePicker}
        />
        <Text style={styles.label}>Sampai jam: </Text>
        <DateTimePicker
          value={selesai}
          mode="time"
          onChange={changeSelesai}
          style={styles.timePicker}
        />
        <Dropdown
          style={styles.dropdown}
          maxHeight={300}
          itemContainerStyle={{ width: 600 }}
          data={data}
          labelField={"label"}
          valueField={"value"}
          placeholder="Pilih jenis ruangan"
          value={jenis}
          onChange={(value) => setJenis(value.value)}
          renderItem={(item) => {
            return (
              <View style={styles.item}>
                <Text>{item.label}</Text>
              </View>
            );
          }}
        />
        <Text>Kapasitas:</Text>

        <TextInput
          style={styles.textInput}
          keyboardType="numeric"
          value={kapasitas}
          onChangeText={setKapasitas}
        />
        <Button title="Cari ruangan" onPress={handleSubmit} />

        {!searched ? (
          <Text>Hasil pencarian ruangan akan ditampilkan disini</Text>
        ) : result.length === 0 ? (
          <>
            <Text>
              Tidak ada ruangan yang sesuai dengan kriteria yang anda inginkan
            </Text>
          </>
        ) : (
          <View>
            <FlatList
              data={result}
              renderItem={({ item }) => {
                return (
                  <View style={styles.card}>
                    <Text style={styles.namaRuangan}>{item.nama}</Text>
                    <Text style={styles.detailRuangan}>{item.jenis}</Text>
                    <Text style={styles.detailRuangan}>{item.kapasitas}</Text>
                    <Text style={styles.detailRuangan}>{item.lantai}</Text>
                  </View>
                );
              }}
              keyExtractor={(item) => item._id}
              ItemSeparatorComponent={<View style={{ height: 24 }} />}
              ListHeaderComponent={
                <View style={{ marginTop: 20, marginBottom: 20 }}>
                  <Text
                    style={{
                      alignSelf: "center",
                      fontSize: 30,
                      fontWeight: "bold",
                    }}
                  >
                    Ruangan yang tersedia
                  </Text>
                </View>
              }
            />
          </View>
        )}
      </SafeAreaView>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
    justifyContent: "center",
    alignItems: "center",
  },
  dropdown: {
    margin: 16,
    height: 50,
    alignSelf: "stretch",
    borderBottomColor: "gray",
    borderBottomWidth: 0.5,
  },
  item: {
    padding: 17,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  label: {
    marginBottom: 10,
  },
  timePicker: {
    marginBottom: 20,
  },
  textInput: {
    borderWidth: 1,
    borderStyle: "solid",
    width: 50,
  },
  card: {
    backgroundColor: "white",
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
  },
  namaRuangan: {
    fontSize: 30,
  },
  detailRuangan: {
    fontSize: 24,
    color: "#666666",
  },
});

And here’s the screenshot of the app (using expo go in ios):
Before submitting:

After submitting (In this state, the screen just stuck like this and i can’t scroll down to see the rest of the flat list, and i can’t even scroll up to see the upper part of the screen):

I expect the FlatList to be scrollable