Add onboarding screen and update navigation flow for first-time users

Author: codeAbinash

App.tsx

@@ -55,6 +55,7 @@ import { Dimensions, SafeAreaView, useColorScheme } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import './global.css'
+import Onboarding from '@screens/Onboarding'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -156,6 +157,7 @@ export type RootStackParamList = {
   FCFS: undefined
   SJF: undefined
   Chart: ChartParamList
+  Onboarding: undefined
 }
 
 const Stack = createStackNavigator<RootStackParamList>()
@@ -252,6 +254,7 @@ function Navigation() {
         <Stack.Screen name='FCFS' component={FCFS} options={GestureEnabled} />
         <Stack.Screen name='SJF' component={SJF} options={GestureEnabled} />
         <Stack.Screen name='Chart' component={Chart} options={IOS_BOTTOM_STYLE} />
+        <Stack.Screen name='Onboarding' component={Onboarding} options={NO_ANIMATION}/>
       </Stack.Navigator>
     </>
   )

src/screens/Onboarding.tsx

@@ -0,0 +1,37 @@
+import Animations from '@assets/animations/animations'
+import Btn from '@components/Button'
+import { Lottie } from '@components/Lottie'
+import { PaddingBottom, PaddingTop } from '@components/SafePadding'
+import { W } from '@utils/dimensions'
+import { Bold, F, SemiBold } from '@utils/fonts'
+import S from '@utils/storage'
+import { NavProp } from '@utils/types'
+import { View } from 'react-native'
+
+export default function Onboarding({ navigation }: NavProp) {
+  function handlePress() {
+    S.set('isOpenedApp', 'true')
+    navigation.reset({ index: 0, routes: [{ name: 'Login' }] })
+  }
+  return (
+    <View className='gap-5-center flex-1 items-center justify-between'>
+      <PaddingTop />
+      <View className='flex-1 items-center justify-between px-8'>
+        <View />
+        <View>
+          <Lottie source={Animations.welcome} style={{ width: W * 0.65, height: W * 0.65, marginTop: -50 }} />
+          <View className='px-4'>
+            <Bold className='text mt-16 text-center text-4xl'>Welcome to Tech Triangle</Bold>
+            <SemiBold className='text mt-8 text-center opacity-80' style={F.F12}>
+              Organize your life and work with our tools. Get started now! Click the button below to start using our
+              tools.
+            </SemiBold>
+          </View>
+        </View>
+        <Btn title='Get Started' onPress={handlePress} />
+      </View>
+      <View className='h-5'></View>
+      <PaddingBottom />
+    </View>
+  )
+}

src/screens/auth/Login.tsx

@@ -65,7 +65,7 @@ export default function Login({ navigation }: NavProp) {
     },
     onError: (error) => {
       console.log(error)
-      alert('Error', 'An error occurred')
+      alert('Error', error.message || 'An unexpected error occurred')
     },
   })
 
@@ -83,7 +83,7 @@ export default function Login({ navigation }: NavProp) {
       <View className='pb-5'>
         <PaddingTop />
         <View className='px-5 py-5 pb-8'>
-          <Bold className='pb-3 text-3xl text-black dark:text-white'>Welcome to Tech Triangle</Bold>
+          <Bold className='pb-3 text-3xl text-black dark:text-white'>Login to Tech Triangle</Bold>
           <Lottie source={Animations['welcome']} style={{ width: W * 0.6, height: W * 0.6 }} />
         </View>
         <Gap12>
@@ -95,6 +95,8 @@ export default function Login({ navigation }: NavProp) {
               value={username}
               onChangeText={setUsername}
             />
+          </SettGroup>
+          <SettGroup title='Enter your password'>
             <Input
               value={password}
               autoComplete='password'
@@ -106,13 +108,8 @@ export default function Login({ navigation }: NavProp) {
             />
           </SettGroup>
           <SettText>
-            Enter your email or username to login to your account. If you don't have an account, you can create one by
-            clicking the button below.
-          </SettText>
-
-          <SettText>
-            Enter your password to login to your account. If you forgot your password, you can reset it by clicking the
-            button below.
+            Enter your email or username to login to your account. If you don't have an account, you can create one. Or
+            if you forgot your password, you can reset it.
           </SettText>
         </Gap12>
 

src/screens/splash/Splash.tsx

@@ -1,8 +1,9 @@
 import authStore from '@/zustand/authStore'
 import { navigationStore } from '@/zustand/navigationStore'
+import S from '@utils/storage'
 import type { NavProp } from '@utils/types'
 import { useEffect } from 'react'
-import { Text, View } from 'react-native'
+import { View } from 'react-native'
 
 export default function Splash({ navigation }: NavProp) {
   const { token } = authStore()
@@ -13,13 +14,14 @@ export default function Splash({ navigation }: NavProp) {
   }, [navigation, setNavigation])
 
   useEffect(() => {
+    const isOpenedApp = S.getBoolean('isOpenedApp')
+    if (!isOpenedApp) {
+      navigation.replace('Onboarding')
+      return
+    }
     if (!token) navigation.replace('Login')
     else navigation.replace('Home')
   }, [navigation, token])
 
-  return (
-    <View className='flex-1 items-center justify-center'>
-      <Text className='text-center'>Splash</Text>
-    </View>
-  )
+  return <View className='flex-1 items-center justify-center'></View>
 }

src/utils/fonts.tsx

@@ -79,6 +79,7 @@ export const F = StyleSheet.create({
   },
   F12: {
     fontSize: 12,
+    lineHeight: 18,
   },
   F12_5: {
     fontSize: 12.5,

src/utils/storage.ts

@@ -146,7 +146,7 @@ type CoordinateNotesStorage = Store<typeof CoordinateNotesStorage>
 type UserProfileStorage = Store<typeof UserProfileStorage>
 type AppLockStorage = Store<typeof AppLockStorage>
 type UserStorage = Store<typeof UserStorage>
-type misc = 'misc'
+type misc = 'misc' | 'isOpenedApp'
 export type StorageKeys =
   | WeatherStorage
   | DeveloperStorage
@@ -178,6 +178,10 @@ function getParsed<T>(key: StorageKeys) {
   return JSON.parse(ls.getString(key) || 'null') as T
 }
 
+function getBoolean(key: StorageKeys) {
+  return ls.getBoolean(key)
+}
+
 function set(key: StorageKeys, value: string) {
   ls.set(key, value)
 }
@@ -190,6 +194,7 @@ const S = {
   getParsed,
   getMemoParsed: useMemoParsed,
   get,
+  getBoolean,
   set,
   remove,
   ls,