@imksh/create 1.0.31 → 1.0.33

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/BiometricLock.tsx

@@ -5,8 +5,8 @@ import { authenticateAsync } from "@/services/biometric.service";
 import { Ionicons } from "@expo/vector-icons";
 import { Colors } from "@/constants/Colors";
 import { useColorScheme } from "nativewind";
-import { Txt } from "./common/Typography";
-import Button from "./ui/buttons/Button";
+import { Txt } from "../common/Typography";
+import Button from "../ui/buttons/Button";
 import appConfig from "@/config/appConfig";
 
 export default function BiometricLock({ children }: { children: React.ReactNode }) {
@@ -60,7 +60,7 @@ export default function BiometricLock({ children }: { children: React.ReactNode
     if (isAuthenticating) return;
     setIsAuthenticating(true);
     
-    const success = await authenticateAsync("Unlock HireMe");
+    const success = await authenticateAsync(`Unlock ${appConfig.app.name}`);
     
     if (success) {
       setIsAppLocked(false);

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,24 @@ import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
 import { getTabConfig } from "../../config/tabNavigation";
 import { LinearGradient } from "expo-linear-gradient";
+import { Tabs } from "expo-router";
+
+interface TabItemProps {
+  isFocused: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  iconName: keyof typeof Ionicons.glyphMap;
+  label?: string;
+  colors: (typeof Colors)[keyof typeof Colors];
+}
 
 const TabItem = ({
   isFocused,
   onPress,
   onLongPress,
   iconName,
-  label,
   colors,
-}: any) => {
+}: TabItemProps) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -39,7 +48,7 @@ const TabItem = ({
           ]}
         >
           <Ionicons
-            name={iconName as any}
+            name={iconName}
             size={isFocused ? 20 : 24}
             color={isFocused ? colors.primaryContent : colors.secondary}
           />
@@ -49,24 +58,11 @@ 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 type CustomTabBarProps = Parameters<
+  NonNullable<React.ComponentProps<typeof Tabs>["tabBar"]>
+>[0] & {
+  showCenterButton?: boolean;
+  onCenterButtonPress?: () => void;
 };
 
 export default function CustomTabBar({
@@ -75,18 +71,20 @@ export default function CustomTabBar({
   navigation,
   showCenterButton = true,
   onCenterButtonPress,
-}: any) {
+}: CustomTabBarProps) {
   const insets = useSafeAreaInsets();
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
 
   const currentRoute = state.routes[state.index];
-  const currentOptions = descriptors[currentRoute.key].options;
-  if (currentOptions.tabBarStyle?.display === "none") {
+  const currentOptions = descriptors[currentRoute.key]?.options;
+  const flatTabBarStyle = StyleSheet.flatten(currentOptions?.tabBarStyle) as any;
+  if (flatTabBarStyle?.display === "none") {
     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 +111,81 @@ 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];
+            const flatItemStyle = StyleSheet.flatten(options.tabBarItemStyle) as any;
+            if (
+              (options as any).href === null ||
+              flatItemStyle?.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 +234,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,
-  },
 });