Merge pull request #13 from monarcode/monarch/onboarding-and-color-pi…

…cker-fixes ✨ ft(app): added onboarding screens & functionality + fixes for color picker
monarcode · Aug 9, 2024 · 7d0a004 · 7d0a004
2 parents 81b6b96 + 4f00fff
commit 7d0a004
Show file tree

Hide file tree

Showing 11 changed files with 446 additions and 51 deletions.
diff --git a/.expo/types/router.d.ts b/.expo/types/router.d.ts
@@ -6,7 +6,7 @@ export * from 'expo-router';
 declare module 'expo-router' {
   export namespace ExpoRouter {
     export interface __routes<T extends string = string> extends Record<string, unknown> {
-      StaticRoutes: `` | `/` | `/(tabs)` | `/_sitemap` | `/modal` | `/saved`;
+      StaticRoutes: `` | `/` | `/(tabs)` | `/_sitemap` | `/modal` | `/onboarding` | `/saved`;
       DynamicRoutes: never;
       DynamicRouteTemplate: never;
     }

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
@@ -1,3 +1,4 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { Tabs } from 'expo-router';
 
@@ -9,12 +10,14 @@ const CustomBottomTabs = (props: BottomTabBarProps) => {
 
 export default function TabLayout() {
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: 'black',
-        headerShown: false,
-      }}
-      tabBar={CustomBottomTabs}
-    />
+    <BottomSheetModalProvider>
+      <Tabs
+        screenOptions={{
+          tabBarActiveTintColor: 'black',
+          headerShown: false,
+        }}
+        tabBar={CustomBottomTabs}
+      />
+    </BottomSheetModalProvider>
   );
 }
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -1,12 +1,11 @@
-import { BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
-import { useState, useRef, useMemo } from 'react';
+import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
+import { useMemo, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { SketchCanvas } from '~/components/SketchCanvas';
 import ClearSketchModal from '~/components/modals/ClearSketchModal';
 import SaveSketchModal from '~/components/modals/SaveSketchModal';
-import { Text } from '~/components/shared';
 import BottomSheetContent from '~/modules/bottom-sheet/Bottom-sheet-content';
 import CustomBackdrop from '~/modules/bottom-sheet/custom-backdrop';
 import ColorPicker from '~/modules/canvas/color-picker';
@@ -34,7 +33,7 @@ export default function Home() {
   };
 
   const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const snapPoints = useMemo(() => ['50%'], []);
+  const snapPoints = useMemo(() => ['55%'], []);
 
   const handleOpenPalette = () => {
     bottomSheetRef.current?.present();
@@ -60,31 +59,29 @@ export default function Home() {
         <ClearSketchModal isOpen={isEraseModalOpen} onOpenChange={handleEraseModalOpenChange} />
 
         {/* Color Palette Bottom Sheet */}
-        <BottomSheetModalProvider>
-          <BottomSheetModal
-            ref={bottomSheetRef}
-            index={0}
-            snapPoints={snapPoints}
-            handleStyle={{
-              backgroundColor: theme.colors.light,
-              paddingTop: 16,
-              borderTopLeftRadius: 40,
-              borderTopRightRadius: 40,
-            }}
-            backdropComponent={({ animatedIndex, style, animatedPosition }) => (
-              <CustomBackdrop
-                style={style}
-                animatedIndex={animatedIndex}
-                animatedPosition={animatedPosition}
-                close={SaveSelectedColor}
-              />
-            )}
-            enablePanDownToClose>
-            <BottomSheetView style={styles.sheetContentContainer}>
-              <BottomSheetContent onPress={SaveSelectedColor} />
-            </BottomSheetView>
-          </BottomSheetModal>
-        </BottomSheetModalProvider>
+        <BottomSheetModal
+          ref={bottomSheetRef}
+          index={0}
+          snapPoints={snapPoints}
+          handleStyle={{
+            backgroundColor: '#fff',
+            paddingTop: 16,
+            borderTopLeftRadius: 40,
+            borderTopRightRadius: 40,
+          }}
+          backdropComponent={({ animatedIndex, style, animatedPosition }) => (
+            <CustomBackdrop
+              style={style}
+              animatedIndex={animatedIndex}
+              animatedPosition={animatedPosition}
+              close={SaveSelectedColor}
+            />
+          )}
+          enablePanDownToClose>
+          <BottomSheetView style={styles.sheetContentContainer}>
+            <BottomSheetContent onPress={SaveSelectedColor} />
+          </BottomSheetView>
+        </BottomSheetModal>
       </SafeAreaView>
     </>
   );
@@ -102,9 +99,9 @@ const styles = StyleSheet.create({
 
   sheetContentContainer: {
     flex: 1,
-    backgroundColor: theme.colors.light,
+    backgroundColor: '#fff',
     paddingHorizontal: 16,
-    paddingBottom: 14,
+    paddingBottom: 30,
     paddingTop: 8,
   },
 });
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -6,11 +6,13 @@ import {
   useFonts,
 } from '@expo-google-fonts/quicksand';
 import { PortalHost } from '@rn-primitives/portal';
-import { Stack } from 'expo-router';
+import { router, Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
+import useOnboardingStore from '~/store/onboarding-store';
+
 SplashScreen.preventAutoHideAsync();
 
 export const unstable_settings = {
@@ -36,10 +38,23 @@ export default function RootLayout() {
     return null;
   }
 
+  return <Root />;
+}
+
+function Root() {
+  const onboardingStore = useOnboardingStore();
+
+  useEffect(() => {
+    if (!onboardingStore.isOnboardingCompleted) {
+      router.replace('/onboarding');
+    }
+  }, [onboardingStore.isOnboardingCompleted]);
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
       </Stack>
       <PortalHost />