feat: Add LocationSpeed component to monitor and display current speed

Author: codeAbinash

App.tsx

@@ -63,6 +63,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import './global.css'
 import NewLocationNote from '@screens/LocationNotes/NewLocationNote'
+import LocationSpeed from '@screens/LocationSpeed/LocationSpeed'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -201,12 +202,14 @@ function Navigation() {
         <Stack.Screen name='NewLocationNote' component={NewLocationNote} options={GestureEnabled} />
         <Stack.Screen name='LocationTags' component={LocationTags} options={IOS_BOTTOM_STYLE} />
         <Stack.Screen name='LocationNote' component={LocationNote} options={GestureEnabled} />
+        <Stack.Screen name='LocationSpeed' component={LocationSpeed} options={GestureEnabled} />
       </Stack.Navigator>
     </>
   )
 }
 
 export type RootStackParamList = {
+  LocationSpeed: undefined
   NewLocationNote: undefined
   LocationNote: LocationNoteParamList
   LocationNotes: undefined

package.json

@@ -6,6 +6,7 @@
     "android": "react-native run-android  --active-arch-only",
     "ios": "react-native run-ios",
     "lint": "biome lint",
+    "eslint": "eslint . --fix",
     "format": "biome format --write",
     "dev": "react-native start",
     "test": "jest",
@@ -76,4 +77,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

src/assets/icons/icons.ts

@@ -148,3 +148,4 @@ export { default as Timer02Icon } from '@icons/timer-02-solid-rounded.svg'
 export { default as ArrowDown01StrokeRoundedIcon } from '@icons/arrow-down-01-stroke-rounded.svg'
 export { default as ArrowRight01StrokeRoundedIcon } from '@icons/arrow-right-01-stroke-rounded.svg'
 export { default as Location01Icon } from '@icons/location-01-solid-rounded.svg'
+export { default as Sent02Icon } from '@icons/sent-02-solid-rounded.svg'

src/assets/icons/src/sent-02-solid-rounded.svg

@@ -4,19 +4,21 @@ import {
   LatitudeIcon,
   LongitudeIcon,
   MapsLocation02SolidIcon,
-  Rocket01Icon,
+  Sent02Icon,
   Timer02Icon,
 } from '@assets/icons/icons'
 import { Gap12 } from '@components/Gap'
 import RoundedIcon from '@components/RoundedIcon'
 import SettGroup from '@components/Settings/SettGroup'
 import { SettOption } from '@components/Settings/SettOption'
 import { Txt } from '@components/Text'
-import { getLatitude, getLongitude } from '@utils/utils'
-import { Linking } from 'react-native'
+import { getLatitude, getLongitude, layout } from '@utils/utils'
+import { Linking, Share } from 'react-native'
 import { GeoPosition } from 'react-native-geolocation-service'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { shareMessage } from './lib'
 
-export default function LocationDetails({ data }: { data: GeoPosition | undefined }) {
+export default function LocationDetails({ data }: { data: GeoPosition | undefined | null }) {
   const { coords: { latitude, longitude, accuracy, altitude, altitudeAccuracy, speed } = {}, timestamp } = data || {}
 
   return (
@@ -47,28 +49,40 @@ export default function LocationDetails({ data }: { data: GeoPosition | undefine
               </Txt>
             }
           />
-          <SettOption
+          {/* <SettOption
             title='Speed'
             Icon={<RoundedIcon Icon={Rocket01Icon} className='bg-orange-500' />}
             Right={<Txt skeleton={speed === undefined}>{speed?.toFixed(0)} m/s</Txt>}
-          />
+          /> */}
           <SettOption
             title='Timestamp'
             Icon={<RoundedIcon Icon={Timer02Icon} className='bg-accent' />}
             Right={<Txt skeleton={timestamp === undefined}>{new Date(timestamp || 0).toLocaleString()}</Txt>}
           />
         </SettGroup>
         {latitude && longitude && (
-          <SettGroup title='View on Map'>
-            <SettOption
-              title='View on Map'
-              Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-green-500' />}
-              onPress={() =>
-                Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`)
-              }
-              arrow
-            />
-          </SettGroup>
+          <Animated.View layout={layout} entering={FadeIn} exiting={FadeOut}>
+            <SettGroup title='Actions'>
+              <SettOption
+                title='View on Map'
+                Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-green-500' />}
+                onPress={() =>
+                  Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`)
+                }
+                arrow
+              />
+              <SettOption
+                title='Share Location'
+                Icon={<RoundedIcon Icon={Sent02Icon} className='bg-blue-500' />}
+                onPress={() =>
+                  Share.share({
+                    message: shareMessage(latitude || 0, longitude || 0, timestamp),
+                  })
+                }
+                arrow
+              />
+            </SettGroup>
+          </Animated.View>
         )}
       </Gap12>
     </>

src/screens/LocationNotes/LocationDetails.tsx

@@ -1,3 +1,4 @@
+import { getLatitude, getLongitude } from '@utils/utils'
 import { PermissionsAndroid, Platform } from 'react-native'
 import Geolocation from 'react-native-geolocation-service'
 
@@ -22,6 +23,19 @@ 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)
+}
+
 export const requestPermissions = async (): Promise<boolean> => {
   try {
     if (Platform.OS === 'ios') {
@@ -44,3 +58,9 @@ export const requestPermissions = async (): Promise<boolean> => {
     return false
   }
 }
+
+export function shareMessage(latitude: number, longitude: number, timestamp?: number) {
+  const coords = `${getLatitude(latitude)}, ${getLongitude(longitude)}`
+
+  return `📍 I've marked this location ${coords} and want to share it with you!\n\nView on Google Maps: https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`
+}

src/screens/LocationNotes/lib.ts

@@ -0,0 +1,56 @@
+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 { useEffect, useState } from 'react'
+import { View } from 'react-native'
+import Geolocation from 'react-native-geolocation-service'
+
+export default function LocationSpeed() {
+  const [pos, setPos] = useState<Geolocation.GeoPosition | null>(null)
+
+  useEffect(() => {
+    let watchId: number
+
+    const startLocationWatch = async () => {
+      watchId = await watchLocation(
+        (position) => {
+          console.log(position)
+          setPos(position)
+        },
+        (err) => {
+          console.log(err)
+        },
+        {
+          enableHighAccuracy: true,
+          interval: 1000,
+        },
+      )
+    }
+
+    startLocationWatch()
+
+    return () => {
+      if (watchId !== undefined && watchId !== -1) {
+        Geolocation.clearWatch(watchId)
+        Geolocation.stopObserving()
+      }
+    }
+  }, [])
+
+  let speed = pos?.coords.speed || 0
+  let s = speed < 10 ? speed.toFixed(1) : speed.toFixed(0)
+
+  return (
+    <SettWrapper title='Location Speed'>
+      <View className='py-20 pb-16'>
+        <Bold className='text pl-12 text-center' style={{ fontSize: 100, lineHeight: 100 }}>
+          {s}
+          <Bold style={{ fontSize: 30 }}>m/s</Bold>
+        </Bold>
+        <SemiBold className='text text-center text-xl'>Your Speed</SemiBold>
+      </View>
+      <LocationDetails data={pos} />
+    </SettWrapper>
+  )
+}

src/screens/LocationSpeed/LocationSpeed.tsx

@@ -60,7 +60,7 @@ const tools: Group[] = [
       { title: 'Your Age', Icon: Calendar03SolidIcon, to: 'YourAge', className: 'bg-rose-500' },
       { title: 'Random Color', Icon: PaintBoardSolidIcon, to: 'RandomColor', className: 'bg-orange-500' },
       { title: 'Gradient Colors', Icon: ColorsSolidIcon, className: 'bg-green-500' },
-      { title: 'Location Speed Meter', Icon: Rocket01Icon, className: 'bg-yellow-500' },
+      { title: 'Location Speed Meter', Icon: Rocket01Icon, className: 'bg-yellow-500', to: 'LocationSpeed' },
       { title: 'Location Notes', Icon: MapsLocation02SolidIcon, className: 'bg-accent', to: 'LocationNotes' },
       { title: 'Random Password', Icon: LockPasswordSolidIcon, className: 'bg-slate-500', to: 'RandomPassword' },
     ],
@@ -162,4 +162,4 @@ export default function TyrItOut({ navigation }: NavProp) {
 
 function delayedFadeAnimation(search: string, i: number) {
   return FadeIn.duration(250).delay(search.trim().length === 0 ? Math.min((i + 1) * 25, 500) : 20)
-}
+}