TaskManager.defineTaskをMain画面に戻し&Zustandのアクションで位置保存

index.js

@@ -1,7 +1,11 @@
 import 'fast-text-encoding'
 
 import { registerRootComponent } from 'expo'
+import * as TaskManager from 'expo-task-manager'
 import App from './src'
+import { locationTaskName } from './src/utils/locationTaskName'
+
+TaskManager.unregisterTaskAsync(locationTaskName).catch(console.debug)
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in the Expo client or in a native build,

src/hooks/useLocationStore.ts

@@ -2,3 +2,18 @@ import { LocationObject } from 'expo-location'
 import { create } from 'zustand'
 
 export const useLocationStore = create<LocationObject | null>(() => null)
+
+export const setLocation = (location: LocationObject) =>
+  useLocationStore.setState((state) => {
+    if (!state) {
+      return location
+    }
+
+    const { latitude: inputLat, longitude: inputLon } = location.coords
+    const { latitude: stateLat, longitude: stateLon } = state.coords
+    if (inputLat === stateLat && inputLon === stateLon) {
+      return state
+    }
+
+    return location
+  })

src/hooks/useStartBackgroundLocationUpdates.ts

@@ -1,4 +1,5 @@
 import * as Location from 'expo-location'
+import * as TaskManager from 'expo-task-manager'
 import { useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { autoModeEnabledSelector } from '../store/selectors/autoMode'
@@ -23,7 +24,7 @@ export const useStartBackgroundLocationUpdates = () => {
     })
 
     return () => {
-      Location.stopLocationUpdatesAsync(locationTaskName)
+      TaskManager.unregisterTaskAsync(locationTaskName)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

src/index.tsx

@@ -3,7 +3,6 @@ import remoteConfig from '@react-native-firebase/remote-config'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import * as Location from 'expo-location'
-import * as TaskManager from 'expo-task-manager'
 import React, { ErrorInfo, useCallback, useEffect, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ActivityIndicator, StatusBar, StyleSheet, Text } from 'react-native'
@@ -12,41 +11,11 @@ import ErrorFallback from './components/ErrorBoundary'
 import FakeStationSettings from './components/FakeStationSettings'
 import TuningSettings from './components/TuningSettings'
 import useAnonymousUser from './hooks/useAnonymousUser'
-import { useLocationStore } from './hooks/useLocationStore'
 import useReport from './hooks/useReport'
 import PrivacyScreen from './screens/Privacy'
 import SavedRoutesScreen from './screens/SavedRoutesScreen'
 import MainStack from './stacks/MainStack'
 import { setI18nConfig } from './translation'
-import { locationTaskName } from './utils/locationTaskName'
-
-TaskManager.defineTask(
-  locationTaskName,
-  ({
-    data,
-    error,
-  }: {
-    data: { locations: Location.LocationObject[] }
-    error: TaskManager.TaskManagerError | null
-  }) => {
-    if (error) {
-      console.error(error)
-      return
-    }
-
-    const state = useLocationStore.getState()
-    const stateLat = state?.coords.latitude
-    const stateLon = state?.coords.longitude
-
-    if (
-      stateLat !== data.locations[0]?.coords.latitude &&
-      stateLon !== data.locations[0]?.coords.longitude
-    ) {
-      useLocationStore.setState(data.locations[0])
-    }
-  }
-)
-TaskManager.unregisterTaskAsync(locationTaskName)
 
 const Stack = createStackNavigator()
 

src/screens/Main.tsx

@@ -2,6 +2,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { useNavigation } from '@react-navigation/native'
 import { useKeepAwake } from 'expo-keep-awake'
 import * as Linking from 'expo-linking'
+import { LocationObject } from 'expo-location'
+import * as TaskManager from 'expo-task-manager'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import {
   Alert,
@@ -22,6 +24,7 @@ import { ASYNC_STORAGE_KEYS } from '../constants'
 import useAutoMode from '../hooks/useAutoMode'
 import { useCurrentLine } from '../hooks/useCurrentLine'
 import { useCurrentStation } from '../hooks/useCurrentStation'
+import { setLocation } from '../hooks/useLocationStore'
 import { useLoopLine } from '../hooks/useLoopLine'
 import { useNextStation } from '../hooks/useNextStation'
 import useRefreshLeftStations from '../hooks/useRefreshLeftStations'
@@ -42,6 +45,24 @@ import { translate } from '../translation'
 import getCurrentStationIndex from '../utils/currentStationIndex'
 import { getIsHoliday } from '../utils/isHoliday'
 import getIsPass from '../utils/isPass'
+import { locationTaskName } from '../utils/locationTaskName'
+
+TaskManager.defineTask(
+  locationTaskName,
+  ({
+    data,
+    error,
+  }: {
+    data: { locations: LocationObject[] }
+    error: TaskManager.TaskManagerError | null
+  }) => {
+    if (error) {
+      console.error(error)
+      return
+    }
+    setLocation(data.locations[0])
+  }
+)
 
 const { height: windowHeight } = Dimensions.get('window')