@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react-native/base/src/app/(auth)/login.tsx

@@ -2,13 +2,17 @@ import React, { useState, useCallback } from "react";
 import { View } from "react-native";
 import { useAuthStore } from "../../store/useAuthStore";
 import { Txt } from "../../components/common/Typography";
-import { Redirect, router, useFocusEffect } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import ScrollContainer from "../../components/ui/layout/ScrollContainer";
 import Input from "../../components/ui/inputs/Input";
 import Button from "../../components/ui/buttons/Button";
 import Tabs from "../../components/ui/navigation/Tabs";
 import Image from "@/components/ui/data-display/Image";
 import logo from "../../../assets/images/logo/logo.png";
+import GoogleAuthButton from "../../components/common/GoogleAuthButton";
+import { ActivityIndicator } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "@/constants/Colors";
 
 export default function LoginScreen() {
   const {
@@ -22,6 +26,9 @@ export default function LoginScreen() {
     clearError,
     demoLogin,
   } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const [isNavigating, setIsNavigating] = useState(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -55,13 +62,13 @@ export default function LoginScreen() {
   };
 
   const handleSubmit = async () => {
-    let ok;
+    let ok = false;
     if (mode === "login") {
       ok = await login(form.email, form.password);
     } else {
       if (!otpSent) {
-        ok = await sendOtp(form.email);
-        if (ok) {
+        const sent = await sendOtp(form.email);
+        if (sent) {
           setOtpSent(true);
           setTimer(60);
         }
@@ -69,10 +76,17 @@ export default function LoginScreen() {
         ok = await signup(form.name, form.email, form.password, form.otp);
       }
     }
+    if (ok && (mode === "login" || otpSent)) {
+      setIsNavigating(true);
+    }
   };
 
-  if (!isCheckingAuth && user) {
-    return <Redirect href="/(tabs)" />;
+  if (isNavigating || (!isCheckingAuth && user)) {
+    return (
+      <View className="flex-1 bg-base-100 items-center justify-center">
+        <ActivityIndicator size="large" color={colors.primary} />
+      </View>
+    );
   }
 
   return (
@@ -204,7 +218,10 @@ export default function LoginScreen() {
             <View className="mt-2">
               <Button
                 label="Demo Login"
-                onPress={() => demoLogin()}
+                onPress={async () => {
+                  await demoLogin();
+                  setIsNavigating(true);
+                }}
                 isLoading={loading}
                 variant="outline"
                 isFullWidth
@@ -212,6 +229,13 @@ export default function LoginScreen() {
             </View>
           )}
 
+          <GoogleAuthButton
+            isLogin={mode === "login"}
+            onSuccess={() => {
+              setIsNavigating(true);
+            }}
+          />
+
           {mode === "signup" && otpSent && (
             <View className="mt-2">
               <Button

package/templates/layers/react-native/base/src/app/(tabs)/_layout.tsx

@@ -1,4 +1,4 @@
-import { Tabs, Redirect } from "expo-router";
+import { Tabs } from "expo-router";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
 import CustomTabBar from "../../components/ui/CustomTabBar";
@@ -10,7 +10,7 @@ const TabLayout = () => {
   const { user, isCheckingAuth } = useAuthStore();
 
   if (!isCheckingAuth && !user) {
-    return <Redirect href="/login" />;
+    return null;
   }
 
   return (
@@ -19,7 +19,7 @@ const TabLayout = () => {
         <CustomTabBar
           {...props}
           showCenterButton={false}
-          onCenterButtonPress={() => console.log("Create button pressed!")}
+          onCenterButtonPress={() => {}}
         />
       )}
       screenOptions={{

package/templates/layers/react-native/base/src/app/(tabs)/index.tsx

@@ -38,7 +38,7 @@ import CircularProgress from "@/components/ui/feedback/CircularProgress";
 import Skeleton from "@/components/ui/feedback/Skeleton";
 import { GestureWrapper } from "@/components/ui/feedback/GestureWrapper";
 
-import BottomModal from "@/components/ui/BottomModal";
+import Drawer from "@/components/ui/Drawer";
 import Tabs from "@/components/ui/navigation/Tabs";
 import { useColorScheme } from "nativewind";
 import { Colors } from "@/constants/Colors";
@@ -424,11 +424,12 @@ const Index = () => {
         <FloatingActionButton icon="add" onPress={() => setIsModalOpen(true)} />
       </View>
 
-      {/* Interactive Bottom Modal */}
-      <BottomModal
+      {/* Interactive Drawer */}
+      <Drawer
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        heightPercent={0.45}
+        position="bottom"
+        sizePercent={0.45}
       >
         <VStack spacing={20} className="px-4 py-2">
           <View className="h-16 w-16 bg-primary/10 rounded-full items-center justify-center self-center mb-2">
@@ -456,7 +457,7 @@ const Index = () => {
             onPress={() => setIsModalOpen(false)}
           />
         </VStack>
-      </BottomModal>
+      </Drawer>
     </View>
   );
 };

package/templates/layers/react-native/base/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]);
@@ -99,8 +99,8 @@ export default function RootLayout() {
             />
           </Stack>
         </BiometricLock>
-        <Toast />
       </PaperProvider>
+      <Toast />
     </GestureHandlerRootView>
   );
 }

package/templates/layers/react-native/base/src/app/doc-viewer.tsx

@@ -162,9 +162,9 @@ export default function DocViewerScreen() {
               onPageChanged={(page) => {
                 setCurrentPage(page);
               }}
-              onError={(error: any) => {
-
-                if (error?.message?.toLowerCase().includes('password')) {
+              onError={(error: unknown) => {
+                const err = error as { message?: string };
+                if (err?.message?.toLowerCase().includes('password')) {
                   setIsPasswordRequired(true);
                   setErrorMsg('Incorrect password. Please try again.');
                 }

package/templates/layers/react-native/base/src/components/common/ConfirmationToast.tsx

@@ -1,17 +1,33 @@
 import { View, TouchableOpacity } from "react-native";
-import React from "react";
+
 import { Txt } from "./Typography";
 
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
+import { useTranslation } from "react-i18next";
+
+import { Portal } from "react-native-paper";
+
+export interface ConfirmationToastProps {
+  name?: string;
+  message: string;
+  fun: () => void;
+  setShow: (show: boolean) => void;
+  cancleText?: string;
+  confirmText?: string;
+}
 
 export default function ConfirmationToast({
   name,
   message,
   fun,
-  icon,
   setShow,
-}) {
+  cancleText,
+  confirmText,
+}: ConfirmationToastProps) {
+  const { t } = useTranslation();
+  const cText = cancleText ?? t("common.cancel");
+  const confText = confirmText ?? t("common.confirm");
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
 
@@ -21,47 +37,49 @@ export default function ConfirmationToast({
   };
 
   return (
-    <View className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-[90%]">
-      <View
-        className="my-4 pt-8 bg-base-100"
-        style={{
-          borderRadius: 20,
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 4,
-          },
-          shadowOpacity: 0.1,
-          shadowRadius: 8,
-          elevation: 8,
-        }}
-      >
-        <View className="justify-center items-center px-8">
-          <Txt variant="h1">{name}</Txt>
-          <Txt variant="body" className="mt-4" style={{ textAlign: "center" }}>
-            {message}
-          </Txt>
-        </View>
+    <Portal>
+      <View className="absolute inset-0 justify-center items-center bg-black/40 z-50">
         <View
-          className="flex-row mt-8"
-          style={{ borderTopWidth: 1, borderTopColor: colors.base300 }}
+          className="w-[90%] pt-8 bg-base-100"
+          style={{
+            borderRadius: 20,
+            shadowColor: "#000",
+            shadowOffset: {
+              width: 0,
+              height: 4,
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 8,
+            elevation: 8,
+          }}
         >
-          <TouchableOpacity
-            className="w-[50%] justify-center items-center h-20"
-            style={{ borderRightWidth: 1, borderRightColor: colors.base300 }}
-            onPress={() => setShow(false)}
-          >
-            <Txt variant="mid">Cancle</Txt>
-          </TouchableOpacity>
-          <TouchableOpacity
-            className="w-[50%] justify-center items-center"
-            style={{ borderLeftWidth: 1, borderLeftColor: colors.base300 }}
-            onPress={ok}
+          <View className="justify-center items-center px-8">
+            <Txt variant="xl">{name}</Txt>
+            <Txt variant="sm" className="mt-4" style={{ textAlign: "center" }}>
+              {message}
+            </Txt>
+          </View>
+          <View
+            className="flex-row mt-8"
+            style={{ borderTopWidth: 1, borderTopColor: colors.base300 }}
           >
-            <Txt variant="mid">Ok</Txt>
-          </TouchableOpacity>
+            <TouchableOpacity
+              className="w-[50%] justify-center items-center h-20"
+              style={{ borderRightWidth: 1, borderRightColor: colors.base300 }}
+              onPress={() => setShow(false)}
+            >
+              <Txt variant="sm">{cText}</Txt>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className="w-[50%] justify-center items-center"
+              style={{ borderLeftWidth: 1, borderLeftColor: colors.base300 }}
+              onPress={ok}
+            >
+              <Txt variant="sm">{confText}</Txt>
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
-    </View>
+    </Portal>
   );
 }

package/templates/layers/react-native/base/src/components/common/GoogleAuthButton.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from "react";
+import { TouchableOpacity, View, ActivityIndicator } from "react-native";
+import Constants from "expo-constants";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "./Typography";
+import { useAuthStore } from "../../../store/useAuthStore";
+import { toast } from "../../../utils/toast";
+import { Ionicons } from "@expo/vector-icons";
+
+const isExpoGo = Constants.appOwnership === "expo";
+
+interface GoogleSigninType {
+  configure: (options: Record<string, unknown>) => void;
+  hasPlayServices: (options: { showPlayServicesUpdateDialog: boolean }) => Promise<boolean>;
+  signIn: () => Promise<{ data?: { idToken?: string }; idToken?: string }>;
+}
+
+interface StatusCodesType {
+  SIGN_IN_CANCELLED: string;
+  IN_PROGRESS: string;
+  PLAY_SERVICES_NOT_AVAILABLE: string;
+}
+
+let GoogleSignin: GoogleSigninType | undefined;
+let statusCodes: StatusCodesType | undefined;
+
+if (!isExpoGo) {
+  try {
+    const googleModule = require("@react-native-google-signin/google-signin");
+    GoogleSignin = googleModule.GoogleSignin;
+    statusCodes = googleModule.statusCodes;
+  } catch {
+    // Module not found or not supported in current environment
+  }
+}
+
+interface GoogleAuthButtonProps {
+  onSuccess?: () => void;
+  label?: string;
+  isLogin?: boolean;
+}
+
+export default function GoogleAuthButton({
+  onSuccess,
+  label,
+  isLogin = true,
+}: GoogleAuthButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const { googleLogin } = useAuthStore();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isExpoGo && GoogleSignin) {
+      GoogleSignin.configure({
+        webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID || "",
+        iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID || "",
+      });
+    }
+  }, []);
+
+  const handlePress = async () => {
+    if (isExpoGo) {
+      toast.info(
+        "Expo Go",
+        "Google Sign-In is not supported in Expo Go. Please use a custom dev client."
+      );
+      return;
+    }
+
+    if (!GoogleSignin) {
+      toast.error("Error", "Google Sign-In module is not loaded.");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await GoogleSignin.hasPlayServices();
+
+      // Force account selection every time
+      try {
+        await GoogleSignin.signOut();
+      } catch {
+        // Ignore if already signed out
+      }
+
+      const userInfo = await GoogleSignin.signIn();
+      const idToken = userInfo.data?.idToken;
+
+      if (!idToken) {
+        throw new Error("No ID token returned from Google");
+      }
+
+      const ok = await googleLogin(idToken);
+      if (ok) {
+        const currentUser = useAuthStore.getState().user;
+        toast.success("Success", `Welcome back, ${currentUser?.name || "User"}`);
+        onSuccess?.();
+      } else {
+        toast.error("Error", "Google authentication failed");
+      }
+    } catch (error: unknown) {
+      const err = error as { code?: string; message?: string };
+      if (err.code === statusCodes?.SIGN_IN_CANCELLED) {
+        // user cancelled the login flow
+      } else if (err.code === statusCodes?.IN_PROGRESS) {
+        // operation (e.g. sign in) is in progress already
+      } else if (err.code === statusCodes?.PLAY_SERVICES_NOT_AVAILABLE) {
+        // play services not available or outdated
+        toast.error("Error", "Google Play Services not available");
+      } else {
+        // some other error happened
+        toast.error("Error", err.message || "An unexpected error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={handlePress}
+      disabled={loading}
+      className="w-full flex-row items-center justify-center py-4 rounded-xl mt-4 border"
+      style={{
+        backgroundColor: colors.base100,
+        borderColor: colors.base300,
+      }}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.primary} />
+      ) : (
+        <View className="flex-row items-center justify-center gap-2">
+          <Ionicons name="logo-google" size={20} color={colors.baseContent} />
+          <Txt className="font-semibold text-base text-base-content">
+            {label || (isLogin ? "Continue with Google" : "Sign up with Google")}
+          </Txt>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}

package/templates/layers/react-native/base/src/components/common/LocationLoader.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, ReactElement, useState } from "react";
-import { View, Dimensions, StyleSheet } from "react-native";
+import { View, Dimensions, StyleSheet, DimensionValue } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { Txt } from "./Typography";
 import { useColorScheme } from "nativewind";
@@ -49,21 +49,41 @@ const DARK_MAP = {
 };
 
 // ─── Map Primitives ───
-const Water = ({ top, left, w, h, rx = 8, dark }: any) => (
+interface MapShapeProps {
+  top: number;
+  left: number;
+  w: number;
+  h: number;
+  rx?: number;
+  dark?: boolean;
+}
+
+const Water = ({ top, left, w, h, rx = 8, dark }: MapShapeProps) => (
   <View style={{
     position: "absolute", top, left, width: w, height: h,
     backgroundColor: dark ? DARK_MAP.water : LIGHT_MAP.water,
     borderRadius: rx, opacity: 0.9,
   }} />
 );
-const Park = ({ top, left, w, h, rx = 6, dark }: any) => (
+
+const Park = ({ top, left, w, h, rx = 6, dark }: MapShapeProps) => (
   <View style={{
     position: "absolute", top, left, width: w, height: h,
     backgroundColor: dark ? DARK_MAP.park : LIGHT_MAP.park,
     borderRadius: rx, opacity: dark ? 0.6 : 0.55,
   }} />
 );
-const Block = ({ top, left, w, h, shade = 0, dark }: any) => {
+
+interface BlockProps {
+  top: number;
+  left: number;
+  w: number;
+  h: number;
+  shade?: number;
+  dark?: boolean;
+}
+
+const Block = ({ top, left, w, h, shade = 0, dark }: BlockProps) => {
   const palette = dark ? DARK_MAP.block : LIGHT_MAP.block;
   return (
     <View style={{
@@ -73,7 +93,17 @@ const Block = ({ top, left, w, h, shade = 0, dark }: any) => {
     }} />
   );
 };
-const Road = ({ top, left, w, h, major = false, dark }: any) => (
+
+interface RoadProps {
+  top: number;
+  left: number;
+  w: number;
+  h: number;
+  major?: boolean;
+  dark?: boolean;
+}
+
+const Road = ({ top, left, w, h, major = false, dark }: RoadProps) => (
   <View style={{
     position: "absolute", top, left, width: w, height: h,
     backgroundColor: major ? (dark ? DARK_MAP.road : LIGHT_MAP.road)
@@ -81,7 +111,15 @@ const Road = ({ top, left, w, h, major = false, dark }: any) => (
     opacity: major ? 0.95 : 0.75,
   }} />
 );
-const LaneDash = ({ top, left, vertical = false, dark }: any) => (
+
+interface LaneDashProps {
+  top: number;
+  left: number;
+  vertical?: boolean;
+  dark?: boolean;
+}
+
+const LaneDash = ({ top, left, vertical = false, dark }: LaneDashProps) => (
   <View style={{
     position: "absolute", top, left,
     width: vertical ? 2 : 12, height: vertical ? 12 : 2,
@@ -154,7 +192,16 @@ const MapWorld = ({ dark }: { dark: boolean }) => {
 };
 
 // ─── MOVING TRAFFIC DOT ───
-const TrafficDot = ({ startX, startY, endX, endY, delay, color }: any) => {
+interface TrafficDotProps {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  delay: number;
+  color: string;
+}
+
+const TrafficDot = ({ startX, startY, endX, endY, delay, color }: TrafficDotProps) => {
   const x = useSharedValue(startX);
   const y = useSharedValue(startY);
 
@@ -181,7 +228,15 @@ const TrafficDot = ({ startX, startY, endX, endY, delay, color }: any) => {
 };
 
 // ─── PROPERTY PRICE PIN ───
-const PropertyPin = ({ top, left, delay, price, color }: any) => {
+interface PropertyPinProps {
+  top: number;
+  left: number;
+  delay: number;
+  price: string;
+  color: string;
+}
+
+const PropertyPin = ({ top, left, delay, price, color }: PropertyPinProps) => {
   const scale = useSharedValue(0);
   const opacity = useSharedValue(0);
   const bounce = useSharedValue(0);
@@ -328,7 +383,7 @@ const AltitudeBar = ({ primary }: { primary: string }) => {
   }, []);
 
   const barStyle = useAnimatedStyle(() => ({
-    height: `${prog.value * 100}%` as any,
+    height: `${prog.value * 100}%` as DimensionValue,
     opacity: interpolate(prog.value, [0, 0.1], [0, 1], Extrapolation.CLAMP),
   }));
 

package/templates/layers/react-native/base/src/components/common/Typography.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Text, TextProps } from "react-native";
+import { Text, TextProps, TextStyle } from "react-native";
 export const FontFamily = {
   regular: "InterRegular",
   medium: "InterMedium",
@@ -80,30 +79,65 @@ export const Txt = ({
   const hasColorClass = className.split(" ").some((c) => {
     if (!c.startsWith("text-")) return false;
     const val = c.substring(5).split("/")[0]; // handle potential opacity suffix like text-white/80
-    const isSize = ["xxs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "caption"].includes(val);
-    return !isSize;
+    const nonColors = [
+      "xxs",
+      "xs",
+      "sm",
+      "base",
+      "md",
+      "lg",
+      "xl",
+      "2xl",
+      "3xl",
+      "4xl",
+      "5xl",
+      "6xl",
+      "7xl",
+      "caption",
+      "center",
+      "left",
+      "right",
+      "justify",
+      "start",
+      "end",
+      "wrap",
+      "nowrap",
+      "balance",
+      "pretty",
+      "clip",
+      "ellipsis",
+      "truncate",
+    ];
+    return !nonColors.includes(val);
   });
-  const defaultColorClass = hasColorClass || color
-    ? ""
-    : variant === "xs"
-      ? "text-secondary"
-      : "text-base-content";
-    
-  const customStyles: any = {};
+  const defaultColorClass =
+    hasColorClass || color
+      ? ""
+      : variant === "xs" || variant === "caption"
+        ? "text-secondary"
+        : "text-base-content";
+
+  const customStyles: TextStyle = {};
   if (color) customStyles.color = color;
   if (align) customStyles.textAlign = align;
 
   // Intercept font weight classes from Nativewind or weight prop
   let finalClassName = className;
-  
-  const resolvedWeight = weight || (
-    finalClassName.includes("font-black") || finalClassName.includes("font-extrabold") ? "black" :
-    finalClassName.includes("font-bold") ? "bold" :
-    finalClassName.includes("font-semibold") ? "semibold" :
-    finalClassName.includes("font-medium") ? "medium" : null
-  );
 
-  if (resolvedWeight === "black" || resolvedWeight === "extrabold") {
+  const resolvedWeight =
+    weight ||
+    (finalClassName.includes("font-black") ||
+    finalClassName.includes("font-extrabold")
+      ? "black"
+      : finalClassName.includes("font-bold")
+        ? "bold"
+        : finalClassName.includes("font-semibold")
+          ? "semibold"
+          : finalClassName.includes("font-medium")
+            ? "medium"
+            : null);
+
+  if (resolvedWeight === "black") {
     customStyles.fontFamily = FontFamily.extrabold;
     customStyles.fontWeight = "normal"; // Prevent Android fallback
   } else if (resolvedWeight === "bold") {
@@ -132,6 +166,7 @@ export const Txt = ({
     <Text
       className={`${defaultColorClass} ${finalClassName}`}
       style={[baseStyle, customStyles, style]}
+      textBreakStrategy="simple"
       {...props}
     >
       {children}