My scrollView compnent is not working despite all the online solutions

I recently started learning react native and i have been going through some styling problems nad tailwind conversion of code but leaving that i am facing a more irritating issue... My scrollView tag is not scrolling...

import { ScrollView, View, Text } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";

const Home = () => {
  return (
    <SafeAreaView className=" flex-1">
      <ScrollView
        contentContainerStyle={{
          display: "flex",
          height: "100%",
          alignItems: "center",
          padding: 8,
          margin: 2,
          flex: 1,
          flexGrow: 1,
          marginHorizontal: 20,
        }}
      >
        <View className=" w-screen h-[500px] items-center mt-1">
          <View className="bg-pink-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              graph of payment made recently
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Home;

this is my home page in the route (tabs). I have gone through so many stack overflow question, so many other websites but none of the solution are working. I also note that most of them are talking about changing the flex settings and other stuff.

I expected the scroll window to scroll when i added the scrollView tag to the app but i didn't get that when i run on android studio i can see that a scrollbar is formed but its not getting used.

Pls Help i am losing hair over this (mostly its gonna be some stupid thing i didn't add)

I ran your code in React Native, and here are the adjustments you should make to the ScrollView style:

<SafeAreaView style={{flex: 1}}>
  <ScrollView
    style={{
      padding: 8,
      margin: 2,
      flex: 1,
      marginHorizontal: 20,
    }}>

  </ScrollView>
</SafeAreaView>

Additionally, remove the fixed height of the container (h-[500px]). Instead of using a percentage for height (h-2/5), provide a numeric value for height. This approach ensures better compatibility and responsiveness across different devices.