popping a modal when the filter button is clicked. will work on the content of the modal.

src/screens/TransactionHistoryScreen.tsx

@@ -2,15 +2,20 @@ import Input from "@components/Input";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
 import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
 import Box from "@components/bases/Box";
+import Text from "@components/bases/Text";
 import useTransactionsHistory from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
+import { useState } from "react";
 import { RefreshControl, ScrollView } from "react-native";
+import Icon from "react-native-vector-icons/Ionicons";
 
 const log = LOG.extend("TransactionHistoryScreen");
 
 const TransactionHistoryScreen = () => {
 	log.verbose("TransactionHistoryScreen");
 
+	const [showFiltersModal, setShowFiltersModal] = useState(false);
+
 	const {
 		transactionsHistory: data,
 		isLoading,
@@ -22,8 +27,28 @@ const TransactionHistoryScreen = () => {
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
 			<>
-				<Box px={"m"} mt={"m"}>
-					<Input label={"Reference"} onChangeText={setReferenceFilter} />
+				{showFiltersModal && <FiltersModal setShowFiltersModal={setShowFiltersModal} />}
+				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
+				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
+					<Box flex={1}>
+						<Input placeholder="Reference" onChangeText={setReferenceFilter} />
+					</Box>
+					<Box
+						height={50}
+						backgroundColor={"lightGray"}
+						borderRadius={10}
+						width={50}
+						// justifyContent={"center"}
+						alignItems={"center"}
+						justifyContent={"center"}
+					>
+						<Icon
+							name="filter"
+							size={30}
+							color="black"
+							onPress={() => setShowFiltersModal(true)}
+						/>
+					</Box>
 				</Box>
 				<ScrollView
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
@@ -53,3 +78,52 @@ const TransactionHistoryScreen = () => {
 };
 
 export default TransactionHistoryScreen;
+
+interface FiltersModalProps {
+	setShowFiltersModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
+	return (
+		<>
+			{/* Overlay */}
+			<Box
+				width={"100%"}
+				height={"100%"}
+				backgroundColor={"black"}
+				opacity={0.5}
+				position={"absolute"}
+				zIndex={10}
+				// p={"m"}
+			/>
+
+			{/* Content */}
+
+			<Box width={"100%"} height={"100%"} position={"absolute"} zIndex={11} p={"m"}>
+				<Box
+					backgroundColor={"white"}
+					width={"100%"}
+					height={"100%"}
+					borderRadius={10}
+					p={"m"}
+				>
+					<Box
+						justifyContent={"space-between"}
+						alignItems={"center"}
+						flexDirection={"row"}
+						width={"100%"}
+					>
+						<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
+							Paramétrage du filtre
+						</Text>
+						<Icon
+							name="close-outline"
+							size={30}
+							color="black"
+							onPress={() => setShowFiltersModal(false)}
+						/>
+					</Box>
+				</Box>
+			</Box>
+		</>
+	);
+};