Finalize assessment task

app/common/components/Input/index.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import { useController } from "react-hook-form";
+import { TextInput } from "react-native-paper";
+import inputStyles from "./styles";
+import { KeyboardTypeOptions } from "react-native";
+
+interface InputProps {
+  name: string;
+  label: string;
+  control: any;
+  style?: object;
+  isSecureTextEntry?: boolean;
+  testID?: string;
+  keyboardType?: KeyboardTypeOptions;
+  defaultValue?: string;
+  multiline?: boolean;
+  placeholder?: string;
+}
+
+const Input: React.FC<InputProps> = ({
+  name,
+  label,
+  control,
+  style = undefined,
+  isSecureTextEntry = false,
+  testID = undefined,
+  keyboardType = undefined,
+  defaultValue = "",
+  multiline = false,
+  placeholder = "",
+}) => {
+  const { field } = useController({
+    control,
+    name,
+    defaultValue: defaultValue,
+  });
+  const styles = useMemo(() => inputStyles(), []);
+  const textInputStyle = style || styles.default_input_style;
+
+  return (
+    <TextInput
+      testID={testID}
+      value={field.value}
+      onChangeText={field.onChange}
+      style={textInputStyle}
+      secureTextEntry={isSecureTextEntry}
+      keyboardType={keyboardType}
+      multiline={multiline}
+      placeholder={placeholder}
+      mode="outlined"
+      label={label}
+    />
+  );
+};
+export default Input;

app/common/components/Input/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+
+function inputStyles() {
+  return StyleSheet.create({
+    default_input_style: {
+      marginTop: 16,
+      marginHorizontal: 24,
+    },
+  });
+}
+
+export default inputStyles;

app/index.tsx

@@ -1,5 +1,9 @@
-import { Redirect } from "expo-router"
-
+import { Redirect } from "expo-router";
+import { Provider as PaperProvider } from "react-native-paper";
 export default function Index() {
-  return <Redirect href="onboarding/signup" />
-}
+  return (
+    <PaperProvider>
+      <Redirect href="onboarding" />
+    </PaperProvider>
+  );
+}

app/onboarding/index.tsx

@@ -0,0 +1,68 @@
+import { Link, Stack, useRouter } from "expo-router";
+import { Dimensions, FlatList, StyleSheet, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Button, Text } from "react-native-paper";
+import { useMemo } from "react";
+import onboardingStyles from "./styles";
+
+interface Tip {
+  title: string;
+  description: string;
+  icon: string;
+}
+
+export default function GameSelection() {
+  const options = {
+    headerShown: false,
+  };
+
+  const router = useRouter();
+
+  const styles = useMemo(
+    () => onboardingStyles(),
+    [Dimensions.get("window").width]
+  );
+
+  const TIPS: Array<Tip> = [
+    { title: "15M+", description: "Followers", icon: "heart-sharp" },
+    { title: "250K+", description: "Community Members", icon: "md-people" },
+    {
+      title: "120+",
+      description: "Pro players & Influencers",
+      icon: "md-trophy",
+    },
+  ];
+
+  const renderItem = ({ item, index }) => {
+    return (
+      <View style={styles.itemContainer}>
+        <Ionicons name={item.icon} size={100} color={"#5de3dc"} />
+        <Text variant="headlineLarge">{item.title}</Text>
+        <Text variant="headlineSmall">{item.description}</Text>
+        {index === TIPS.length - 1 && (
+          <Button
+            mode="contained"
+            style={styles.btn}
+            onPress={() => router.replace("signup")}
+          >
+            Sign Up
+          </Button>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <>
+      <Stack.Screen options={options} />
+      <FlatList
+        data={TIPS}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        snapToInterval={Dimensions.get("window").width}
+        decelerationRate={"fast"}
+        renderItem={renderItem}
+      />
+    </>
+  );
+}

app/onboarding/styles.ts

@@ -0,0 +1,16 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+export default function onboardingStyles() {
+  return StyleSheet.create({
+    btn: {
+      position: "absolute",
+      bottom: 60,
+    },
+    itemContainer: {
+      width: Dimensions.get("window").width,
+      backgroundColor: "white",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  });
+}

app/signup/index.tsx

@@ -0,0 +1,79 @@
+import { Stack, useRouter } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import Input from "../common/components/Input";
+import { Button, Text } from "react-native-paper";
+import signupStyles from "./styles";
+import { useMemo } from "react";
+interface UserCredentials {
+  email: string;
+  password: string;
+}
+
+export default function Signup() {
+  const router = useRouter();
+  const styles = useMemo(() => signupStyles(), []);
+
+  const schema: yup.ObjectSchema<UserCredentials> = yup
+    .object({
+      email: yup
+        .string()
+        .required("Email is a required field")
+        .email("Please enter a valid email address"),
+      password: yup.string().required("Password is a required field"),
+    })
+    .required();
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<UserCredentials>({
+    resolver: yupResolver(schema),
+  });
+
+  const options = {
+    title: "Signup",
+  };
+
+  const onSubmit = () => {
+    router.push("home");
+  };
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={options} />
+      <View style={styles.inputsContainer}>
+        <Input
+          name="email"
+          control={control}
+          label="Email"
+          keyboardType="email-address"
+        />
+        {errors?.email && (
+          <Text style={styles.errorTxt}> {errors.email.message}</Text>
+        )}
+        <Input
+          name="password"
+          control={control}
+          label="Password"
+          keyboardType="visible-password"
+          isSecureTextEntry
+        />
+        {errors?.password && (
+          <Text style={styles.errorTxt}> {errors.password.message}</Text>
+        )}
+      </View>
+
+      <Button
+        mode="contained"
+        onPress={handleSubmit(onSubmit)}
+        style={styles.submitBtn}
+        textColor="white"
+      >
+        Signup
+      </Button>
+    </View>
+  );
+}

app/signup/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+
+export default function signupStyles() {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: "#fff",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    inputsContainer: {
+      width: "100%",
+      alignItems: "stretch",
+    },
+    errorTxt: {
+      color: "red",
+      marginLeft: 24,
+    },
+    submitBtn: {
+      marginTop: 16,
+    },
+  });
+}

index.ts

@@ -1 +1 @@
-import "expo-router/entry";
+import "expo-router/entry";

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.1.0",
     "@types/react": "~18.0.27",
     "expo": "~48.0.15",
     "expo-constants": "~14.2.1",
@@ -17,10 +18,13 @@
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-native": "0.71.7",
-    "react-native-safe-area-context": "4.5.0",
+    "react-native-paper": "^5.7.1",
+    "react-native-safe-area-context": "^4.5.2",
     "react-native-screens": "~3.20.0",
-    "react-native-web": "~0.18.10"
+    "react-native-web": "~0.18.10",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",