FlatList not scrolling in react-native, nothing helped so far

Question

I have this flatList in react-native but it is not scrolling. I have tried a ton of answers on stackoverflow but none worked for me.

I have no styles on the flatlist itself. I tried it on android emulator and my own device, nothing worked.

Image of the screen:

When I removed the View with The inputs & button and added a lot of reviews to the array in the flatlist, the flatlist suddenly started scrolling but when I added the inputs back it did not scroll anymore

My code:

import {
  FlatList,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import React, { useState, useEffect } from "react";

const ReviewScreen = () => {
  const [inputTitle, setInputTitle] = useState("");
  const [inputReview, setInputReview] = useState("");
  const [inputName, setInputName] = useState("");

  let existingReviews = [
    {
      title: "I love F1",
      name: "Tibo Mertens",
      review:
        "This car may have a legendary driver on their team, but unfortunately, their car doesn't live up to his skills",
    },
    {
      title: "F1 is awesome",
      name: "Quintt Adam",
      review:
        "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
    },
    {
      title: "F1 is awesome",
      name: "Quintt Adam",
      review:
        "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
    },
  ];

  const [Title, setTitle] = useState("");
  const [review, setReview] = useState("");
  const [name, setName] = useState("");
  const [reviews, setReviews] = useState(existingReviews);

  const newTitleHandler = (enteredText) => {
    console.log(enteredText);

    setTitle(enteredText);
  };

  const newReviewHandler = (enteredText) => {
    console.log(enteredText);

    setReview(enteredText);
  };

  const newNameHandler = (enteredText) => {
    console.log(enteredText);

    setName(enteredText);
  };

  const addReviewHandler = () => {
    let newReview = { title: Title, name: name, review: review };

    let modifiedObj = {
      title: newReview.title,
      name: newReview.name,
      review: newReview.review,
    };

    setReviews((existingReviews) => [...existingReviews, modifiedObj]);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.writeText}>Write your own review:</Text>

        <TextInput
          style={styles.titleInput}
          placeholder="Title of your review"
          clearButtonMode="always"
          onChangeText={newTitleHandler}
        />
        <TextInput
          style={styles.reviewInput}
          placeholder="Your review"
          clearButtonMode="always"
          onChangeText={newReviewHandler}
        />

        <TextInput
          style={styles.nameInput}
          placeholder="Your name"
          clearButtonMode="always"
          onChangeText={newNameHandler}
        />

        <TouchableOpacity
          style={styles.btn}
          onPress={() => addReviewHandler()}
        >
          <Text style={styles.btnText}>Post review</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
            <View style={styles.reviewContainer}>
              <Text style={styles.reviewTitle}>{item.title}</Text>
              <Text style={styles.review}>{item.review}</Text>
              <Text style={styles.reviewName}>- {item.name}</Text>
            </View>
        )}
      /> 
    </View>
  );
};

Answer 1

SOLUTION

I added a height to the flatList and It suddenly started scrolling!