I have an app with three tabs! In the first tab which displays all my product i would like to be able to drag and refresh all products from database!

I tried using the refresh control but it doesn't work.. It didn't even drag down!

NOTE: In the tab I have a stack navigator with other screens i'm just trying to refresh the initial screen of the stack navigator in a Tab navigator in a stack navigator Stack Nav -> Tab Nav -> Stack Nav -> Products Screen

My code

The Scroll View:

<SafeAreaView style={{ flex: 1 }}>
        <Header searchFunction={showSearch} />
        {/* <Text style={GlobalStyles.title}>Home Screen</Text> */}
        <ScrollView
          style={GlobalStyles.container}
          showsVerticalScrollIndicator={false}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={() => {
                console.log("Working");
              }}
            />
          }
        >
        ...
       </ScrollView>
</SafeAreaView>

GlobalStyles.container:

container: {
    flex: 1,
    backgroundColor: color.light,
    padding: 10,
  },