feat: Refactor watchLocation to use default options and enhance LocationSpeed display

Author: codeAbinash

android/app/build.gradle

@@ -103,8 +103,8 @@ android {
         applicationId "com.techtriangle"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 14
-        versionName "1.5.0"
+        versionCode 15
+        versionName "1.5.1"
     }
 
     splits {

src/assets/icons/hugeicons/constants.ts

@@ -0,0 +1,27 @@
+export const variants = [
+  'stroke-rounded' as const,
+  'stroke-standard' as const,
+  'solid-standard' as const,
+  'duotone-rounded' as const,
+  'twotone-rounded' as const,
+  'solid-rounded' as const,
+  'bulk-rounded' as const,
+  'stroke-sharp' as const,
+  'solid-sharp' as const,
+]
+
+export type Variant = (typeof variants)[number]
+
+export type IconProps = {
+  variant?: Variant
+  size?: number
+  color?: string
+  strokeWidth?: number
+  className?: string
+  fill?: string
+}
+
+export const defaultStrokeWidth = 1.5
+export const defaultColor = 'currentColor'
+export const defaultVariant = 'stroke-rounded'
+export const defaultSize = 24

src/screens/LocationNotes/lib.ts

@@ -26,14 +26,22 @@ export const fetchLocation = async (): Promise<Geolocation.GeoPosition> => {
 export const watchLocation = async (
   onSuccess: (position: Geolocation.GeoPosition) => void,
   onError: (error: LocationError) => void,
-  options: Geolocation.GeoWatchOptions = {},
 ): Promise<number> => {
   const hasPermission = await requestPermissions()
   if (!hasPermission) {
     onError({ code: 1, message: 'Location permission not granted' })
     return -1
   }
-  return Geolocation.watchPosition(onSuccess, onError, options)
+  return Geolocation.watchPosition(onSuccess, onError, {
+    accuracy: {
+      android: 'high',
+      ios: 'best',
+    },
+    enableHighAccuracy: true,
+    distanceFilter: 0, // Update on every change
+    interval: 1000,
+    fastestInterval: 1000,
+  })
 }
 
 export const requestPermissions = async (): Promise<boolean> => {

src/screens/LocationSpeed/LocationSpeed.tsx

@@ -1,10 +1,12 @@
 import SettWrapper from '@components/Settings/SettWrapper'
 import { watchLocation } from '@screens/LocationNotes/lib'
 import LocationDetails from '@screens/LocationNotes/LocationDetails'
-import { Bold, SemiBold } from '@utils/fonts'
+import { Bold, MEDIUM, SemiBold } from '@utils/fonts'
+import { layout } from '@utils/utils'
 import { useEffect, useState } from 'react'
 import { View } from 'react-native'
 import Geolocation from 'react-native-geolocation-service'
+import Animated from 'react-native-reanimated'
 
 export default function LocationSpeed() {
   const [pos, setPos] = useState<Geolocation.GeoPosition | null>(null)
@@ -21,10 +23,6 @@ export default function LocationSpeed() {
         (err) => {
           console.log(err)
         },
-        {
-          enableHighAccuracy: true,
-          interval: 1000,
-        },
       )
     }
 
@@ -39,15 +37,21 @@ export default function LocationSpeed() {
   }, [])
 
   let speed = pos?.coords.speed || 0
-  let s = speed < 10 ? speed.toFixed(1) : speed.toFixed(0)
+  // Convert from m/s to km/h (multiply by 3.6)
+  let speedKmh = speed * 3.6
+  let s = speedKmh < 10 ? speedKmh.toFixed(1) : speedKmh.toFixed(0)
 
   return (
     <SettWrapper title='Location Speed Meter'>
       <View className='py-20 pb-16'>
-        <Bold className='text pl-12 text-center' style={{ fontSize: 100, lineHeight: 100 }}>
+        <Animated.Text
+          className='text pl-14 text-center'
+          style={[{ fontSize: 130, lineHeight: 130 }, MEDIUM]}
+          layout={layout}
+        >
           {s}
-          <Bold style={{ fontSize: 30 }}>m/s</Bold>
-        </Bold>
+          <Bold style={{ fontSize: 25 }}>km/h</Bold>
+        </Animated.Text>
         <SemiBold className='text text-center text-xl'>Your Speed</SemiBold>
       </View>
       <LocationDetails data={pos} />