@imksh/create 1.0.31 → 1.0.32

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}

package/templates/layers/react-native/base/src/components/ui/ClassicTabBar.tsx

@@ -5,8 +5,17 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useColorScheme } from 'nativewind';
 import { Colors } from '../../constants/Colors';
 import { getTabConfig } from '../../config/tabNavigation';
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 
-const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) => {
+interface TabItemProps {
+  isFocused: boolean;
+  onPress: () => void;
+  onLongPress: () => void;
+  iconName: keyof typeof Ionicons.glyphMap;
+  colors: (typeof Colors)[keyof typeof Colors];
+}
+
+const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: TabItemProps) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -18,7 +27,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) =>
     >
       <View style={styles.tabItem}>
         <Ionicons 
-          name={iconName as any} 
+          name={iconName} 
           size={28} 
           color={isFocused ? colors.primary : colors.baseContent + '60'} 
         />
@@ -27,7 +36,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) =>
   );
 };
 
-export default function ClassicTabBar({ state, descriptors, navigation }: any) {
+export default function ClassicTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
   const insets = useSafeAreaInsets();
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? 'light'];
@@ -43,15 +52,9 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
         elevation:1
       }
     ]}>
-      {state.routes.map((route: any, index: number) => {
+      {state.routes.map((route, index: number) => {
         const { options } = descriptors[route.key];
         const tabConfig = getTabConfig(route.name);
-        const label = options.tabBarLabel !== undefined
-          ? options.tabBarLabel
-          : options.title !== undefined
-          ? options.title
-          : tabConfig?.title || route.name;
-
         const isFocused = state.index === index;
 
         const onPress = () => {
@@ -73,8 +76,8 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
           });
         };
 
-        let iconName: any = tabConfig?.baseIcon || "home";
-        iconName = isFocused ? iconName : `${iconName}-outline`;
+        const baseIcon = tabConfig?.baseIcon || "home";
+        const iconName = (isFocused ? baseIcon : `${baseIcon}-outline`) as keyof typeof Ionicons.glyphMap;
 
         return (
           <TabItem

package/templates/layers/react-native/base/src/components/ui/CustomTabBar.tsx

@@ -6,15 +6,23 @@ import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
 import { getTabConfig } from "../../config/tabNavigation";
 import { LinearGradient } from "expo-linear-gradient";
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+
+interface TabItemProps {
+  isFocused: boolean;
+  onPress: () => void;
+  onLongPress: () => void;
+  iconName: keyof typeof Ionicons.glyphMap;
+  colors: (typeof Colors)[keyof typeof Colors];
+}
 
 const TabItem = ({
   isFocused,
   onPress,
   onLongPress,
   iconName,
-  label,
   colors,
-}: any) => {
+}: TabItemProps) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -39,7 +47,7 @@ const TabItem = ({
           ]}
         >
           <Ionicons
-            name={iconName as any}
+            name={iconName}
             size={isFocused ? 20 : 24}
             color={isFocused ? colors.primaryContent : colors.secondary}
           />
@@ -49,25 +57,10 @@ const TabItem = ({
   );
 };
 
-const CenterButton = ({ colors, onPress }: any) => {
-  return (
-    <View style={styles.centerButtonWrapper}>
-      <TouchableOpacity
-        activeOpacity={0.9}
-        onPress={onPress}
-        style={[
-          styles.centerButton,
-          {
-            backgroundColor: colors.primary,
-            shadowColor: colors.primary,
-          },
-        ]}
-      >
-        <Ionicons name="add" size={32} color={colors.primaryContent} />
-      </TouchableOpacity>
-    </View>
-  );
-};
+export interface CustomTabBarProps extends BottomTabBarProps {
+  showCenterButton?: boolean;
+  onCenterButtonPress?: () => void;
+}
 
 export default function CustomTabBar({
   state,
@@ -75,7 +68,7 @@ export default function CustomTabBar({
   navigation,
   showCenterButton = true,
   onCenterButtonPress,
-}: any) {
+}: CustomTabBarProps) {
   const insets = useSafeAreaInsets();
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
@@ -86,7 +79,8 @@ export default function CustomTabBar({
     return null;
   }
 
-  const bottomOffset = insets.bottom > 0 ? insets.bottom : 20;
+  // Since we are using a global SafeAreaView, we don't need to manually add bottom safe area
+  const bottomOffset = insets.bottom > 0 ? 5 : 20; // Just a small spacing above the global safe area
   const totalTabBarHeight = bottomOffset + 70; // 70 is the height of the tab bar container
 
   return (
@@ -113,63 +107,80 @@ export default function CustomTabBar({
           },
         ]}
       >
-        {state.routes.map((route: any, index: number) => {
-          const { options } = descriptors[route.key];
-          if (
-            options.href === null ||
-            options.tabBarItemStyle?.display === "none"
-          )
-            return null;
-
-          const tabConfig = getTabConfig(route.name);
-          const label =
-            options.tabBarLabel !== undefined
-              ? options.tabBarLabel
-              : options.title !== undefined
-                ? options.title
-                : tabConfig?.title || route.name;
-
-          const isFocused = state.index === index;
-
-          const onPress = () => {
-            const event = navigation.emit({
-              type: "tabPress",
-              target: route.key,
-              canPreventDefault: true,
-            });
-
-            if (!isFocused && !event.defaultPrevented) {
-              navigation.navigate(route.name, route.params);
+        {(() => {
+          const children: React.ReactNode[] = [];
+
+          state.routes.forEach((route, index: number) => {
+            const { options } = descriptors[route.key];
+            if (
+              options.href === null ||
+              options.tabBarItemStyle?.display === "none"
+            ) {
+              return;
+            }
+
+            const tabConfig = getTabConfig(route.name);
+            const label =
+              options.tabBarLabel !== undefined
+                ? options.tabBarLabel
+                : options.title !== undefined
+                  ? options.title
+                  : tabConfig?.title || route.name;
+
+            const isFocused = state.index === index;
+
+            const onPress = () => {
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
+
+              if (!isFocused && !event.defaultPrevented) {
+                navigation.navigate(route.name, route.params);
+              }
+            };
+
+            const onLongPress = () => {
+              navigation.emit({
+                type: "tabLongPress",
+                target: route.key,
+              });
+            };
+
+            const baseIcon = tabConfig?.baseIcon || "home";
+            const iconName = (isFocused ? baseIcon : `${baseIcon}-outline`) as keyof typeof Ionicons.glyphMap;
+
+            if (
+              showCenterButton &&
+              index === Math.floor(state.routes.length / 2)
+            ) {
+              children.push(
+                <TabItem
+                  key="center-btn"
+                  isFocused={false}
+                  onPress={onCenterButtonPress}
+                  iconName="add"
+                  colors={colors}
+                />,
+              );
             }
-          };
-
-          const onLongPress = () => {
-            navigation.emit({
-              type: "tabLongPress",
-              target: route.key,
-            });
-          };
-
-          let iconName: any = tabConfig?.baseIcon || "home";
-          iconName = isFocused ? iconName : `${iconName}-outline`;
-
-          return (
-            <React.Fragment key={route.key}>
-              {showCenterButton &&
-                index === Math.floor(state.routes.length / 2) && (
-                  <CenterButton colors={colors} onPress={onCenterButtonPress} />
-                )}
+
+            children.push(
               <TabItem
+                key={route.key}
                 isFocused={isFocused}
                 onPress={onPress}
                 onLongPress={onLongPress}
                 iconName={iconName}
                 label={label as string}
                 colors={colors}
-              />
-            </React.Fragment>
-          );
-        })}
+              />,
+            );
+          });
+
+          return children;
+        })()}
       </View>
     </View>
   );
@@ -218,21 +229,4 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: -6,
   },
-  centerButtonWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  centerButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: -40,
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.4,
-    shadowRadius: 15,
-    elevation: 15,
-  },
 });