Feat : UI and Functionalities for onBoarding

app/_layout.tsx

@@ -1,11 +1,32 @@
 import { Stack } from "expo-router";
 
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Image, View } from "react-native";
 
+function LogoTitle() {
+  return (
+    <View>
+      <Image
+        style={{ width: 50, height: 50 }}
+        source={require("../assets/logo.png")}
+      />
+    </View>
+  );
+}
 export default function RootLayout() {
   return (
     <SafeAreaProvider>
-      <Stack initialRouteName="index" />
+      <Stack
+        initialRouteName="index"
+        screenOptions={{
+          headerStyle: { backgroundColor: "black" },
+          headerTintColor: "#fff",
+          headerTitleStyle: {
+            fontWeight: "bold",
+          },
+          headerTitle: () => <LogoTitle />,
+        }}
+      />
     </SafeAreaProvider>
   );
 }

app/components/AppTextInput.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { View, TextInput, StyleSheet, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+function AppTextInput({
+  icon,
+  hiddenIcon,
+  onPress,
+  width = "100%",
+  ...otherProps
+}) {
+  return (
+    <View style={[styles.container, { width: "100%" }]}>
+      <View style={{ flexDirection: "row" }}>
+        <MaterialCommunityIcons
+          name={icon}
+          size={25}
+          color={"#848d937f"}
+          style={styles.icon}
+        />
+
+        <TextInput
+          placeholderTextColor={"#848d937f"}
+          style={styles.text}
+          {...otherProps}
+        />
+      </View>
+      {hiddenIcon && (
+        <TouchableOpacity onPress={onPress}>
+          <MaterialCommunityIcons
+            name={hiddenIcon}
+            size={25}
+            color={"#848d937f"}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "black",
+    borderRadius: 8,
+    flexDirection: "row",
+    padding: 15,
+    marginVertical: 10,
+    borderWidth: 2,
+    borderColor: "#17b1f3",
+    justifyContent: "space-between",
+  },
+  icon: {
+    marginRight: 10,
+  },
+  text: {
+    fontSize: 18,
+    color: "#848d937f",
+  },
+});
+
+export default AppTextInput;

app/components/ErrorMessage.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+
+function ErrorMessage({ error }) {
+  return <Text style={styles.error}>{error}</Text>;
+}
+
+const styles = StyleSheet.create({
+  error: { color: "red", fontSize: 14 },
+});
+
+export default ErrorMessage;

app/data/games.js

@@ -0,0 +1,26 @@
+export const GAMES = [
+  {
+    id: 1,
+    name: "Clash Royale",
+  },
+  {
+    id: 2,
+    name: "Clash of Clans",
+  },
+  {
+    id: 3,
+    name: "Clash Mini",
+  },
+  {
+    id: 4,
+    name: "Tennis Clash",
+  },
+  {
+    id: 5,
+    name: "Clash Quest",
+  },
+  {
+    id: 6,
+    name: "Golf Clash",
+  },
+];

app/home/home.tsx

@@ -1,25 +1,47 @@
-import { Link, Stack } from "expo-router";
+import { Link, Stack, useSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 
 export default function Signup() {
+  const { email, gameSelected } = useSearchParams();
+
   const options = {
     title: "Home",
   };
 
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Text>Home</Text>
+      <View style={styles.headerContainer}>
+        <View style={{ flexDirection: "row" }}>
+          <Text style={styles.header}>User:</Text>
+          <Text style={styles.header}>{email}</Text>
+        </View>
+        <View style={{ flexDirection: "row" }}>
+          <Text style={styles.header}>Game Selected:</Text>
+          <Text style={styles.header}>{gameSelected}</Text>
+        </View>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: "black",
+    padding: 20,
+  },
+  headerContainer: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#17b1f3",
+    padding: 4,
+  },
+  header: {
+    color: "#17b1f3",
+    fontSize: 18,
+    textAlign: "center",
+    margin: 5,
   },
 });

app/onboarding/game-selection.tsx

@@ -1,33 +1,101 @@
-
-import { Link, Stack } from "expo-router";
-import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import { Link, Stack, useRouter, useSearchParams } from "expo-router";
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  TouchableOpacity,
+} from "react-native";
+import { GAMES } from "../data/games";
 
 export default function GameSelection() {
+  const { email } = useSearchParams();
+  const [gameSelected, setGameSelected] = useState("");
   const options = {
     title: "Game Selection",
   };
-
+  const router = useRouter();
+  function renderGameItem(item: any) {
+    return (
+      <TouchableOpacity onPress={() => setGameSelected(item.name)}>
+        <View
+          style={
+            gameSelected === item.name
+              ? [styles.gameContainer, { backgroundColor: "white" }]
+              : styles.gameContainer
+          }
+        >
+          <Text style={[styles.info, { fontWeight: "bold" }]}>{item.name}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+  function handleNavigation() {
+    router.push("/home/home");
+    router.setParams({ email: email, gameSelected: gameSelected });
+  }
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Link style={styles.button} href="/home/home" asChild>
-        <Text>to home</Text>
-      </Link>
+      <Text style={styles.header}>
+        Email : <Text style={styles.info}>{email}</Text>
+      </Text>
+      <FlatList
+        data={GAMES}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }) => renderGameItem(item)}
+      />
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => handleNavigation()}
+      >
+        <Text style={styles.buttonText}>HOME</Text>
+      </TouchableOpacity>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "black",
+    padding: 16,
+    justifyContent: "space-between",
+  },
+  header: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "white",
+    marginBottom: 20,
+  },
+  info: {
+    color: "#17b1f3",
+    marginHorizontal: 20,
+  },
+  gameContainer: {
+    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
+    borderColor: "#17b1f3",
+    borderWidth: 1,
+    borderRadius: 8,
+    marginVertical: 10,
+    padding: 8,
+  },
+  buttonText: {
+    marginBottom: 8,
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "black",
+    fontFamily: "Roboto",
+    textAlign: "center",
+  },
+  button: {
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 10,
+    margin: 2,
+    backgroundColor: "#17b1f3",
   },
-	button: {
-		borderWidth: 1,
-		borderColor: 'black',
-		padding: 15,
-		borderRadius: 5,
-	}
 });