sample, will be changed later

src/components/PaymentsOptionsRendererTwoColumn.tsx

+import type React from "react";
+import { Dimensions, View } from "react-native";
+import PaymentOption from "./PaymentOption";
+import Box from "./bases/Box";
+
+const PaymentsOptionsRendererTwoColumn = () => {
+	return (
+		<View>
+			<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
+				<PaymentOptionContainer>
+					<PaymentOption
+						onPress={() => navigation.navigate("paymentAmountInputScreen")}
+						paymentMethod={"OrangeMoney"}
+					/>
+				</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>
+		</View>
+	);
+};
+
+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>
+	);
+};
+
+export default PaymentsOptionsRendererTwoColumn;