Feat: app onboarding (#129)

* wip

* add badge theme

* add devtools

* fix icons

* minor fixs

* setup screens

* animated onboarding screens

* fix public layout dark mode with new use themed style hook

* fix dark mode

* fix scroll on large screen

* animated mascot

* clean code and fix status bar

Author: HugoPerard

README.md

@@ -78,6 +78,10 @@ pnpm dev:ios      # To run with local ios build
 pnpm dev:android  # To run with local android build
 ```
 
+### Devtools
+
+You can use @dev-plugins pressing `Shift + m` in your Expo terminal.
+
 ## Storybook
 
 Storybook is managed as a specific mode of the app that is launch apart in port 8083

package.json

@@ -24,6 +24,9 @@
   "dependencies": {
     "@bearstudio/ui-state": "1.0.2",
     "@better-auth/expo": "1.3.27",
+    "@dev-plugins/async-storage": "0.4.0",
+    "@dev-plugins/react-navigation": "0.4.0",
+    "@dev-plugins/react-query": "0.4.0",
     "@expo/metro-runtime": "6.1.2",
     "@gorhom/bottom-sheet": "5.2.6",
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -68,7 +71,8 @@
     "react-native-web": "0.21.1",
     "react-native-worklets": "0.5.1",
     "sonner-native": "0.21.1",
-    "zod": "4.1.11"
+    "zod": "4.1.11",
+    "zustand": "5.0.8"
   },
   "devDependencies": {
     "@babel/core": "7.28.4",

pnpm-lock.yaml

@@ -3,9 +3,8 @@ import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';
 import { ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DynamicColorIOS } from 'react-native';
-import { useColorModeValue } from 'react-native-ficus-ui';
 
-import theme from '@/lib/ficus-ui/theme';
+import { useThemedStyle } from '@/hooks/use-themed-style';
 
 import { HapticTab } from '@/components/haptic-tab';
 import {
@@ -58,18 +57,7 @@ const TABS = [
 export default function TabLayout() {
   const { t } = useTranslation(['layout']);
 
-  const themedStyle = useColorModeValue(
-    {
-      backgroundColor: 'white',
-      color: theme.colors.neutral[950],
-      sceneBackgroundColor: theme.colors.neutral[50],
-    },
-    {
-      backgroundColor: theme.colors.neutral[950],
-      color: 'white',
-      sceneBackgroundColor: theme.colors.neutral[900],
-    }
-  );
+  const themedStyle = useThemedStyle();
 
   if (WITH_NATIVE_TABS) {
     return (

src/app/(logged)/(tabs)/_layout.tsx

@@ -1,12 +1,11 @@
 import { Stack, useRouter } from 'expo-router';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useColorModeValue } from 'react-native-ficus-ui';
 
-import theme from '@/lib/ficus-ui/theme';
+import { useThemedStyle } from '@/hooks/use-themed-style';
 
 import { authClient } from '@/features/auth/client';
-import { ViewOnboarding } from '@/features/auth/view-onboarding';
+import { ViewAuthOnboarding } from '@/features/auth/view-auth-onboarding';
 
 export default function LoggedLayout() {
   const router = useRouter();
@@ -19,21 +18,10 @@ export default function LoggedLayout() {
     }
   }, [router, session.data?.user, session.isPending]);
 
-  const themedStyle = useColorModeValue(
-    {
-      backgroundColor: 'white',
-      color: theme.colors.neutral[950],
-      sceneBackgroundColor: theme.colors.neutral[50],
-    },
-    {
-      backgroundColor: theme.colors.neutral[950],
-      color: 'white',
-      sceneBackgroundColor: theme.colors.neutral[900],
-    }
-  );
+  const themedStyle = useThemedStyle();
 
   if (!session.data?.user?.name) {
-    return <ViewOnboarding />;
+    return <ViewAuthOnboarding />;
   }
 
   return (

src/app/(logged)/_layout.tsx

@@ -1,12 +1,16 @@
 import { Stack, useRouter } from 'expo-router';
 import { useEffect } from 'react';
 
+import { useThemedStyle } from '@/hooks/use-themed-style';
+
 import { authClient } from '@/features/auth/client';
 
 export default function PublicLayout() {
   const router = useRouter();
   const session = authClient.useSession();
 
+  const themedStyle = useThemedStyle();
+
   useEffect(() => {
     if (!session.isPending && session.data?.user) {
       router.replace('/(logged)/(tabs)/home');
@@ -18,6 +22,10 @@ export default function PublicLayout() {
       initialRouteName="sign-in"
       screenOptions={{
         headerShown: false,
+        headerTitleAlign: 'left',
+        headerStyle: { backgroundColor: themedStyle.backgroundColor },
+        headerTintColor: themedStyle.color,
+        contentStyle: { backgroundColor: themedStyle.sceneBackgroundColor },
       }}
     >
       <Stack.Protected guard={!session.data?.user?.id}>

src/app/(public)/_layout.tsx

@@ -1,5 +1,5 @@
 import { ViewSignIn } from '@/features/auth/view-sign-in';
 
-export default function () {
+export default function SignIn() {
   return <ViewSignIn />;
 }

src/app/(public)/sign-in.tsx

@@ -2,7 +2,7 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Slot } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { Box, FicusProvider } from 'react-native-ficus-ui';
+import { FicusProvider } from 'react-native-ficus-ui';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   initialWindowMetrics,
@@ -16,9 +16,10 @@ import theme from '@/lib/ficus-ui/theme';
 import { ThemeManager } from '@/components/theme-manager';
 import { Sonner } from '@/components/ui/sonner';
 
+import { DevTools } from '@/features/devtools/devtools';
 import { SplashScreenManager } from '@/layout/splash-screen-manager';
 
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 // SplashScreen hide management in on src/app/index.tsx
 SplashScreen.preventAutoHideAsync();
@@ -27,19 +28,18 @@ export default function RootLayout() {
   return (
     <QueryClientProvider client={queryClient}>
       <FicusProvider theme={theme}>
-        <Box flex={1} bg="white" _dark={{ bg: 'neutral.950' }}>
-          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-            <GestureHandlerRootView>
-              <BottomSheetModalProvider>
-                <SplashScreenManager>
-                  <Slot />
-                </SplashScreenManager>
-                <Sonner />
-                <ThemeManager />
-              </BottomSheetModalProvider>
-            </GestureHandlerRootView>
-          </SafeAreaProvider>
-        </Box>
+        <ThemeManager />
+        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+          <GestureHandlerRootView>
+            <BottomSheetModalProvider>
+              <SplashScreenManager>
+                <Slot />
+              </SplashScreenManager>
+              <Sonner />
+              {process.env.NODE_ENV === 'development' && <DevTools />}
+            </BottomSheetModalProvider>
+          </GestureHandlerRootView>
+        </SafeAreaProvider>
       </FicusProvider>
     </QueryClientProvider>
   );

src/app/_layout.tsx

@@ -4,23 +4,30 @@ import { useCallback } from 'react';
 
 import { FullLoader } from '@/components/ui/full-loader';
 
+import { useOnboardingStore } from '@/features/app-onboarding/store';
+import { ViewOnboarding } from '@/features/app-onboarding/view-app-onboarding';
 import { authClient } from '@/features/auth/client';
 
 export default function Index() {
   const session = authClient.useSession();
+  const isOnboarded = useOnboardingStore((state) => state.done);
 
   // Manage first app redirection
   useFocusEffect(
     useCallback(() => {
-      if (session.isPending) {
+      if (!isOnboarded || session.isPending) {
         return;
       }
       router.replace(
         session.data?.user?.id ? '/(logged)/(tabs)/home' : '/(public)/sign-in'
       );
-    }, [session.data, session.isPending])
+    }, [session.data, session.isPending, isOnboarded])
   );
 
+  if (!isOnboarded) {
+    return <ViewOnboarding />;
+  }
+
   if (Constants.expoConfig?.extra?.isStorybook) {
     return <Redirect href="/storybook" />;
   }

src/app/index.tsx

@@ -6,7 +6,7 @@ export const Icon = ({
   size,
   ...props
 }: StyleProps & {
-  icon: LucideIcon;
+  icon: LucideIcon | ReturnType<typeof ficus>;
   color?: string;
   size?: number;
 }) => {