Refresh Control not working with bottom tab navigator in react native

Question

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,
  },

Answer 1

It's hard to debug something like this without enough information, I would suggest that you remove everything else you have so you can figure out if the ScrollView is the one that's not working or the elements that you put inside of it.