Unable to scroll even after using Scrollview

Question

This is my code and below you can find the image where I am not able to scroll. I have tried using scrollview and also tried dimensions and also tried adding view tag in the top but still not working. What should I do to overcome this behavior? I am not able to fix it and tried many hours fixing it but still not able to achieve the scroll.

  const data = useContext(BlogContext);
  const singleBlog = data.filter((blog) => blog.title === route.params.title);

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.outer}>
        {singleBlog.length > 0 &&
          singleBlog.map((blog) => (
            <View key={Math.random()}>
              <Image source={{ uri: blog.image }} style={styles.blogImage} />

              <Text style={styles.title}>{blog.title}</Text>
              <View style={styles.authorAndDate}>
                <Text style={styles.author}>
                  <Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
                  {blog.author === null ? "unknown" : blog.author}
                </Text>
                <Text style={styles.date}>
                  {new Date(blog.published_at).toDateString()}
                </Text>
              </View>
              <Text style={styles.description}>{blog.description}</Text>
            </View>
          ))}
        {/* <StatusBar style="light" /> */}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  blogImage: {
    width: "100%",
    height: "40%",
    marginBottom: 5,
  },
  title: {
    fontFamily: "Poppins_600SemiBold",
    textTransform: "capitalize",
    fontSize: 40,
    fontWeight: "600",
    paddingHorizontal: 10,
  },
  authorAndDate: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 10,
    borderBottomColor: "#BDBDBD",
    borderBottomWidth: 1,
    paddingBottom: 10,
    marginBottom: 10,
  },
  author: {
    fontFamily: "Poppins_500Medium",
    textTransform: "capitalize",
    fontSize: 18,
    fontWeight: "700",
    color: "#434343",
  },
  date: {
    color: "#878787",
    fontFamily: "Poppins_500Medium",
    textTransform: "capitalize",
    fontWeight: "500",
    fontSize: 14,
  },
  description: {
    color: "#555555",
    fontFamily: "Poppins_400Regular",
    fontWeight: "400",
    paddingHorizontal: 10,
    fontSize: 20,
    lineHeight: 31,
  },
  container: {
    flexGrow: 1,
    borderColor: "red",
    borderWidth: 4,
  },
  outer: {
    flex: 1,
    // borderColor: "red",
    borderWidth: 4,
  },
  inner: {
    flexGrow: 1,
  },
});

export default SingleBlogScreen;

enter image description here In this Image, I am not able to scroll.

Answer 1

I have found the solution for the above issue changing the blogImage height from 60% -> 600 fixed the issue and now scroll is working thanks to @wojtek2939 for helping....