Skip to content

B
beasy-mobile
Commit eca08b09 by G
Options

enforce a more consistent rectangle shape across different screen size.

all payment option will lead to the default input page for now
parent 63980e25
Showing with 47 additions and 24 deletions
src/screens/HomePageWithPaymentOptions.tsx
...@@ -6,6 +6,7 @@ import PaymentOption from "@components/PaymentOption"; ...@@ -6,6 +6,7 @@ import PaymentOption from "@components/PaymentOption";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea"; import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box"; import Box from "@components/bases/Box";
import Text from "@components/bases/Text"; import Text from "@components/bases/Text";
import { Dimensions } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context"; import { SafeAreaView } from "react-native-safe-area-context";
const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> = const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
...@@ -32,37 +33,48 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith ...@@ -32,37 +33,48 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
Méthode de paiement Méthode de paiement
</Text> </Text>
</Box> </Box>
<Box <Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
flexDirection={"row"} <PaymentOptionContainer>
style={{ flexWrap: "wrap" }}
gap={"s"}
justifyContent={"space-between"}
>
{/* Payment Modes */}
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption <PaymentOption
onPress={() => onPress={() =>
navigation.navigate("paymentAmountInputScreen") navigation.navigate("paymentAmountInputScreen")
} }
paymentMethod={"OrangeMoney"} paymentMethod={"OrangeMoney"}
/> />
</Box> </PaymentOptionContainer>
<Box style={{ width: "48%", height: "26%" }}> <PaymentOptionContainer>
<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} /> <PaymentOption
</Box> onPress={() =>
navigation.navigate("paymentAmountInputScreen")
<Box style={{ width: "48%", height: "26%" }}> }
<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} /> paymentMethod={"MtnMoney"}
</Box> />
</PaymentOptionContainer>
<Box style={{ width: "48%", height: "26%" }}> </Box>
<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} /> <Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
</Box> <PaymentOptionContainer>
<PaymentOption
<Box style={{ width: "48%", height: "26%" }}> onPress={() =>
<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} /> navigation.navigate("paymentAmountInputScreen")
</Box> }
paymentMethod={"MoovMoney"}
/>
</PaymentOptionContainer>
<PaymentOptionContainer>
<PaymentOption
onPress={() =>
navigation.navigate("paymentAmountInputScreen")
}
paymentMethod={"WaveMoney"}
/>
</PaymentOptionContainer>
</Box> </Box>
<PaymentOptionContainer>
<PaymentOption
onPress={() => navigation.navigate("paymentAmountInputScreen")}
paymentMethod={"VisaCard"}
/>
</PaymentOptionContainer>
</Box> </Box>
</Box> </Box>
</SafeAreaView> </SafeAreaView>
...@@ -71,3 +83,14 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith ...@@ -71,3 +83,14 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
}; };
export default HomePageWithPaymentOptions; 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>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment