@imksh/create 1.0.31 → 1.0.33

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/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

@@ -1,13 +1,36 @@
-import { Platform, Alert } from "react-native";
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-  PermissionStatus,
-  openSettings,
-} from "react-native-permissions";
+import { Platform, Alert, Linking } from "react-native";
+import { isExpoGo, hasNativeModule } from "@/utils/env";
+
+export const RESULTS = {
+  UNAVAILABLE: "unavailable",
+  DENIED: "denied",
+  BLOCKED: "blocked",
+  GRANTED: "granted",
+  LIMITED: "limited",
+} as const;
+
+export type PermissionStatus = (typeof RESULTS)[keyof typeof RESULTS];
+export type Permission = string;
+
+export const openSettings = async (): Promise<void> => {
+  try {
+    await Linking.openSettings();
+  } catch (e) {
+    console.warn("Failed to open device settings", e);
+  }
+};
+
+const getRNPModule = () => {
+  if (isExpoGo() || !hasNativeModule("RNPermissions")) {
+    return null;
+  }
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require("react-native-permissions");
+  } catch {
+    return null;
+  }
+};
 
 export type AppPermissionType =
   | "camera"
@@ -27,6 +50,12 @@ class PermissionService {
    * Helper to determine the correct native Permission object based on platform
    */
   private getNativePermission(type: AppPermissionType): Permission | null {
+    const rnp = getRNPModule();
+    if (!rnp?.PERMISSIONS) {
+      return null;
+    }
+    const { PERMISSIONS } = rnp;
+
     if (Platform.OS === "ios") {
       switch (type) {
         case "camera":
@@ -34,10 +63,7 @@ class PermissionService {
         case "audio":
           return PERMISSIONS.IOS.MICROPHONE;
         case "image":
-          return PERMISSIONS.IOS.PHOTO_LIBRARY;
         case "file":
-          // iOS doesn't have a broad "file system" permission for the app sandbox
-          // Usually handled via DocumentPicker or PhotoLibrary depending on use case.
           return PERMISSIONS.IOS.PHOTO_LIBRARY;
         case "location":
           return PERMISSIONS.IOS.LOCATION_WHEN_IN_USE;
@@ -50,11 +76,7 @@ class PermissionService {
         case "nearbydevice":
           return PERMISSIONS.IOS.BLUETOOTH;
         case "notification":
-          // handled uniquely by react-native-permissions using requestNotifications
-          return null;
         case "phone":
-          // iOS doesn't require explicit permission to use Linking.openURL('tel:...')
-          return null;
         default:
           return null;
       }
@@ -77,13 +99,10 @@ class PermissionService {
         case "calendar":
           return PERMISSIONS.ANDROID.READ_CALENDAR;
         case "nearbydevice":
-          // Required for Android 12+
           return PERMISSIONS.ANDROID.BLUETOOTH_CONNECT;
         case "phone":
           return PERMISSIONS.ANDROID.CALL_PHONE;
         case "notification":
-          // handled uniquely by checkNotifications/requestNotifications
-          return null;
         default:
           return null;
       }
@@ -91,24 +110,101 @@ class PermissionService {
     return null;
   }
 
+  /**
+   * Fallback for checking permissions in Expo Go using Expo APIs
+   */
+  private async checkExpoPermission(type: AppPermissionType): Promise<PermissionStatus> {
+    try {
+      if (type === "notification") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const Notifications = require("expo-notifications");
+        const { status } = await Notifications.getPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+
+      if (type === "location" || type === "locationAlways") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const Location = require("expo-location");
+        const { status } = await Location.getForegroundPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+
+      if (type === "camera" || type === "image") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const ImagePicker = require("expo-image-picker");
+        const { status } =
+          type === "camera"
+            ? await ImagePicker.getCameraPermissionsAsync()
+            : await ImagePicker.getMediaLibraryPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+    } catch {
+      return RESULTS.GRANTED;
+    }
+
+    return RESULTS.GRANTED;
+  }
+
+  /**
+   * Fallback for requesting permissions in Expo Go using Expo APIs
+   */
+  private async requestExpoPermission(type: AppPermissionType): Promise<PermissionStatus> {
+    try {
+      if (type === "notification") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const Notifications = require("expo-notifications");
+        const { status } = await Notifications.requestPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+
+      if (type === "location" || type === "locationAlways") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const Location = require("expo-location");
+        const { status } = await Location.requestForegroundPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+
+      if (type === "camera" || type === "image") {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const ImagePicker = require("expo-image-picker");
+        const { status } =
+          type === "camera"
+            ? await ImagePicker.requestCameraPermissionsAsync()
+            : await ImagePicker.requestMediaLibraryPermissionsAsync();
+        return status === "granted" ? RESULTS.GRANTED : RESULTS.DENIED;
+      }
+    } catch {
+      return RESULTS.GRANTED;
+    }
+
+    return RESULTS.GRANTED;
+  }
+
   /**
    * Check the current status of a permission without asking the user
    */
   async checkPermission(type: AppPermissionType): Promise<PermissionStatus> {
+    const rnp = getRNPModule();
+    if (isExpoGo() || !rnp) {
+      return this.checkExpoPermission(type);
+    }
+
     if (type === "notification") {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { checkNotifications } = require("react-native-permissions");
-      const { status } = await checkNotifications();
-      return status;
+      try {
+        const { status } = await rnp.checkNotifications();
+        return status as PermissionStatus;
+      } catch {
+        return this.checkExpoPermission(type);
+      }
     }
-    
+
     const nativePerm = this.getNativePermission(type);
     if (!nativePerm) {
-      // If the permission doesn't exist on this platform (e.g. Phone on iOS), we consider it granted
       return RESULTS.GRANTED;
     }
+
     try {
-      return await check(nativePerm);
+      return (await rnp.check(nativePerm as any)) as PermissionStatus;
     } catch (error) {
       console.error(`Error checking permission ${type}:`, error);
       return RESULTS.UNAVAILABLE;
@@ -119,19 +215,27 @@ class PermissionService {
    * Request a permission from the user
    */
   async requestPermission(type: AppPermissionType): Promise<PermissionStatus> {
+    const rnp = getRNPModule();
+    if (isExpoGo() || !rnp) {
+      return this.requestExpoPermission(type);
+    }
+
     if (type === "notification") {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { requestNotifications } = require("react-native-permissions");
-      const { status } = await requestNotifications(["alert", "sound", "badge"]);
-      return status;
+      try {
+        const { status } = await rnp.requestNotifications(["alert", "sound", "badge"]);
+        return status as PermissionStatus;
+      } catch {
+        return this.requestExpoPermission(type);
+      }
     }
 
     const nativePerm = this.getNativePermission(type);
     if (!nativePerm) {
       return RESULTS.GRANTED;
     }
+
     try {
-      return await request(nativePerm);
+      return (await rnp.request(nativePerm as any)) as PermissionStatus;
     } catch (error) {
       console.error(`Error requesting permission ${type}:`, error);
       return RESULTS.UNAVAILABLE;
@@ -152,7 +256,14 @@ class PermissionService {
   }
 
   /**
-   * Helper to open the OS Settings screen for the app if permission is blocked
+   * Opens the OS Settings screen for the app
+   */
+  async openSettings(): Promise<void> {
+    return openSettings();
+  }
+
+  /**
+   * Helper to show an alert and open the OS Settings screen for the app if permission is blocked
    */
   async openSettingsForApp(
     title = "Permission Required",
@@ -160,52 +271,65 @@ class PermissionService {
   ) {
     Alert.alert(title, message, [
       { text: "Cancel", style: "cancel" },
-      { text: "Open Settings", onPress: () => openSettings() },
+      {
+        text: "Open Settings",
+        onPress: () => {
+          openSettings();
+        },
+      },
     ]);
   }
+
   /**
    * Utility to register and fetch the Expo Push Token for this device.
    * This uses the unified PermissionService to request the notification permission.
    * NOTE: This will only return a token on physical devices.
    */
   async registerForPushNotificationsAsync(): Promise<string | null> {
+    // In Expo Go on Android, FCM push notifications are not supported
+    if (isExpoGo() && Platform.OS === "android") {
+      return null;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const Device = require("expo-device");
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     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;
     }
 
     // Set channel for Android
     if (Platform.OS === "android") {
-      Notifications.setNotificationChannelAsync("default", {
-        name: "default",
-        importance: Notifications.AndroidImportance.MAX,
-        vibrationPattern: [0, 250, 250, 250],
-        lightColor: "#FF231F7C",
-      });
+      try {
+        await Notifications.setNotificationChannelAsync("default", {
+          name: "default",
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: "#FF231F7C",
+        });
+      } catch {
+        // Channel setup may fail in Expo Go
+      }
     }
 
     try {
       const projectId =
         require("../../app.json")?.expo?.extra?.eas?.projectId;
-      
+
       const tokenData = await Notifications.getExpoPushTokenAsync({
         projectId,
       });
 
       return tokenData.data;
     } catch (e) {
-      console.error("Failed to get push token", e);
+      console.warn("Failed to get push token", e);
       return null;
     }
   }