Onboarding Screen Exercise Resolved

app/components/Slides/SharedSlide.tsx

@@ -0,0 +1,54 @@
+import {
+  View,
+  Text,
+  ImageBackground,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
+import React from "react";
+import { SharedSlideProps } from "../../utils/types";
+
+const SharedSlide = ({
+  image,
+  text,
+  textWrapperStyle,
+  textStyle,
+  children,
+}: SharedSlideProps) => {
+  return (
+    <View style={styles.container}>
+      <ImageBackground source={image} style={styles.image}>
+        <View style={{ flex: 1, alignItems: "center" }}>
+          <View style={[styles.textWrapper, {...textWrapperStyle}]}>
+            <Text style={[styles.text, { ...textStyle }]}>{text}</Text>
+            {children}
+          </View>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#9DD6EB",
+  },
+  image: {
+    flex: 1,
+  },
+  textWrapper: {
+    flex: 1,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginBottom: Dimensions.get("screen").width / 6,
+    width: "80%",
+  },
+  text: {
+    color: "#fff",
+    textAlign: "center",
+    lineHeight: 25,
+  },
+});
+
+export default SharedSlide;

app/components/Slides/SlideFour.tsx

@@ -0,0 +1,45 @@
+import { Dimensions } from "react-native";
+import React from "react";
+import Button from "../common/Button";
+import SharedSlide from "./SharedSlide";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useNavigation } from "expo-router";
+import { IS_APP_LAUNCHED } from "../../utils/constants";
+
+const SlideFour = () => {
+  const navigation = useNavigation();
+
+  const onPress = async () => {
+    try {
+      await AsyncStorage.setItem(IS_APP_LAUNCHED, "true");
+      navigation.reset({
+        routes: [
+          {
+            name: "onboarding/game-selection",
+          },
+        ],
+      });
+    } catch (e) {
+      console.log("Cannot set IS_NEW_USER to false", e);
+    }
+  };
+
+
+  return (
+    <SharedSlide
+      image={require("../../../assets/slide-four.webp")}
+      text={"Are You Ready?"}
+      textWrapperStyle={{
+        marginBottom: Dimensions.get("screen").width / 7,
+      }}
+      textStyle={{
+        fontSize: 30,
+        fontFamily: "Bangers_400Regular",
+      }}
+    >
+      <Button title="Get Started" onPress={onPress} />
+    </SharedSlide>
+  );
+};
+
+export default SlideFour;

app/components/Slides/SlideOne.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import SharedSlide from "./SharedSlide";
+import { Dimensions } from "react-native";
+
+const SlideOne = () => {
+  return (
+    <SharedSlide
+      image={require("../../../assets/slide-one.webp")}
+      text={"Welcome To Qlash"}
+      textWrapperStyle={{
+        marginBottom: Dimensions.get("screen").width / 5,
+      }}
+      textStyle={{
+        fontSize: 30,
+        fontFamily: "Bangers_400Regular",
+      }}
+    />
+  );
+};
+
+export default SlideOne;

app/components/Slides/SlideThree.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import SharedSlide from "./SharedSlide";
+
+const SlideThree = () => {
+  return (
+    <SharedSlide
+      image={require("../../../assets/slide-three.jpeg")}
+      text={"Join us to Build your team and participate in world class"}
+      textStyle={{
+        fontSize: 20,
+        fontFamily: "Oswald_700Bold",
+      }}
+    />
+  );
+};
+
+export default SlideThree;

app/components/Slides/SlideTwo.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import SharedSlide from "./SharedSlide";
+
+const SlideTwo = () => {
+  return (
+    <SharedSlide
+      image={require("../../../assets/slide-two.jpg")}
+      text={"The Best ESport Community and Game Organizer For You"}
+      textStyle={{
+        fontSize: 20,
+        fontFamily: "Oswald_700Bold",
+      }}
+    />
+  );
+};
+
+export default SlideTwo;

app/components/common/Button.tsx

@@ -0,0 +1,34 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import React from 'react'
+import { CommonButtonProps } from '../../utils/types'
+
+
+const Button = ({title, onPress}:CommonButtonProps) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+        <View style={styles.button}>
+        <Text style={styles.buttonText}>{title}</Text>
+        </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+    container:{
+        marginTop:15
+    },
+    button:{
+        borderRadius:5,
+        paddingVertical:8,
+        paddingHorizontal:15,
+        backgroundColor:"#6BF3E7"
+    },
+    buttonText:{
+        color:"#000",
+        fontSize:16,
+        textAlign:'center',
+        fontFamily:"Oswald_700Bold"
+    }
+})
+
+export default Button

app/home/home.tsx

@@ -2,7 +2,7 @@ import { Link, Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 
-export default function Signup() {
+export default function Home() {
   const options = {
     title: "Home",
   };

app/index.tsx

@@ -1,5 +1,49 @@
-import { Redirect } from "expo-router"
+import { useEffect, useState } from "react";
+import { useFonts } from "expo-font";
+import { Bangers_400Regular } from "@expo-google-fonts/bangers";
+import { Oswald_700Bold } from "@expo-google-fonts/oswald";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { IS_APP_LAUNCHED } from "./utils/constants";
+import { SplashScreen } from "expo-router";
+import GameSelection from "./onboarding/game-selection";
+import Signup from "./onboarding/signup";
+
 
 export default function Index() {
-  return <Redirect href="onboarding/signup" />
+  // UI hooks
+  const [isAppLaunched, setIsAppLaunched] = useState<string>();
+
+  // Function to check if it's the first time launching the app
+  const loadAppAsync = async () => {
+    try {
+      const _isAppLaunched = await AsyncStorage.getItem(IS_APP_LAUNCHED);
+      setIsAppLaunched(_isAppLaunched);
+    } catch (err) {
+      console.log("Error ", err);
+    }
+  };
+
+  // Function to load the fonts
+  let [fontsLoaded] = useFonts({
+    Bangers_400Regular,
+    Oswald_700Bold,
+  });
+
+  useEffect(() => {
+    loadAppAsync();
+  }, []);
+
+
+
+
+  if (!fontsLoaded || isAppLaunched === undefined) {
+    return <SplashScreen />
+  }
+  return (
+      isAppLaunched !== "true" ? (
+        <Signup/>
+      ) : (
+        <GameSelection/>
+      )
+  )
 }

app/onboarding/signup.tsx

@@ -1,33 +1,35 @@
-import { Link, Stack } from "expo-router";
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { Stack } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import Swiper from "react-native-swiper";
+import SlideOne from "../components/Slides/SlideOne";
+import SlideThree from "../components/Slides/SlideThree";
+import SlideFour from "../components/Slides/SlideFour";
+import SlideTwo from "../components/Slides/SlideTwo";
 
 export default function Signup() {
   const options = {
-    title: "Signup",
+    headerShown: false,
   };
 
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Link style={styles.button} href="/onboarding/game-selection" asChild>
-        <Text>to game selection</Text>
-      </Link>
+      <Swiper
+        dotColor={"rgba(255,255,255,.7)"}
+        activeDotColor={"#6BF3E7"}
+        showsButtons={false}
+      >
+        <SlideOne />
+        <SlideTwo />
+        <SlideThree />
+        <SlideFour />
+      </Swiper>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-	button: {
-		borderWidth: 1,
-		borderColor: 'black',
-		padding: 15,
-		borderRadius: 5,
-	}
+  }
 });

app/utils/constants.ts

@@ -0,0 +1 @@
+export const IS_APP_LAUNCHED = "@storage_isAppLaunched"

app/utils/types.ts

@@ -0,0 +1,21 @@
+import { ImageSourcePropType } from "react-native";
+
+interface CommonButtonProps {
+  title: string;
+  onPress: () => void;
+}
+
+interface SharedSlideProps {
+  image: ImageSourcePropType;
+  text: string;
+  textWrapperStyle?: {
+    marginBottom: number;
+  };
+  textStyle: {
+    fontSize: number;
+    fontFamily: string;
+  };
+  children?: React.ReactNode;
+}
+
+export { CommonButtonProps, SharedSlideProps };

package.json

@@ -9,21 +9,28 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo-google-fonts/bangers": "^0.2.3",
+    "@expo-google-fonts/oswald": "^0.2.3",
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@types/react": "~18.0.27",
     "expo": "~48.0.15",
     "expo-constants": "~14.2.1",
+    "expo-font": "~11.1.1",
     "expo-linking": "~4.0.1",
     "expo-router": "^1.5.3",
+    "expo-splash-screen": "^0.18.2",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.7",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
+    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.18.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@types/react-native": "^0.71.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   },