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

ch: format files

Author: fredshema

Diff for: .gitignore

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

Diff for: __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');
+  });
+});

Diff for: app.json

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

Diff for: 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>
+  );
+}

Diff for: 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>
+    </>
+  );
+}

Diff for: 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>
   );
 }

Diff for: assets/images/logo-dark.png

@@ -1,11 +1,7 @@
-/**
- * Learn more about Light and Dark modes:
- * https://docs.expo.io/guides/color-schemes/
- */
-
 import { Text as DefaultText, View as DefaultView } from 'react-native';
 
 import Colors from '@/constants/Colors';
+import React from 'react';
 import { useColorScheme } from './useColorScheme';
 
 type ThemeProps = {
@@ -34,12 +30,10 @@ export function Text(props: TextProps) {
   const { style, lightColor, darkColor, ...otherProps } = props;
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
 
-  return <DefaultText style={[{ color }, style]} {...otherProps} />;
+  return <DefaultText className="font-Inter-Bold" style={[{ color }, style]} {...otherProps} />;
 }
 
 export function View(props: ViewProps) {
-  const { style, lightColor, darkColor, ...otherProps } = props;
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
-
-  return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
+  const { lightColor, darkColor, className, ...otherProps } = props;
+  return <DefaultView className={className} {...otherProps} />;
 }

Diff for: assets/images/logo-light.png

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

Diff for: assets/images/onboarding/1.png

@@ -12,7 +12,6 @@
     "test:coverage": "jest --coverage",
     "lint": "eslint .",
     "format": "prettier --write ."
-
   },
   "jest": {
     "preset": "jest-expo",
@@ -53,13 +52,14 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.10",
-
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^18.2.0",
+    "@babel/core": "^7.20.0",
+    "@eslint/js": "^9.9.1",
+    "react-native-pager-view": "6.3.0",
+    "expo-image": "~1.12.15"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@eslint/js": "^9.9.1",
-
     "@testing-library/react-native": "^12.6.1",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
@@ -69,14 +69,13 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.1",
+    "prettier": "^3.3.3",
     "jest": "^29.7.0",
     "jest-expo": "~51.0.3",
     "nyc": "^17.0.0",
-    "prettier": "^3.3.3",
-    "react-test-renderer": "18.2.0",
-
-    "tailwindcss": "^3.4.10",
-    "typescript": "~5.3.3"
+    "tailwindcss": "3.3.2",
+    "typescript": "~5.3.3",
+    "react-test-renderer": "18.2.0"
   },
   "private": true
 }