Flat list not taking the full available height

Question

I want to implement pull-to-refresh feature on my main screen. I am using FlatList to achieve this but the FlatList does not take the full available height after the header and the footer. Is there any other way to achieve the same ?

This is my code.

const MainLayout = ({ children, onRefresh }) => {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    await onRefresh?.();
    setRefreshing(false);
  }, [onRefresh]);

  // Wrap children in a temporary object to make FlatList render them
  const renderItem = () => (
    <View style={styles.childrenContainer}>{children}</View>
  );

  return (
    <View style={styles.container}>
      <Header />
      <FlatList
      style={{ flex: 1, margin: 10 }}
      contentContainerStyle={{ flexGrow: 1 }}
        data={[{ key: 'content' }]}  // Single item to trigger the renderItem
        renderItem={renderItem}
        ListFooterComponent={""} // Add footer as ListFooterComponent
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
        }
        // FlatList takes up the rest of the space
        // style={styles.content}
        showsVerticalScrollIndicator={false} // Optional to hide scroll indicator
      />
      <Footer />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  childrenContainer: {
    flex: 1,
  },
});

export default MainLayout;

I tried using scroll view and the **flatlist **with the flex:1 and flexgrow on the contentStyle of the flat list but it is not working.