ft(#1): app onboarding (#26)

ch: format files

Author: fredshema

.gitignore

@@ -26,4 +26,5 @@ yarn-error.log*
 
 expo-env.d.ts
 
-coverage/**/*
+coverage/**/*
+__tests__/_snapshots__/**/*

__tests__/onboarding/Onboarding.test.tsx

@@ -0,0 +1,18 @@
+import AppOnboarding from '@/app/(onboarding)';
+import { render } from '@testing-library/react-native';
+
+import React from 'react';
+
+describe('<AppOnboarding />', () => {
+  test('Text renders correctly on AppOnboarding', () => {
+    const { getByText } = render(<AppOnboarding />);
+
+    getByText("Optimize your organization's potential with Performance Management/Analytics.");
+
+    getByText('Identify top performers, discover hidden talent, and optimize your workforce.');
+
+    getByText('Unlock the potential of a Continuous & Tight Feedback Loop.');
+
+    getByText('Get Started');
+  });
+});

app.json

@@ -27,7 +27,7 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": ["expo-router", "expo-font"],
     "experiments": {
       "typedRoutes": true
     },

app/(onboarding)/_layout.tsx

@@ -0,0 +1,22 @@
+import { View } from '@/components/Themed';
+import { Slot } from 'expo-router';
+import React from 'react';
+import { useColorScheme } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function AppOnboardingLayout({ children }: { children: React.ReactNode }) {
+  const colorScheme = useColorScheme();
+
+  const insets = useSafeAreaInsets();
+
+  const bgColor = () => (colorScheme === 'dark' ? 'bg-[#020917]' : 'bg-[#E0E7FF]');
+
+  return (
+    <View
+      className={`flex-1 ${bgColor()}`}
+      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+    >
+      <Slot />
+    </View>
+  );
+}

app/(onboarding)/index.tsx

@@ -0,0 +1,90 @@
+import { Text, View } from '@/components/Themed';
+import { Image } from 'expo-image';
+import React, { useEffect, useRef, useState } from 'react';
+import { TouchableOpacity, useColorScheme } from 'react-native';
+import PagerView from 'react-native-pager-view';
+
+type Page = {
+  image: any;
+  content: string;
+};
+
+const pages: Page[] = [
+  {
+    image: require('@/assets/images/onboarding/1.png'),
+    content: "Optimize your organization's potential with Performance Management/Analytics.",
+  },
+  {
+    image: require('@/assets/images/onboarding/2.png'),
+    content: 'Identify top performers, discover hidden talent, and optimize your workforce.',
+  },
+  {
+    image: require('@/assets/images/onboarding/3.png'),
+    content: 'Unlock the potential of a Continuous & Tight Feedback Loop.',
+  },
+];
+
+export default function AppOnboarding() {
+  const colorScheme = useColorScheme();
+  const pagerViewRef = useRef<PagerView>(null);
+  const [page, setPage] = useState<number>(0);
+
+  const textColor = colorScheme === 'dark' ? 'bg-gray-100' : 'bg-gray-800';
+  const bgColor = colorScheme === 'dark' ? 'bg-primary-dark' : 'bg-primary-light';
+
+  const getDotColor = (index: number) => (index === page ? 'bg-action-500' : 'bg-white');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPage(page === 2 ? 0 : page + 1);
+    }, 6000);
+
+    return () => clearInterval(interval);
+  }, [page]);
+
+  useEffect(() => {
+    pagerViewRef.current?.setPage(page);
+  }, [page]);
+
+  return (
+    <>
+      <PagerView
+        initialPage={page}
+        style={{ minHeight: 580 }}
+        onPageSelected={(p) => setPage(p.nativeEvent.position)}
+        ref={pagerViewRef}
+      >
+        {pages.map((page, index) => (
+          <View key={index} className={`flex-1 px-8 py-12 ${bgColor}`}>
+            <Image
+              source={page.image}
+              contentFit="contain"
+              className="mb-6 justify-center items-end"
+              style={{ width: '100%', flex: 1 }}
+            />
+            <Text
+              style={{
+                color: textColor,
+                fontSize: 24,
+                textAlign: 'center',
+              }}
+              className="font-Inter-SemiBold leading-9"
+            >
+              {page.content}
+            </Text>
+          </View>
+        ))}
+      </PagerView>
+      <View className={`flex-1 flex-row justify-center items-center gap-3 ${bgColor}`}>
+        <View className={`rounded-full bg-action-500 w-4 h-4 ${getDotColor(0)}`}></View>
+        <View className={`rounded-full w-4 h-4 ${getDotColor(1)}`}></View>
+        <View className={`rounded-full w-4 h-4 ${getDotColor(2)}`}></View>
+      </View>
+      <View className={`flex-1 flex-row justify-center items-center ${bgColor}`}>
+        <TouchableOpacity>
+          <Text className="text-lg font-Inter-Medium">Get Started</Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+}

app/_layout.tsx

@@ -1,31 +1,25 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
-import '@/global.css';
 import { useColorScheme } from '@/components/useColorScheme';
+import '@/global.css';
 import {
   Inter_400Regular,
   Inter_500Medium,
   Inter_600SemiBold,
   Inter_700Bold,
 } from '@expo-google-fonts/inter';
-import React from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import React, { useEffect } from 'react';
+import 'react-native-reanimated';
 
-export {
-  // Catch any errors thrown by the Layout component.
-  ErrorBoundary,
-} from 'expo-router';
+export { ErrorBoundary } from 'expo-router';
 
 export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
+  initialRouteName: '(onboarding)',
 };
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
@@ -37,7 +31,6 @@ export default function RootLayout() {
     ...FontAwesome.font,
   });
 
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
     if (error) throw error;
   }, [error]);
@@ -60,7 +53,9 @@ function RootLayoutNav() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack></Stack>
+      <Stack>
+        <Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
+      </Stack>
     </ThemeProvider>
   );
 }