delivery(ahmed-sami): deliver the requested task

app/index.tsx

@@ -1,5 +1,34 @@
-import { Redirect } from "expo-router"
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Redirect } from "expo-router";
+import { useEffect, useState } from "react";
+import { ActivityIndicator } from "react-native";
+import { IS_ONBOARDING_SKIPPED } from "./utils/storageKeys";
 
 export default function Index() {
-  return <Redirect href="onboarding/signup" />
-}
+  const [isOnBoardingSkipped, setIsOnBoardingSkipped] = useState<string>();
+
+  const _onLoad = async () => {
+    try {
+      const _isOnBoardingSkipped = await AsyncStorage.getItem(
+        IS_ONBOARDING_SKIPPED
+      );
+      setIsOnBoardingSkipped(_isOnBoardingSkipped);
+    } catch (e) {
+      console.log("Cannot get IS_ONBOARDING_SKIPPED", e);
+    }
+  };
+
+  useEffect(() => {
+    _onLoad();
+  }, []);
+
+  if (isOnBoardingSkipped === undefined) {
+    return <ActivityIndicator />;
+  }
+
+  if (isOnBoardingSkipped !== "true") {
+    return <Redirect href="onboarding/signup" />;
+  }
+
+  return <Redirect href={"onboarding/game-selection"} />;
+}

app/onboarding/signup.tsx

@@ -1,19 +1,73 @@
-import { Link, Stack } from "expo-router";
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { Stack, useNavigation } from "expo-router";
+import { Image, StyleSheet, TouchableOpacity } from "react-native";
+import Onboarding from "react-native-onboarding-swiper";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { IS_ONBOARDING_SKIPPED } from "../utils/storageKeys";
 
 export default function Signup() {
+  const navigation = useNavigation();
   const options = {
-    title: "Signup",
+    headerShown: false,
+  };
+
+  const onPressDone = async () => {
+    try {
+      await AsyncStorage.setItem(IS_ONBOARDING_SKIPPED, "true");
+      navigation.reset({
+        routes: [
+          {
+            name: "onboarding/game-selection",
+          },
+        ],
+      });
+    } catch (e) {
+      console.log("Cannot set IS_NEW_USER to false", e);
+    }
   };
 
   return (
-    <View style={styles.container}>
+    <>
       <Stack.Screen options={options} />
-      <Link style={styles.button} href="/onboarding/game-selection" asChild>
-        <Text>to game selection</Text>
-      </Link>
-    </View>
+      <Onboarding
+        showSkip={false}
+        bottomBarHighlight={false}
+        showNext={false}
+        pages={[
+          {
+            backgroundColor: "#202020",
+            subtitle: "Welcome to QLASH  Community App",
+            image: (
+              <Image
+                resizeMode="contain"
+                style={styles.image}
+                source={require("../../assets/logo.png")}
+              />
+            ),
+          },
+          {
+            backgroundColor: "#202020",
+            title: "Engage",
+            subtitle: "Join the community and find new friends to play with",
+          },
+          {
+            backgroundColor: "#202020",
+            title: "Compete",
+            subtitle: "Enroll now in you favorite games competitions and win!",
+          },
+        ]}
+        DoneButtonComponent={() => (
+          <TouchableOpacity onPress={onPressDone}>
+            <Ionicons
+              name="checkmark-circle"
+              style={styles.icon}
+              size={45}
+              color="#6d6d6d"
+            />
+          </TouchableOpacity>
+        )}
+      />
+    </>
   );
 }
 
@@ -24,10 +78,11 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-	button: {
-		borderWidth: 1,
-		borderColor: 'black',
-		padding: 15,
-		borderRadius: 5,
-	}
+  image: {
+    width: 120,
+    height: 120,
+  },
+  icon: {
+    marginRight: 8,
+  },
 });

app/utils/storageKeys.ts

@@ -0,0 +1 @@
+export const IS_ONBOARDING_SKIPPED = "@storage/isOnboardingSkipped";

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@types/react": "~18.0.27",
     "expo": "~48.0.15",
     "expo-constants": "~14.2.1",
@@ -18,6 +19,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.7",
+    "react-native-onboarding-swiper": "^1.2.0",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-web": "~0.18.10"

tsconfig.json

@@ -1,4 +1,6 @@
 {
-  "compilerOptions": {},
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
   "extends": "expo/tsconfig.base"
 }