Hello all,
I would appreciate any guidance you might have regarding this topic, thank you in advance.
Here is my situation:
I have set up TaskManager
to track the location
of the device it is running on, which is working great. Where I am struggling is getting the data
returned by TaskManager
into my App
component as state
. Here is a simplified example of my issue:
class App extends Component {
state = {}
// 'this' does not exist within a static method.
static updateState = (data) => this.setState(data)
render = () => { return <div>...</div> }
}
TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
const { locations } = data // How can I get locations into state?
App.updateState(locations) // Won't work as I can't use 'this' within a static method!
})
The actual file looks like this:
/* eslint-disable react/prop-types */
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import * as Location from 'expo-location'
import * as TaskManager from 'expo-task-manager'
import * as Permissions from 'expo-permissions'
const LOCATION_TASK_NAME = 'background-location-task'
export default class App extends React.Component {
state = {
latitude: 0,
longitude: 0,
}
static updateState(latitude, longitude) {
// updateState receives the data correctly, I just can't
// work out how to update the component state with values.
console.log(latitude, longitude)
// this.setState({ latitude, longitude }) // Doesn't work
}
notStaticUpdateState(latitude, longitude) {
// console.log(latitude, longitude) // won't work
}
async componentDidMount() {
const { status } = await Permissions.askAsync(
Permissions.LOCATION,
Permissions.USER_FACING_NOTIFICATIONS,
)
if (status === 'granted') {
await Location.startLocationUpdatesAsync(
LOCATION_TASK_NAME,
{
accuracy: Location.Accuracy.Highest,
distanceInterval: 1,
timeInterval: 1000,
},
)
}
}
render() {
const { latitude, longitude } = this.state
return (
<View style={styles.container}>
<Text>Lat: {latitude}</Text>
<Text>Lng: {longitude}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
})
TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
if (error) {
return
}
if (data) {
const { latitude, longitude } = data.locations[0].coords
App.updateState(latitude, longitude)
// App.notStaticUpdateState(latitude, longitude) // won't work
}
})