@imksh/create 1.0.31 → 1.0.33

package/templates/presets/production-fullstack/overrides/mobile/package.json

@@ -1,59 +1,62 @@
 {
-  "name": "mobile",
+  "name": "Mobile",
   "main": "expo-router/entry",
   "version": "1.0.0",
   "dependencies": {
-    "@expo/ui": "~57.0.7",
+    "@expo/ui": "~57.0.22",
     "@expo/vector-icons": "^15.1.1",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/slider": "^5.2.0",
+    "@react-native-google-signin/google-signin": "^13.1.0",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/bottom-tabs": "^7.18.10",
-    "@tanstack/react-query": "^5.101.4",
     "axios": "^1.18.1",
     "babel-preset-expo": "^57.0.3",
-    "dayjs": "^1.11.21",
+    "dayjs": "^1.11.13",
     "drizzle-orm": "^0.45.2",
-    "expo": "~57.0.7",
-    "expo-blur": "~57.0.2",
+    "expo": "~57.0.27",
+    "expo-blur": "~57.0.3",
     "expo-constants": "~57.0.6",
-    "expo-device": "~57.0.1",
+    "expo-device": "~57.0.2",
+    "expo-file-system": "~57.0.7",
     "expo-font": "~57.0.1",
-    "expo-glass-effect": "~57.0.1",
-    "expo-image": "~57.0.1",
-    "expo-image-picker": "~57.0.7",
-    "expo-linear-gradient": "^57.0.1",
-    "expo-linking": "~57.0.3",
-    "expo-location": "~57.0.7",
-    "expo-notifications": "~57.0.6",
-    "expo-router": "~57.0.7",
-    "expo-splash-screen": "~57.0.4",
-    "expo-sqlite": "^57.0.1",
+    "expo-glass-effect": "~57.0.4",
+    "expo-image": "~57.0.5",
+    "expo-image-picker": "~57.0.20",
+    "expo-linear-gradient": "~57.0.2",
+    "expo-linking": "~57.0.12",
+    "expo-local-authentication": "~57.0.3",
+    "expo-location": "~57.0.20",
+    "expo-notifications": "~57.0.22",
+    "expo-router": "~57.0.25",
+    "expo-sharing": "~57.0.22",
+    "expo-splash-screen": "~57.0.9",
+    "expo-sqlite": "~57.0.4",
     "expo-status-bar": "~57.0.1",
-    "expo-symbols": "~57.0.1",
-    "expo-system-ui": "~57.0.1",
-    "expo-web-browser": "~57.0.1",
-    "lottie-react": "^2.4.1",
+    "expo-symbols": "~57.0.3",
+    "expo-system-ui": "~57.0.4",
+    "expo-web-browser": "~57.0.3",
     "lottie-react-native": "^7.3.8",
     "nativewind": "^4.2.6",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.86.0",
+    "react-native": "0.86.3",
+    "react-native-blob-util": "^0.19.11",
     "react-native-gesture-handler": "~2.32.0",
     "react-native-image-viewing": "^0.2.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-maps": "1.27.2",
     "react-native-otp-entry": "^1.8.6",
     "react-native-paper": "^5.15.3",
+    "react-native-pdf": "^7.0.5",
     "react-native-permissions": "^5.6.0",
-    "react-native-reanimated": "^4.5.2",
-    "react-native-safe-area-context": "^5.8.0",
-    "react-native-screens": "4.25.2",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
     "react-native-toast-message": "^2.4.0",
     "react-native-web": "~0.21.0",
     "react-native-webview": "13.16.1",
-    "react-native-worklets": "0.10.0",
+    "react-native-worklets": "0.10.1",
     "socket.io-client": "^4.8.3",
     "tailwindcss": "^3.4.19",
     "zustand": "^5.0.14"
@@ -61,9 +64,12 @@
   "devDependencies": {
     "@types/react": "~19.2.2",
     "babel-plugin-inline-import": "^3.0.0",
+    "dpdm": "^3.14.0",
     "drizzle-kit": "^0.31.10",
     "eslint": "^9.0.0",
-    "eslint-config-expo": "~57.0.0",
+    "eslint-config-expo": "~57.0.2",
+    "prettier": "^3.4.2",
+    "ts-prune": "^0.10.3",
     "typescript": "~6.0.3"
   },
   "scripts": {
@@ -74,7 +80,11 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "lint": "expo lint",
-    "format": "expo lint --fix",
+    "lint:fix": "expo lint --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json}\"",
+    "circular-check": "dpdm --circular --no-warning --no-tree --exit-code circular:1 \"src/**/*.{ts,tsx}\"",
+    "prune:unused": "ts-prune",
     "ts:check": "tsc --noEmit",
     "build": "eas build",
     "build:android": "eas build -p android",

package/templates/presets/production-fullstack/overrides/mobile/src/app/_layout.tsx

@@ -63,8 +63,8 @@ export default function RootLayout() {
     if (!user && !inAuthGroup) {
       // Redirect to the auth group
       router.replace("/(auth)/login");
-    } else if (user && inAuthGroup) {
-      // Redirect away from auth
+    } else if (user && (inAuthGroup || !segments[0])) {
+      // Redirect away from auth or root to main app tabs
       router.replace("/(tabs)");
     }
   }, [user, isCheckingAuth, segments]);
@@ -94,8 +94,8 @@ export default function RootLayout() {
               options={{ headerShown: false, animation: "fade" }}
             />
           </Stack>
-          <Toast />
         </PaperProvider>
+        <Toast />
       </GestureHandlerRootView>
     </QueryClientProvider>
   );

package/templates/presets/production-fullstack/overrides/mobile/src/components/ui/Drawer.tsx

@@ -0,0 +1,344 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  BackHandler,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Portal } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+export type DrawerPosition = "top" | "bottom" | "left" | "right";
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  position?: DrawerPosition;
+  sizePercent?: number; // e.g. 0.5 for 50% of the screen height (top/bottom) or width (left/right)
+  heightPercent?: number; // backwards compatibility alias for top/bottom
+  widthPercent?: number; // backwards compatibility alias for left/right
+  showHandle?: boolean;
+  zIndex?: number;
+}
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  children,
+  position = "bottom",
+  sizePercent,
+  heightPercent,
+  widthPercent,
+  showHandle = true,
+  zIndex = 50,
+}: DrawerProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  const isVertical = position === "top" || position === "bottom";
+  const defaultPercent = isVertical ? 0.5 : 0.75;
+  const resolvedPercent =
+    sizePercent ??
+    (isVertical ? heightPercent : widthPercent) ??
+    defaultPercent;
+
+  const DRAWER_SIZE = isVertical
+    ? SCREEN_HEIGHT * resolvedPercent
+    : SCREEN_WIDTH * resolvedPercent;
+
+  const getClosedOffset = () => {
+    switch (position) {
+      case "top":
+      case "left":
+        return -DRAWER_SIZE;
+      case "bottom":
+      case "right":
+        return DRAWER_SIZE;
+    }
+  };
+
+  const translate = useSharedValue(getClosedOffset());
+  const backdropOpacity = useSharedValue(0);
+  const [isRendered, setIsRendered] = useState(false);
+
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+
+  useEffect(() => {
+    const closedOffset = getClosedOffset();
+    if (isOpen) {
+      translate.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0.4, { duration: 300 });
+    } else {
+      translate.value = withTiming(closedOffset, {
+        duration: 300,
+        easing: Easing.in(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+        if (finished) {
+          runOnJS(setIsRendered)(false);
+        }
+      });
+    }
+  }, [isOpen, DRAWER_SIZE, position]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const backAction = () => {
+      onClose();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [isOpen, onClose]);
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (position === "bottom") {
+        if (event.translationY > 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "top") {
+        if (event.translationY < 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "left") {
+        if (event.translationX < 0) {
+          translate.value = event.translationX;
+        }
+      } else if (position === "right") {
+        if (event.translationX > 0) {
+          translate.value = event.translationX;
+        }
+      }
+    })
+    .onEnd((event) => {
+      let shouldClose = false;
+      if (position === "bottom") {
+        shouldClose =
+          event.translationY > DRAWER_SIZE * 0.3 || event.velocityY > 500;
+      } else if (position === "top") {
+        shouldClose =
+          event.translationY < -DRAWER_SIZE * 0.3 || event.velocityY < -500;
+      } else if (position === "left") {
+        shouldClose =
+          event.translationX < -DRAWER_SIZE * 0.3 || event.velocityX < -500;
+      } else if (position === "right") {
+        shouldClose =
+          event.translationX > DRAWER_SIZE * 0.3 || event.velocityX > 500;
+      }
+
+      if (shouldClose) {
+        runOnJS(onClose)();
+      } else {
+        translate.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease),
+        });
+      }
+    });
+
+  const drawerAnimatedStyle = useAnimatedStyle(() => {
+    if (position === "left" || position === "right") {
+      return {
+        transform: [{ translateX: translate.value }],
+      };
+    }
+    return {
+      transform: [{ translateY: translate.value }],
+    };
+  });
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const getContainerStyle = (): ViewStyle => {
+    const baseShadow: ViewStyle = {
+      backgroundColor: colors.base100,
+      elevation: 24,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 15,
+    };
+
+    switch (position) {
+      case "top":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderBottomLeftRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 0, height: 5 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+        };
+      case "bottom":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderTopRightRadius: 30,
+          shadowOffset: { width: 0, height: -5 },
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+        };
+      case "left":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: DRAWER_SIZE,
+          borderTopRightRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingLeft: insets.left > 0 ? insets.left : 0,
+        };
+      case "right":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderBottomLeftRadius: 30,
+          shadowOffset: { width: -5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingRight: insets.right > 0 ? insets.right : 0,
+        };
+    }
+  };
+
+  if (!isRendered && !isOpen) return null;
+
+  return (
+    <Portal>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={[StyleSheet.absoluteFill, { zIndex }]}>
+          {/* Backdrop Overlay */}
+          <TouchableWithoutFeedback onPress={onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: "#000" },
+                backdropAnimatedStyle,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+
+          {/* Sliding Drawer Panel */}
+          <Animated.View style={[getContainerStyle(), drawerAnimatedStyle]}>
+            {position === "bottom" && (
+              <View className="flex-1">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-t-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+
+            {position === "top" && (
+              <View className="flex-1">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-b-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "left" && (
+              <View className="flex-1 flex-row">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-r-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "right" && (
+              <View className="flex-1 flex-row">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-l-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </Portal>
+  );
+}

package/templates/presets/production-fullstack/overrides/mobile/src/components/ui/inputs/DatePicker.tsx

@@ -4,7 +4,7 @@ import { Txt } from "../../common/Typography";
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
-import BottomModal from "../BottomModal";
+import Drawer from "../Drawer";
 import Button from "../buttons/Button";
 import dayjs from "dayjs";
 
@@ -104,7 +104,7 @@ export default function DatePicker({
         <Ionicons name="calendar-outline" size={18} color={colors.primary} />
       </TouchableOpacity>
 
-      <BottomModal isOpen={isOpen} onClose={() => setIsOpen(false)} heightPercent={0.65}>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} position="bottom" sizePercent={0.65}>
         <View className="p-4 flex-1">
           <Txt variant="lg" className="font-bold text-center mb-4">
             {label}
@@ -180,7 +180,7 @@ export default function DatePicker({
             <Button label="Close" variant="outline" onPress={() => setIsOpen(false)} className="w-full" />
           </View>
         </View>
-      </BottomModal>
+      </Drawer>
     </View>
   );
 }

package/templates/presets/production-fullstack/overrides/mobile/src/components/ui/inputs/ImagePickerModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import { Txt } from "@/components/common/Typography";
-import BottomModal from "@/components/ui/BottomModal";
+import Drawer from "@/components/ui/Drawer";
 import Button from "@/components/ui/buttons/Button";
 
 export type ImagePickerSource = "camera" | "gallery" | "both";
@@ -93,7 +93,7 @@ export default function ImagePickerModal({
   };
 
   return (
-    <BottomModal isOpen={isOpen} onClose={onClose}>
+    <Drawer isOpen={isOpen} onClose={onClose} position="bottom">
       <View className="p-6">
         <Txt variant="lg" className="font-bold mb-1 text-center">
           {title}
@@ -124,6 +124,6 @@ export default function ImagePickerModal({
           )}
         </View>
       </View>
-    </BottomModal>
+    </Drawer>
   );
 }