crazycharge-app/component/registrationMultiStepForm/formComponent/form.tsx

import { useState } from "react";
import { View, Text, StyleSheet, Pressable, TouchableWithoutFeedback, Keyboard } from "react-native";
import Verification from "./formPages/verification";
import BasicInformation from "./formPages/basicInformation";
import UberDriver from "./formPages/uberDriver";
import CarInformation from "./formPages/carInformation";
import PaginationIndicator from "../../global/PaginationIndicator";
import CreateWallet from "./formPages/createWallet";
import FinishSignUp from "./formPages/finishSignUp";
import LoginPage from "./formPages/loginPage";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

type FormProps = {};
const Form: React.FC<FormProps> = ({}) => {
	const [screen, setScreen] = useState<number>(0);
	const FormTitle = [
		"",
		"註冊 - 電話驗證",
		"註冊 - 基本資料",
		"註冊 - Uber Driver",
		"註冊 - 車輛資料",
		"註冊 - 設立銀包",
	];

	const ScreenDisplay = () => {
		switch (screen) {
			case 0:
				return <LoginPage goToNextPage={goToNextPage} />;
			case 1:
				return <Verification setScreen={setScreen} />;
			case 2:
				return <BasicInformation goToNextPage={goToNextPage} />;
			case 3:
				return <UberDriver goToNextPage={goToNextPage} />;
			case 4:
				return <CarInformation goToNextPage={goToNextPage} />;
			case 5:
				return <CreateWallet goToNextPage={goToNextPage} />;
			case 6:
				return <FinishSignUp />;
			default:
				return <></>;
		}
	};

	const goToPreviousPage = () => {
		setScreen((prevState) => {
			if (prevState > 0) {
				return prevState - 1;
			} else {
				return prevState;
			}
		});
	};

	const goToNextPage = () => {
		setScreen((prevState) => {
			if (prevState < 6) {
				return prevState + 1;
			} else {
				return prevState;
			}
		});
	};

	return (
		<>
			<KeyboardAwareScrollView enableOnAndroid={true} resetScrollToCoords={{ x: 0, y: 0 }}>
				{/* not showing title and pagination on the first and last page */}
				{screen == 0 ||
					(screen < 6 && (
						//dismiss keyboard when user click outside of the input field to improve user experience
						<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
							<View style={styles.topContainer}>
								<Text style={styles.text}>{FormTitle[screen]}</Text>
								<View style={styles.breakline} />
								<View style={styles.previouspageAndPaginationWrapper}>
									<Pressable onPress={goToPreviousPage}>
										<Text style={{ color: "#888888" }}>{`<  上一步`}</Text>
									</Pressable>
									<PaginationIndicator totalPages={FormTitle.length} currentPage={screen} />
									<Pressable disabled={true} onPress={goToNextPage}>
										<Text style={{ color: "#888888", opacity: 0 }}>{`下一步  >`}</Text>
									</Pressable>
								</View>
							</View>
						</TouchableWithoutFeedback>
					))}

				<View style={styles.bottomContainer}>{ScreenDisplay()}</View>
			</KeyboardAwareScrollView>
		</>
	);
};

const styles = StyleSheet.create({
	topContainer: {
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
		paddingBottom: "20%",
		paddingTop: "15%",
	},
	previouspageAndPaginationWrapper: {
		display: "flex",
		width: "100%",
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		paddingHorizontal: 25,
	},
	bottomContainer: { flex: 2.5 },
	breakline: { width: 24, height: 1, backgroundColor: "#000000", marginVertical: 17 },
	text: { fontSize: 24, fontWeight: "300" },
});

export default Form;