enforce a more consistent rectangle shape across different screen size.

src/screens/HomePageWithPaymentOptions.tsx

@@ -6,6 +6,7 @@ import PaymentOption from "@components/PaymentOption";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import { Dimensions } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
@@ -32,37 +33,48 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 									Méthode de paiement
 								</Text>
 							</Box>
-							<Box
-								flexDirection={"row"}
-								style={{ flexWrap: "wrap" }}
-								gap={"s"}
-								justifyContent={"space-between"}
-							>
-								{/* Payment Modes */}
-								<Box style={{ width: "48%", height: "26%" }}>
+							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+								<PaymentOptionContainer>
 									<PaymentOption
 										onPress={() =>
 											navigation.navigate("paymentAmountInputScreen")
 										}
 										paymentMethod={"OrangeMoney"}
 									/>
-								</Box>
-								<Box style={{ width: "48%", height: "26%" }}>
-									<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
-								</Box>
-
-								<Box style={{ width: "48%", height: "26%" }}>
-									<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
-								</Box>
-
-								<Box style={{ width: "48%", height: "26%" }}>
-									<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
-								</Box>
-
-								<Box style={{ width: "48%", height: "26%" }}>
-									<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
-								</Box>
+								</PaymentOptionContainer>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"MtnMoney"}
+									/>
+								</PaymentOptionContainer>
+							</Box>
+							<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"MoovMoney"}
+									/>
+								</PaymentOptionContainer>
+								<PaymentOptionContainer>
+									<PaymentOption
+										onPress={() =>
+											navigation.navigate("paymentAmountInputScreen")
+										}
+										paymentMethod={"WaveMoney"}
+									/>
+								</PaymentOptionContainer>
 							</Box>
+							<PaymentOptionContainer>
+								<PaymentOption
+									onPress={() => navigation.navigate("paymentAmountInputScreen")}
+									paymentMethod={"VisaCard"}
+								/>
+							</PaymentOptionContainer>
 						</Box>
 					</Box>
 				</SafeAreaView>
@@ -71,3 +83,14 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 	};
 
 export default HomePageWithPaymentOptions;
+
+const screenWidth = Dimensions.get("window").width;
+const paymentOptionCardWidth = screenWidth / 2 - 30;
+const paymentOptionCardHeight = paymentOptionCardWidth * 0.65;
+const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<Box width={paymentOptionCardWidth} height={paymentOptionCardHeight}>
+			{children}
+		</Box>
+	);
+};