@imksh/create 1.0.30 → 1.0.32

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

@@ -0,0 +1,199 @@
+import React, { useState, useMemo } from "react";
+import {
+  View,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  ActivityIndicator,
+} from "react-native";
+import { Txt } from "../../common/Typography";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import ScreenHeader from "@/components/common/ScreenHeader";
+import SearchBar from "./SearchBar";
+
+interface SearchablePickerProps<T> {
+  label?: string;
+  data: T[];
+  value: string;
+  onSelect: (item: T) => void;
+  labelExtractor: (item: T) => string;
+  valueExtractor: (item: T) => string;
+  placeholder?: string;
+  isLoading?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+  className?: string;
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
+  renderTrigger?: (
+    onPress: () => void,
+    selectedItem: T | undefined,
+  ) => React.ReactNode;
+  onSearchChange?: (text: string) => void;
+  onEndReached?: () => void;
+  disableLocalFilter?: boolean;
+  renderOption?: (item: T, isSelected: boolean) => React.ReactNode;
+}
+export default function SearchablePicker<T>({
+  label,
+  data,
+  value,
+  onSelect,
+  labelExtractor,
+  valueExtractor,
+  placeholder = "Select an option",
+  isLoading = false,
+  size = "md",
+  className = "mb-4",
+  weight = "normal",
+  renderTrigger,
+  onSearchChange,
+  onEndReached,
+  disableLocalFilter = false,
+  renderOption,
+}: SearchablePickerProps<T>) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  const [modalVisible, setModalVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const selectedItem = useMemo(
+    () => data.find((item) => valueExtractor(item) === value),
+    [data, value, valueExtractor],
+  );
+
+  const filteredData = useMemo(() => {
+    if (disableLocalFilter) return data;
+    if (!searchQuery) return data;
+    return data.filter((item) =>
+      labelExtractor(item).toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [data, searchQuery, labelExtractor, disableLocalFilter]);
+
+  return (
+    <View className={className}>
+      {label && (
+        <Txt
+          color={theme.baseContent}
+          weight={weight}
+          style={{ marginBottom: 6 }}
+        >
+          {label}
+        </Txt>
+      )}
+      {renderTrigger ? (
+        renderTrigger(() => setModalVisible(true), selectedItem)
+      ) : (
+        <TouchableOpacity
+          onPress={() => setModalVisible(true)}
+          className="bg-base-100 border border-base-300 rounded-xl px-4 flex-row items-center justify-between"
+          style={{
+            height:
+              size === "xs" ? 30 : size === "sm" ? 40 : size === "lg" ? 64 : 52,
+          }}
+        >
+          <Txt
+            className={
+              selectedItem ? "text-base-content" : "text-base-content/50"
+            }
+            style={{
+              fontSize:
+                size === "xs"
+                  ? 12
+                  : size === "sm"
+                    ? 14
+                    : size === "lg"
+                      ? 18
+                      : 16,
+            }}
+          >
+            {selectedItem ? labelExtractor(selectedItem) : placeholder}
+          </Txt>
+          <Ionicons
+            name="chevron-down"
+            size={size === "xs" ? 14 : size === "sm" ? 16 : 20}
+            color={theme.secondary}
+          />
+        </TouchableOpacity>
+      )}
+
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        presentationStyle="pageSheet"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View className="flex-1 bg-base-100">
+          <ScreenHeader
+            title={label || "Select"}
+            icon="close"
+            onBack={() => setModalVisible(false)}
+          />
+
+          <View className="px-4 pt-4">
+            <SearchBar
+              value={searchQuery}
+              onChangeText={(text) => {
+                setSearchQuery(text);
+                if (onSearchChange) onSearchChange(text);
+              }}
+              debounceMs={0}
+            />
+          </View>
+
+          {isLoading ? (
+            <ActivityIndicator
+              style={{ marginTop: 20 }}
+              color={theme.primary}
+            />
+          ) : (
+            <FlatList
+              data={filteredData}
+              keyExtractor={(item, idx) =>
+                valueExtractor(item) || idx.toString()
+              }
+              contentContainerStyle={{
+                paddingHorizontal: 16,
+                paddingBottom: 40,
+              }}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  onPress={() => {
+                    onSelect(item);
+                    setModalVisible(false);
+                    setSearchQuery("");
+                  }}
+                  className="py-4 border-b border-base-200 flex-row justify-between items-center"
+                >
+                  {renderOption ? (
+                    renderOption(item, valueExtractor(item) === value)
+                  ) : (
+                    <>
+                      <Txt>{labelExtractor(item)}</Txt>
+                      {valueExtractor(item) === value && (
+                        <Ionicons
+                          name="checkmark"
+                          size={20}
+                          color={theme.primary}
+                        />
+                      )}
+                    </>
+                  )}
+                </TouchableOpacity>
+              )}
+              ListEmptyComponent={() => (
+                <View className="items-center py-8">
+                  <Txt className="text-base-content/50">
+                    No data found
+                  </Txt>
+                </View>
+              )}
+              onEndReached={onEndReached}
+              onEndReachedThreshold={0.5}
+            />
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+}

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

@@ -11,15 +11,15 @@ import { Colors } from "../../../constants/Colors";
 import { Txt } from "../../common/Typography";
 
 export interface SwitchProps {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
+  value: boolean;
+  onChange?: (value: boolean) => void;
   label?: string;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
 export default function Switch({
-  checked,
+  value,
   onChange,
   label,
   disabled,
@@ -28,11 +28,11 @@ export default function Switch({
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
   
-  const progress = useSharedValue(checked ? 1 : 0);
+  const progress = useSharedValue(value ? 1 : 0);
 
   useEffect(() => {
-    progress.value = withTiming(checked ? 1 : 0, { duration: 250 });
-  }, [checked, progress]);
+    progress.value = withTiming(value ? 1 : 0, { duration: 250 });
+  }, [value, progress]);
 
   const trackStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
@@ -53,7 +53,7 @@ export default function Switch({
     <TouchableOpacity
       activeOpacity={0.8}
       disabled={disabled}
-      onPress={() => onChange && onChange(!checked)}
+      onPress={() => onChange && onChange(!value)}
       style={[{ flexDirection: "row", alignItems: "center", opacity: disabled ? 0.5 : 1 }, style]}
     >
       <Animated.View

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

@@ -10,6 +10,7 @@ import Input from "./Input";
 import { toast } from "@/utils/toast";
 import { WebView, WebViewMessageEvent } from "react-native-webview";
 import { LocationLoader } from "../../common/LocationLoader";
+import ScreenHeader from "@/components/common/ScreenHeader";
 
 export interface LocationDetails {
   addressLine1: string;
@@ -40,11 +41,12 @@ export default function WebLocationPicker({
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [searching, setSearching] = useState(false);
-  
+
   const [loadingLocation, setLoadingLocation] = useState(false);
   const [animationDone, setAnimationDone] = useState(false);
   const [positionFetched, setPositionFetched] = useState(false);
-  
+  const [showWebView, setShowWebView] = useState(true);
+
   const [mapCenter, setMapCenter] = useState({
     latitude: initialCoordinate?.latitude || 28.6139,
     longitude: initialCoordinate?.longitude || 77.209,
@@ -56,7 +58,6 @@ export default function WebLocationPicker({
 
   useEffect(() => {
     if (initialCoordinate?.latitude && initialCoordinate?.longitude) {
-       
       setMapCenter(initialCoordinate);
       setCurrentCenter(initialCoordinate);
     }
@@ -69,6 +70,7 @@ export default function WebLocationPicker({
   }, [animationDone, positionFetched]);
 
   const requestLocationAndOpenMap = async () => {
+    setShowWebView(true);
     setModalVisible(true);
     setLoadingLocation(true);
     setAnimationDone(false);
@@ -84,7 +86,9 @@ export default function WebLocationPicker({
         }
 
         if (!initialCoordinate?.latitude) {
-          let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
+          let location = await Location.getCurrentPositionAsync({
+            accuracy: Location.Accuracy.Balanced,
+          });
           setMapCenter({
             latitude: location.coords.latitude,
             longitude: location.coords.longitude,
@@ -120,8 +124,15 @@ export default function WebLocationPicker({
           latitude: currentCenter.latitude,
           longitude: currentCenter.longitude,
         };
-        onLocationSelected(details);
-        setModalVisible(false);
+
+        // Hide WebView first to prevent Android crash when Modal closes
+        setShowWebView(false);
+        setTimeout(() => {
+          onLocationSelected(details);
+          setModalVisible(false);
+          setLoading(false);
+        }, 150);
+        return;
       }
     } catch (error) {
       console.warn("Geocoding failed", error);
@@ -129,6 +140,37 @@ export default function WebLocationPicker({
     setLoading(false);
   };
 
+  const [fetchingCurrentLocation, setFetchingCurrentLocation] = useState(false);
+
+  const handleCurrentLocation = async () => {
+    setFetchingCurrentLocation(true);
+    try {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== "granted") {
+        toast.error("Permission to access location was denied");
+        return;
+      }
+
+      let location = await Location.getCurrentPositionAsync({
+        accuracy: Location.Accuracy.Balanced,
+      });
+
+      const lat = location.coords.latitude;
+      const lng = location.coords.longitude;
+
+      setCurrentCenter({ latitude: lat, longitude: lng });
+      webViewRef.current?.injectJavaScript(`
+        map.setView([${lat}, ${lng}], 15);
+        true;
+      `);
+    } catch (error) {
+      console.warn("Failed to get current location", error);
+      toast.error("Failed to get current location");
+    } finally {
+      setFetchingCurrentLocation(false);
+    }
+  };
+
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
     setSearching(true);
@@ -142,11 +184,10 @@ export default function WebLocationPicker({
           true;
         `);
       } else {
-        toast.success("Location not found");
+        toast.error("Location not found");
       }
-    } catch (error) {
-      console.warn("Search failed", error);
-      toast.error("Failed to search location");
+    } catch {
+      toast.error("Failed to search");
     }
     setSearching(false);
   };
@@ -163,7 +204,8 @@ export default function WebLocationPicker({
     } catch {}
   };
 
-  const htmlContent = useMemo(() => `
+  const htmlContent = useMemo(
+    () => `
     <!DOCTYPE html>
     <html>
     <head>
@@ -188,7 +230,7 @@ export default function WebLocationPicker({
       <div class="center-marker">📍</div>
       <script>
         var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([${mapCenter.latitude}, ${mapCenter.longitude}], 15);
-        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 19
         }).addTo(map);
 
@@ -203,7 +245,9 @@ export default function WebLocationPicker({
       </script>
     </body>
     </html>
-  `, [mapCenter.latitude, mapCenter.longitude]);
+  `,
+    [mapCenter.latitude, mapCenter.longitude],
+  );
 
   return (
     <>
@@ -223,14 +267,18 @@ export default function WebLocationPicker({
             />
             <Txt color={theme.baseContent} weight="semibold">
               {initialCoordinate?.latitude
-                ? "Update Location on Map"
-                : "Pick from Map"}
+                ? "Update Location"
+                : "Pick from map"}
             </Txt>
           </View>
           {loading && !modalVisible ? (
             <ActivityIndicator color={theme.primary} />
           ) : (
-            <Ionicons name="chevron-forward" size={20} color={theme.secondary} />
+            <Ionicons
+              name="chevron-forward"
+              size={20}
+              color={theme.secondary}
+            />
           )}
         </TouchableOpacity>
       )}
@@ -251,68 +299,94 @@ export default function WebLocationPicker({
           </View>
         ) : (
           <View className="flex-1 bg-base-100">
-            <View
-              className="h-16 flex-row items-center justify-between px-4 border-b border-base-300 pt-4 bg-base-100"
-              style={{ zIndex: 10 }}
-            >
-            <TouchableOpacity onPress={() => setModalVisible(false)}>
-              <Ionicons name="close" size={28} color={theme.baseContent} />
-            </TouchableOpacity>
-            <Txt weight="bold" style={{ fontSize: 18 }}>
-              Select Location
-            </Txt>
-            <View style={{ width: 28 }} />
-          </View>
+            <ScreenHeader
+              icon="close"
+              onBack={() => setModalVisible(false)}
+              title="Select Location"
+            />
 
-          <View className="px-4 py-3 bg-base-100 flex-row items-center border-b border-base-200 gap-4">
-            <View className="flex-1" style={{ marginBottom: -16 }}>
-              <Input
-                placeholder="Search city, area, etc."
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-                onSubmitEditing={handleSearch}
-                returnKeyType="search"
-                containerStyle={{ marginBottom: 0 }}
-                leftIcon="search"
+            <View className="px-4 py-3 bg-base-100 flex-row items-center border-b border-base-200 gap-4">
+              <View className="flex-1" style={{ marginBottom: -8 }}>
+                <Input
+                  placeholder="Search Location"
+                  value={searchQuery}
+                  onChangeText={setSearchQuery}
+                  onSubmitEditing={handleSearch}
+                  returnKeyType="search"
+                  containerStyle={{ marginBottom: 0 }}
+                  leftIcon="search"
+                />
+              </View>
+              <Button
+                onPress={handleSearch}
+                isLoading={searching}
+                label="Go"
+                variant="primary"
+                soft
+                size="md"
+                className=""
               />
             </View>
-            <Button 
-              onPress={handleSearch} 
-              isLoading={searching} 
-              label="Go" 
-              variant="primary"
-              soft
-              size="md"
-              className="my-auto"
-            />
-          </View>
 
-          <View className="flex-1 relative">
-            <WebView
-              ref={webViewRef}
-              source={{ html: htmlContent }}
-              onMessage={handleMessage}
-              style={{ flex: 1 }}
-              javaScriptEnabled={true}
-              scrollEnabled={false}
-              bounces={false}
-              startInLoadingState={true}
-              renderLoading={() => (
-                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
-                  <ActivityIndicator size="large" color={theme.primary} />
-                </View>
+            <View className="flex-1 relative">
+              {showWebView && (
+                <WebView
+                  ref={webViewRef}
+                  source={{ html: htmlContent }}
+                  onMessage={handleMessage}
+                  style={{ flex: 1 }}
+                  javaScriptEnabled={true}
+                  scrollEnabled={false}
+                  bounces={false}
+                  startInLoadingState={true}
+                  renderLoading={() => (
+                    <View
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        backgroundColor: "#f0f0f0",
+                      }}
+                    >
+                      <ActivityIndicator size="large" color={theme.primary} />
+                    </View>
+                  )}
+                />
               )}
-            />
-          </View>
 
-          <View className="p-4 bg-base-100 border-t border-base-300 pb-8">
-            <Button
-              label="Confirm Location"
-              onPress={handleConfirmLocation}
-              isLoading={loading}
-              variant="primary"
-            />
-          </View>
+              <TouchableOpacity
+                onPress={handleCurrentLocation}
+                disabled={fetchingCurrentLocation}
+                className="absolute bottom-6 right-4 w-12 h-12 rounded-full items-center justify-center shadow-lg border border-base-200"
+                style={{
+                  backgroundColor: theme.base100,
+                  elevation: 5,
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.25,
+                  shadowRadius: 3.84,
+                }}
+              >
+                {fetchingCurrentLocation ? (
+                  <ActivityIndicator size="small" color={theme.primary} />
+                ) : (
+                  <Ionicons name="locate" size={24} color={theme.primary} />
+                )}
+              </TouchableOpacity>
+            </View>
+
+            <View className="p-4 bg-base-100 border-t border-base-300 pb-8">
+              <Button
+                label="Confirm Location"
+                onPress={handleConfirmLocation}
+                isLoading={loading}
+                variant="primary"
+              />
+            </View>
           </View>
         )}
       </Modal>

package/templates/layers/react-native/base/src/config/api.ts

@@ -4,11 +4,11 @@ import { ApiResponse } from "../types/common.type";
 
 declare module 'axios' {
   export interface AxiosInstance {
-    get<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    delete<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    post<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    put<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    patch<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    get<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
+    delete<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
+    post<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    put<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
+    patch<T = unknown, R = AxiosResponse<ApiResponse<T>>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
   }
 }
 

package/templates/layers/react-native/base/src/config/appConfig.ts

@@ -5,7 +5,7 @@ const appConfig = {
     shortName: "Mobile App",
     description: "A mobile application built with @imksh/create",
     version: "1.0.0",
-    author: "Karan Sharma",
+    author: "",
   },
 
   api: {

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

@@ -14,9 +14,11 @@ export const authService = {
   login: (email: string, password: string) =>
     api.post("/auth/login", { email, password }),
 
+  googleLogin: (idToken: string) => api.post("/auth/google", { idToken }),
+
   getMe: () => api.get("/auth/me"),
 
-  updateMe: (data: any) => api.put("/auth/me", data),
+  updateMe: (data: FormData | Record<string, unknown>) => api.put("/auth/me", data),
 
   logout: () => api.post("/auth/logout"),
 

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

@@ -175,13 +175,11 @@ class PermissionService {
     const Notifications = require("expo-notifications");
 
     if (!Device.isDevice) {
-      console.log("Must use physical device for Push Notifications");
       return null;
     }
 
     const hasPermission = await this.requirePermission("notification");
     if (!hasPermission) {
-      console.log("User denied push notification permissions");
       return null;
     }
 

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

@@ -17,13 +17,6 @@ export const initializeSocket = async () => {
     transports: ['websocket'],
   });
 
-  socket.on('connect', () => {
-    console.log('Connected to socket server');
-  });
-
-  socket.on('disconnect', () => {
-    console.log('Disconnected from socket server');
-  });
 };
 
 export const getSocket = () => socket;