@imksh/create 1.0.27 → 1.0.30

package/templates/{mern-react-native/mobile → layers/react-native/base}/package.json

@@ -16,13 +16,17 @@
     "expo-blur": "~57.0.2",
     "expo-constants": "~57.0.6",
     "expo-device": "~57.0.1",
+    "expo-file-system": "~18.0.7",
     "expo-font": "~57.0.1",
     "expo-glass-effect": "~57.0.1",
     "expo-image": "~57.0.1",
     "expo-image-picker": "^57.0.6",
     "expo-linear-gradient": "^57.0.1",
     "expo-linking": "~57.0.3",
+    "expo-local-authentication": "~15.0.2",
+    "expo-location": "~18.0.5",
     "expo-notifications": "~57.0.6",
+    "dayjs": "^1.11.13",
     "expo-router": "~57.0.7",
     "expo-splash-screen": "~57.0.4",
     "expo-sqlite": "^57.0.1",
@@ -39,15 +43,19 @@
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~2.32.0",
     "react-native-image-viewing": "^0.2.2",
+    "react-native-maps": "^1.18.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-otp-entry": "^1.8.6",
     "react-native-paper": "^5.15.3",
+    "react-native-pdf": "^6.7.5",
+    "react-native-blob-util": "^0.19.11",
     "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-toast-message": "^2.4.0",
     "react-native-web": "~0.21.0",
+    "react-native-webview": "^13.12.5",
     "react-native-worklets": "0.10.0",
     "socket.io-client": "^4.8.3",
     "tailwindcss": "^3.4.19",

package/templates/{react-native → layers/react-native/base}/src/app/(tabs)/profile.tsx

@@ -49,7 +49,7 @@ const Profile = () => {
 
       <ScrollView className="flex-1 px-6 pt-6">
         <View className="bg-base-200 rounded-2xl p-4 mb-6">
-          <View className="flex-row items-center justify-between py-2">
+          <View className="flex-row items-center justify-between py-2 border-b border-base-300">
             <View className="flex-row items-center">
               <Ionicons 
                 name={colorScheme === "dark" ? "moon" : "sunny"} 
@@ -60,8 +60,27 @@ const Profile = () => {
             </View>
             <Switch checked={colorScheme === "dark"} onChange={handleToggleTheme} />
           </View>
+          
+          <View className="flex-row items-center justify-between py-3">
+            <View className="flex-row items-center">
+              <Ionicons 
+                name="finger-print-outline" 
+                size={22} 
+                color={colorScheme === "dark" ? "#fff" : "#000"} 
+              />
+              <Txt variant="base" className="ml-3 font-semibold">App Lock (Biometrics)</Txt>
+            </View>
+            <Switch 
+              checked={useAuthStore(state => state.isBiometricEnabled)} 
+              onChange={async () => {
+                const store = useAuthStore.getState();
+                await store.setBiometricEnabled(!store.isBiometricEnabled);
+              }} 
+            />
+          </View>
         </View>
 
+
         <Button
           label="Logout"
           variant="error"

package/templates/{react-native → layers/react-native/base}/src/app/_layout.tsx

@@ -6,8 +6,10 @@ import { useColorScheme } from "nativewind";
 import { Colors } from "../constants/Colors";
 import "./global.css";
 import Loading from "@/components/common/Loading";
+import BiometricLock from "@/components/ui/BiometricLock";
 
 import { PaperProvider } from "react-native-paper";
+
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useFonts } from "expo-font";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -79,18 +81,24 @@ export default function RootLayout() {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <PaperProvider>
         <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
-        <Stack
-          screenOptions={{
-            headerShown: false,
-            contentStyle: { backgroundColor: colors.base100 },
-          }}
-        >
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen
-            name="(auth)"
-            options={{ headerShown: false, animation: "fade" }}
-          />
-        </Stack>
+        <BiometricLock>
+          <Stack
+            screenOptions={{
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.base100 },
+            }}
+          >
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen
+              name="(auth)"
+              options={{ headerShown: false, animation: "fade" }}
+            />
+            <Stack.Screen
+              name="doc-viewer"
+              options={{ presentation: "fullScreenModal" }}
+            />
+          </Stack>
+        </BiometricLock>
         <Toast />
       </PaperProvider>
     </GestureHandlerRootView>

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

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Pdf from "react-native-pdf";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../constants/Colors";
+import ScreenHeader from "../components/common/ScreenHeader";
+import { Txt } from "../components/common/Typography";
+import Input from "../components/ui/inputs/Input";
+import Button from "../components/ui/buttons/Button";
+import Container from "../components/ui/layout/Container";
+import { Ionicons } from "@expo/vector-icons";
+import ProgressBar from "../components/ui/feedback/ProgressBar";
+import * as FileSystem from "expo-file-system/legacy";
+
+export default function DocViewerScreen() {
+  const router = useRouter();
+  const { url, name } = useLocalSearchParams<{
+    url: string;
+    name?: string;
+  }>();
+  
+  const insets = useSafeAreaInsets();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const colors = Colors[isDark ? "dark" : "light"];
+
+  const [totalPages, setTotalPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const [password, setPassword] = useState("");
+  const [isPasswordRequired, setIsPasswordRequired] = useState(false);
+  const [inputPassword, setInputPassword] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const [localUri, setLocalUri] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!url) return;
+    
+    if (url.startsWith('http')) {
+      const downloadFile = async () => {
+        try {
+          const filename = `doc_${Date.now()}.pdf`;
+          const fileUri = FileSystem.documentDirectory + filename;
+          
+          const downloadResumable = FileSystem.createDownloadResumable(
+            url,
+            fileUri,
+            {},
+            (progressEvent) => {
+              const progress = progressEvent.totalBytesWritten / progressEvent.totalBytesExpectedToWrite;
+              setDownloadProgress(progress);
+            }
+          );
+          
+          const result = await downloadResumable.downloadAsync();
+          if (result && result.uri) {
+            setLocalUri(result.uri);
+          } else {
+            setDownloadError('Failed to download document');
+          }
+        } catch (error) {
+          console.error('Download error:', error);
+          setDownloadError('Error downloading document');
+        }
+      };
+      downloadFile();
+    } else {
+      setLocalUri(url);
+    }
+  }, [url]);
+
+  if (!url) {
+    return (
+      <View style={{ flex: 1, backgroundColor: colors.base100 }}>
+        <ScreenHeader title="Document Viewer" onBack={() => router.back()} />
+        <View className="flex-1 items-center justify-center p-4">
+          <Ionicons name="alert-circle-outline" size={48} color={colors.baseContent} style={{ opacity: 0.5 }} />
+          <Txt variant="base" className="mt-4 text-center opacity-70">
+            No document URL provided.
+          </Txt>
+        </View>
+      </View>
+    );
+  }
+
+  const handlePasswordSubmit = () => {
+    setPassword(inputPassword);
+    setIsPasswordRequired(false);
+    setErrorMsg("");
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.base100 }}>
+      <ScreenHeader
+        title={name || 'Document Viewer'}
+        subtitle={totalPages > 0 ? `Page ${currentPage} of ${totalPages}` : 'Loading...'}
+        onBack={() => router.back()}
+      />
+
+      {isPasswordRequired ? (
+        <Container className="flex-1 justify-center items-center px-6">
+          <View className="p-6 rounded-3xl w-full" style={{ backgroundColor: colors.base200 }}>
+            <Txt variant="xl" className="font-bold text-center mb-2">Password Protected</Txt>
+            <Txt variant="base" className="text-center text-base-content/70 mb-6">
+              This document requires a password to open.
+            </Txt>
+            <Input
+              placeholder="Enter password"
+              value={inputPassword}
+              onChangeText={setInputPassword}
+              secureTextEntry
+              className="mb-4"
+            />
+            {errorMsg ? (
+              <Txt variant="caption" className="text-error text-center mb-4">{errorMsg}</Txt>
+            ) : null}
+            <Button
+              label="Unlock Document"
+              variant="primary"
+              isFullWidth
+              onPress={handlePasswordSubmit}
+            />
+          </View>
+        </Container>
+      ) : (
+        <View style={styles.pdfContainer}>
+          {!localUri && !downloadError ? (
+            <View className="flex-1 items-center justify-center w-full relative">
+              <View className="w-3/4 max-w-sm absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-base-100 p-6 rounded-2xl shadow-lg border border-base-300">
+                <ProgressBar progress={downloadProgress * 100} label="Downloading Document" />
+              </View>
+            </View>
+          ) : downloadError ? (
+            <View className="flex-1 items-center justify-center p-4">
+              <Ionicons name="close-circle-outline" size={48} color={colors.error} style={{ opacity: 0.8 }} />
+              <Txt variant="base" className="mt-4 text-center text-error font-semibold">
+                {downloadError}
+              </Txt>
+              <Button 
+                label="Go Back" 
+                variant="outline" 
+                style={{ marginTop: 20 }} 
+                onPress={() => router.back()} 
+              />
+            </View>
+          ) : (
+            <Pdf
+              source={{ uri: localUri!, cache: false }}
+              password={password}
+              onLoadComplete={(numberOfPages) => {
+                setTotalPages(numberOfPages);
+              }}
+              onPageChanged={(page) => {
+                setCurrentPage(page);
+              }}
+              onError={(error: any) => {
+
+                if (error?.message?.toLowerCase().includes('password')) {
+                  setIsPasswordRequired(true);
+                  setErrorMsg('Incorrect password. Please try again.');
+                }
+              }}
+              trustAllCerts={false}
+              style={[styles.pdf, { backgroundColor: colors.base200 }]}
+            />
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pdfContainer: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  pdf: {
+    flex: 1,
+    width: Dimensions.get("window").width,
+    height: Dimensions.get("window").height,
+  },
+});

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

@@ -83,27 +83,54 @@ export const Txt = ({
     const isSize = ["xxs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "caption"].includes(val);
     return !isSize;
   });
-  const defaultColorClass = hasColorClass
+  const defaultColorClass = hasColorClass || color
     ? ""
     : variant === "xs"
       ? "text-secondary"
       : "text-base-content";
-
-  // Override specific properties if provided
+    
   const customStyles: any = {};
   if (color) customStyles.color = color;
   if (align) customStyles.textAlign = align;
-  if (weight) {
-    if (weight === "bold" || weight === "black")
-      customStyles.fontFamily = FontFamily.bold;
-    if (weight === "semibold") customStyles.fontFamily = FontFamily.semibold;
-    if (weight === "medium") customStyles.fontFamily = FontFamily.medium;
-    if (weight === "normal") customStyles.fontFamily = FontFamily.regular;
+
+  // 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") {
+    customStyles.fontFamily = FontFamily.extrabold;
+    customStyles.fontWeight = "normal"; // Prevent Android fallback
+  } else if (resolvedWeight === "bold") {
+    customStyles.fontFamily = FontFamily.bold;
+    customStyles.fontWeight = "normal";
+  } else if (resolvedWeight === "semibold") {
+    customStyles.fontFamily = FontFamily.semibold;
+    customStyles.fontWeight = "normal";
+  } else if (resolvedWeight === "medium") {
+    customStyles.fontFamily = FontFamily.medium;
+    customStyles.fontWeight = "normal";
+  } else if (resolvedWeight === "normal") {
+    customStyles.fontFamily = FontFamily.regular;
+    customStyles.fontWeight = "normal";
   }
 
+  // Strip weight classes since we handle them manually
+  finalClassName = finalClassName
+    .replace(/font-black/g, "")
+    .replace(/font-extrabold/g, "")
+    .replace(/font-bold/g, "")
+    .replace(/font-semibold/g, "")
+    .replace(/font-medium/g, "");
+
   return (
     <Text
-      className={`${defaultColorClass} ${className}`}
+      className={`${defaultColorClass} ${finalClassName}`}
       style={[baseStyle, customStyles, style]}
       {...props}
     >

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

@@ -0,0 +1,114 @@
+import React, { useEffect, useState, useRef } from "react";
+import { View, AppState, AppStateStatus, StyleSheet } from "react-native";
+import { useAuthStore } from "@/store/useAuthStore";
+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 appConfig from "@/config/appConfig";
+
+export default function BiometricLock({ children }: { children: React.ReactNode }) {
+  const { isBiometricEnabled, isAppLocked, setIsAppLocked, lockDuration } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  
+  const appState = useRef(AppState.currentState);
+  const backgroundTime = useRef<number | null>(null);
+  
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+
+  useEffect(() => {
+    if (!isBiometricEnabled) return;
+
+    // Trigger initial lock if enabled and locked on startup
+    if (isAppLocked) {
+      handleAuthentication();
+    }
+
+    const subscription = AppState.addEventListener("change", (nextAppState: AppStateStatus) => {
+      // App went to background
+      if (appState.current.match(/active/) && nextAppState.match(/inactive|background/)) {
+        backgroundTime.current = Date.now();
+      }
+
+      // App came to foreground
+      if (appState.current.match(/inactive|background/) && nextAppState === "active") {
+        if (isBiometricEnabled && !isAppLocked && backgroundTime.current) {
+          const timeInBackground = Date.now() - backgroundTime.current;
+          // lockDuration is in minutes, so multiply by 60000. Give a 10s grace period for 'Immediately' (0) to allow for permission/native modals.
+          const threshold = lockDuration === 0 ? 10000 : lockDuration * 60000;
+          if (timeInBackground > threshold) {
+            setIsAppLocked(true);
+            handleAuthentication();
+          }
+        } else if (isAppLocked) {
+          handleAuthentication();
+        }
+      }
+
+      appState.current = nextAppState;
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [isBiometricEnabled, isAppLocked, lockDuration]);
+
+  const handleAuthentication = async () => {
+    if (isAuthenticating) return;
+    setIsAuthenticating(true);
+    
+    const success = await authenticateAsync("Unlock HireMe");
+    
+    if (success) {
+      setIsAppLocked(false);
+      backgroundTime.current = null;
+    }
+    
+    setIsAuthenticating(false);
+  };
+
+  return (
+    <>
+      {children}
+      {isAppLocked && (
+        <View style={[styles.container, { backgroundColor: theme.base100 }]}>
+          <View className="items-center justify-center mb-10">
+            <View className="w-24 h-24 rounded-full items-center justify-center mb-6" style={{ backgroundColor: theme.primary + '15' }}>
+              <Ionicons name="lock-closed" size={48} color={theme.primary} />
+            </View>
+            <Txt variant="3xl" className="font-extrabold tracking-tight mb-2">App Locked</Txt>
+            <Txt variant="base" className="opacity-70 text-center px-8">
+              Please authenticate to continue using {appConfig.app.name}
+            </Txt>
+          </View>
+
+          <Button 
+            label="Unlock App" 
+            variant="primary" 
+            leftIcon="finger-print" 
+            onPress={handleAuthentication} 
+            isLoading={isAuthenticating}
+            style={{ width: '80%', maxWidth: 300 }}
+          />
+        </View>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 99999, // Ensure it covers everything
+  },
+});

package/templates/{react-native → layers/react-native/base}/src/components/ui/BottomModal.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   KeyboardAvoidingView,
   Platform,
+  BackHandler,
 } from "react-native";
 import Animated, {
   useSharedValue,
@@ -67,12 +68,28 @@ export default function BottomModal({
       });
     }
      
-  }, [isOpen]);
+  }, [isOpen, MODAL_HEIGHT]);
+
+  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 (event.translationY > 0) {
-        // eslint-disable-next-line react-hooks/immutability
+         
         translateY.value = event.translationY;
       }
     })
@@ -80,7 +97,7 @@ export default function BottomModal({
       if (event.translationY > MODAL_HEIGHT * 0.3 || event.velocityY > 500) {
         runOnJS(onClose)();
       } else {
-        // eslint-disable-next-line react-hooks/immutability
+         
         translateY.value = withTiming(0, {
           duration: 300,
           easing: Easing.out(Easing.ease),

package/templates/{production-fullstack/mobile → layers/react-native/base}/src/components/ui/ClassicTabBar.tsx

@@ -1,4 +1,3 @@
-import { Txt } from "../common/Typography";
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
@@ -7,7 +6,7 @@ import { useColorScheme } from 'nativewind';
 import { Colors } from '../../constants/Colors';
 import { getTabConfig } from '../../config/tabNavigation';
 
-const TabItem = ({ isFocused, onPress, onLongPress, iconName, label, colors }: any) => {
+const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -20,19 +19,9 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, label, colors }: a
       <View style={styles.tabItem}>
         <Ionicons 
           name={iconName as any} 
-          size={24} 
-          color={isFocused ? colors.primary : colors.secondary} 
-          style={{ marginBottom: 4 }} 
+          size={28} 
+          color={isFocused ? colors.primary : colors.baseContent + '60'} 
         />
-        <Txt 
-          style={{ 
-            color: isFocused ? colors.primary : colors.secondary, 
-            fontWeight: isFocused ? '600' : '500', 
-            fontSize: 11 
-          }}
-        >
-          {label}
-        </Txt>
       </View>
     </TouchableOpacity>
   );
@@ -47,10 +36,11 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
     <View style={[
       styles.container, 
       { 
-        backgroundColor: colors.base100, 
-        borderTopColor: colors.base300,
-        height: 60 + insets.bottom,
-        paddingBottom: insets.bottom > 0 ? insets.bottom : 8,
+        backgroundColor: colors.base100,
+        borderTopColor: colors.base300 + '80',
+        height: 72 + insets.bottom,
+        paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+        elevation:1
       }
     ]}>
       {state.routes.map((route: any, index: number) => {
@@ -93,7 +83,6 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
             onPress={onPress}
             onLongPress={onLongPress}
             iconName={iconName}
-            label={label as string}
             colors={colors}
           />
         );
@@ -107,13 +96,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 8,
-    borderTopWidth: 1,
-    elevation: 8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 5,
+    paddingVertical: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
   },
   tabButton: {
     flex: 1,
@@ -124,6 +108,5 @@ const styles = StyleSheet.create({
   tabItem: {
     alignItems: 'center',
     justifyContent: 'center',
-    height: 50,
   },
 });

package/templates/{mern-ts/client → layers/react-native/base}/src/config/appConfig.ts

@@ -1,15 +1,15 @@
 const appConfig = {
   app: {
-    name: "React App",
-    logo: "./logo.png",
-    shortName: "React",
-    description: "A React application built with @imksh/create",
+    name: "Mobile App",
+    logo: "@assets/images/logo/logo.png",
+    shortName: "Mobile App",
+    description: "A mobile application built with @imksh/create",
     version: "1.0.0",
     author: "Karan Sharma",
   },
 
   api: {
-    baseURL: import.meta.env.VITE_API_URL,
+    baseURL: process.env.EXPO_PUBLIC_API_URL,
     timeout: 30000,
   },
 

package/templates/layers/react-native/base/src/services/biometric.service.ts

@@ -0,0 +1,24 @@
+import * as LocalAuthentication from 'expo-local-authentication';
+
+export const isBiometricSupported = async () => {
+  const compatible = await LocalAuthentication.hasHardwareAsync();
+  if (!compatible) return false;
+  
+  const enrolled = await LocalAuthentication.isEnrolledAsync();
+  return enrolled;
+};
+
+export const authenticateAsync = async (promptMessage = "Authenticate to continue") => {
+  try {
+    const result = await LocalAuthentication.authenticateAsync({
+      promptMessage,
+      fallbackLabel: "Use Passcode",
+      disableDeviceFallback: false,
+      cancelLabel: "Cancel"
+    });
+    return result.success;
+  } catch (error) {
+    console.error("Biometric authentication error:", error);
+    return false;
+  }
+};