feat: Add welcome screen

Author: yashbhesaniya

app/src/constants/screens.ts

@@ -1,19 +1,12 @@
-// File: screens.ts
-// Description: This file defines enums for screen and stack names used in the application's navigation structure.
-// The `Screens` enum is used to define the names of individual screens.
-// The `Stacks` enum is used to define the names of navigation stacks (authenticated and unauthenticated).
-// Usage:
-// - The `Screens` enum is used in the `UnAuthRoutes` and `AuthRoutes` components to define the routes for various screens.
-// - The `Stacks` enum is used in the `AppRoutes` component to define the main navigation stacks for authenticated and unauthenticated users.
-
 export enum Screens {
   SignIn = 'SignIn',
   SignUp = 'SignUp',
   ForgotPassword = 'ForgotPassword',
   ResetPassword = 'ResetPassword',
   Landing = 'Landing',
   Home = 'Home',
-  Profile = 'Profile'
+  Profile = 'Profile',
+  Welcome = 'Welcome'
 }
 
 export enum Stacks {

app/src/routes/AuthRoutes.tsx

@@ -5,12 +5,13 @@
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { Drawer, Header } from '@src/components';
 import { Screens } from '@src/constants';
-import { Home, Profile } from '@src/screens';
+import { Home, Profile, Welcome } from '@src/screens';
 
 // Define the parameter types for the AuthRoutes drawer navigator
 export type AuthRoutesParams = {
   [Screens.Home]: undefined;
   [Screens.Profile]: undefined;
+  [Screens.Welcome]: undefined;
 };
 
 // Create a drawer navigator for authenticated routes
@@ -24,10 +25,15 @@ const AuthDrawer = createDrawerNavigator<AuthRoutesParams>();
 export const AuthRoutes: React.FC = () => {
   return (
     <AuthDrawer.Navigator
-      initialRouteName={Screens.Home}
+      initialRouteName={Screens.Welcome}
       screenOptions={{ header: (props) => <Header {...props} /> }}
       drawerContent={(props) => <Drawer {...props} />}
     >
+      <AuthDrawer.Screen
+        name={Screens.Welcome}
+        component={Welcome}
+        options={{ headerShown: false }}
+      />
       <AuthDrawer.Screen name={Screens.Home} component={Home} />
       <AuthDrawer.Screen name={Screens.Profile} component={Profile} />
     </AuthDrawer.Navigator>

app/src/screens/Welcome.tsx

@@ -0,0 +1,61 @@
+import { useNavigation } from '@react-navigation/native';
+import { Button, Text } from '@shadcn/components';
+import { H2 } from '@shadcn/components/ui/typography';
+import { Screens, Stacks, fireAuth, fireStore } from '@src/constants';
+import type { AppNavigation } from '@src/types';
+import { Asset } from 'expo-asset';
+import { doc, getDoc } from 'firebase/firestore';
+import type * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+
+export const Welcome: React.FC = () => {
+  const image = Asset.fromModule(require('../../assets/landing.png')).uri;
+  const { navigate } = useNavigation<AppNavigation>();
+  const [hasSeenWelcome, setHasSeenWelcome] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [visited, setVisited] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkUserInFirestore = async () => {
+      try {
+        setLoading(true);
+        const user = fireAuth.currentUser;
+        if (!user) return;
+        const docRef = doc(fireStore, 'users', user.uid);
+        const docSnap = await getDoc(docRef);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkUserInFirestore();
+  }, []);
+
+  const handleContinue = () => {
+    navigate(Stacks.Auth, { screen: Screens.Home });
+  };
+
+  return (
+    <View className='flex-1 flex-col justify-center items-center p-4'>
+      <Image
+        source={{ uri: image }}
+        className='w-[95%] h-auto left-16 aspect-square'
+        resizeMode='contain'
+        key={'landing-image'}
+      />
+      <H2 className='text-center mt-4'>Welcome to COGNIKIDS!</H2>
+      <Button size={'lg'} className='w-full rounded-full mb-2' onPress={handleContinue}>
+        <Text>Continue session</Text>
+      </Button>
+      <Button
+        size={'lg'}
+        className='w-full rounded-full'
+        onPress={() => navigate(Stacks.Auth, { screen: Screens.Home })}
+      >
+        <Text>Home</Text>
+      </Button>
+    </View>
+  );
+};

app/src/screens/index.ts

@@ -10,3 +10,4 @@ export * from './Profile';
 export * from './ResetPassword';
 export * from './SignIn';
 export * from './SignUp';
+export * from './Welcome';