fix the gap property not working by using contentContainerStyle and removing the box wrapper

src/screens/TransactionHistoryScreen.tsx

 import { getTransactionsHistory } from "@/utils/requests/transactions";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
 import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
-import Box from "@components/bases/Box";
 import { LOG } from "@logger";
 import { useQuery } from "@tanstack/react-query";
-import { ScrollView } from "react-native";
+import { RefreshControl, ScrollView } from "react-native";
 
 const log = LOG.extend("TransactionHistoryScreen");
 
 const TransactionHistoryScreen = () => {
 	log.verbose("TransactionHistoryScreen");
 
-	const { data, isLoading, error } = useQuery({
+	const { data, isLoading, error, refetch } = useQuery({
 		queryKey: ["transactionsHistory"],
 		queryFn: getTransactionsHistory,
 	});
@@ -21,12 +20,12 @@ const TransactionHistoryScreen = () => {
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
 			<ScrollView
-				style={{ flex: 1, gap: 100, flexDirection: "column" }}
+				refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
+				contentContainerStyle={{ flex: 1, gap: 5, flexDirection: "column" }}
 				showsVerticalScrollIndicator={false}
 			>
 				{data?.map((transaction) => (
 					// <Text key={transaction.reference}>{transaction.reference}</Text>
-					<Box key={transaction.reference} mb={"s"}>
 					<TransactionInformationsItem
 						key={transaction.reference}
 						paymentType={transaction.type_paiement_label}
@@ -35,7 +34,6 @@ const TransactionHistoryScreen = () => {
 						date={transaction.date}
 						status={transaction.status}
 					/>
-					</Box>
 				))}
 			</ScrollView>
 		</BackgroundWithBeasyIconAndWhiteContentArea>