How to assign / access data from Mobx in React Native? - reactjs

Question

I am currently using mobx and react native, I have created the files below where a user can get their geo location. The questions I have are:
In the function fetchLocation is this the correct way of assigning the returned position? (In terms of mobx best practice)
In fetchLocation how can I console log geo as I have tried and I get undefined.
In LocationScreen.js I am trying to access the value for geo how can I do this? I am able to run the fetchLocation function fine.
How can I do something similar to this -
{this.props.store.geo ? Retrieved Geo Location : null}
Thanks in advance
LocationStore.js:
import { observable, action, computed } from 'mobx'
class LocationStore{
#observable geo = [];
#action fetchLocation() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude, position.coords.longitude);
this.geo = {
lat: position.coords.latitude
}
console.log(this.geo);
},
(error) => this.error= {error},
{ enableHighAccuracy: false, timeout: 20000 },
);
}
}
export default new LocationStore()
LocationScreen.js

Answer 1

The clear concern here, is your use of #action without promise! I would suggest to ditch #action and #computed and just go for a stateless solution:
LocationStore.js:
import {observable} from 'mobx'
class LocationStore {
#observable geo = {};
#observable error = {};
#observable isLoading = false;
async fetchLocation() {
this.isLoading = true;
try {
await navigator.geolocation.getCurrentPosition((position) => {
this.geo = {
lat: position.coords.latitude
}
this.isLoading = false;
}
);
} catch (e) {
this.error = e
this.isLoading = false;
}
}
}
export default new LocationStore()
component.js
async fetchLocation(){
await this.props.LocationStore.fetchLocation();
}
render () {
const { geo, error, isLoading } = this.props.LocationStore
return (<View>
<Button onPress={this.fetchLocation.bind(this)}></Button>
{(!!isLoading)?<Text>{geo}</Text>:<Text>Loading</Text>}
</View>)
}
Check-out 'async / await' for more information:
https://mobx.js.org/best/actions.html