payment workflow stack navigation

src/navigations/PaymentStackNavigation.tsx

+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import HomePageWithPaymentOptions from "@screens/HomePageWithPaymentOptions";
+import NumberAndOtpForPaymentScreen from "@screens/NumberAndOtpForPaymentScreen";
+import PaymentAmountInputScreen from "@screens/PaymentAmountInputScreen";
+import type { PaymentStackParamList } from "./Types";
+
+const Stack = createNativeStackNavigator<PaymentStackParamList>();
+
+const PaymentStackNavigator = () => {
+	return (
+		<Stack.Navigator
+			initialRouteName="homePageWithPaymentOptions"
+			screenOptions={{ headerShown: false }}
+		>
+			<Stack.Screen
+				name="homePageWithPaymentOptions"
+				component={HomePageWithPaymentOptions}
+			/>
+			<Stack.Screen
+				name="numberAndOtpForPaymentScreen"
+				component={NumberAndOtpForPaymentScreen}
+			/>
+			<Stack.Screen name="paymentAmountInputScreen" component={PaymentAmountInputScreen} />
+		</Stack.Navigator>
+	);
+};
+
+export default PaymentStackNavigator;

src/navigations/Types.ts

+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type PaymentStackParamList = {
+	homePageWithPaymentOptions: undefined;
+	numberAndOtpForPaymentScreen: undefined;
+	paymentAmountInputScreen: undefined;
+};
+
+export type PaymentStackScreenProps<T extends keyof PaymentStackParamList> = NativeStackScreenProps<
+	PaymentStackParamList,
+	T,
+	"PaymentStackParamList"
+>;
+
+export type PaymentStackScreenComponentProps<T extends keyof PaymentStackParamList> = React.FC<
+	PaymentStackScreenProps<T>
+>;