My android app crashes if device's location is turned off when I request permission to get location . how can I fix this? here is my getLocation() function:
getLocation = () => {
try {
navigator
.geolocation
.getCurrentPosition(position => {
const location = JSON.stringify(position);
this.writeItemToStorage(position.coords.latitude,position.coords.longitude);
this.setState({location: location, latitude: position.coords.latitude, longitude: position.coords.longitude});
}, error => Alert.alert(error.message), {
enableHighAccuracy: false,
timeout: 20000,
maximumAge: 10000
});
} catch(e) {
alert(e);
}
}
I set the lat and long in asyncstorage
In our app, we are obtaining the user location when he logs in (click login -> get location -> save location in redux -> navigate to home screen). When the Home component mounts, it should use the location to get data from the area around the user.
In iOS, all markers render correctly but in Android devices, not all markers are rendered, only some of them (and oddly enough all of them are image1 or image2).
It is only when we call the getDataFromRegion function again that all markers render correctly. Any idea of what we are doing wrong?
class Login extends Component {
handleLogin = (u, p) => {
getLocation(location => {
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.06,
longitudeDelta: 0.06
}
/* save location in redux */
this.props.setLocation(region)
login(u, p).then(() => _gotoHome())
})
}
}
class Home extends Component {
componentWillMount() {
if(this.props.location !== undefined) {
initialRegion = {
latitude: this.props.location.latitude,
longitude: this.props.location.longitude,
latitudeDelta: 0.06,
longitudeDelta: 0.06
}
}
}
componentDidMount() {
/* set data in redux */
this.getDataFromRegion(initialRegion)
}
render() {
this.props.data.map((data, index) => data.visible ? <CustomMarker key={index} data={data}/> : null)
}
}
class CustomMarker extends Component {
render() {
const {data} = this.props
const coords = { latitude: data.lat, longitude: data.lng }
return (
<MapView.Marker
coordinate={coords}
onLoad={() => this.forceUpdate()}
tracksViewChanges={Platform.OS === 'android' ? false : true}
>
<Image
onLoad={() => this.forceUpdate()}
source={data.a === '0' ? image1 : image2}
style={{width: 60, height: 60}}
/>
</MapView.Marker>
)
}
}
It seems like removing the Image component and use the MapView.Marker prop image got it working. Also, rendering a dummy MapView.Marker with opacity: 0 inside the MapView solved the problem of appearing the default markers at the first render call.
I am using react-native-maps to show the map
I am getting my current location as follows:
navigator.geolocation.getCurrentPosition(
position => {
region = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: this.state.position.latitudeDelta,
longitudeDelta: this.state.position.longitudeDelta
}
this.setState(
{
position: {
latitude: region.latitude,
longitude: region.longitude,
latitudeDelta: region.latitudeDelta,
longitudeDelta: region.longitudeDelta,
error: null
}
})
})
But some times it showing the before location that I am in
Can any one suggest how to solve this by code
Thank you
You should consider using the parameter 'maximumAge'. e.g.
navigator.geolocation.getCurrentPosition(position => {
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: this.state.position.latitudeDelta,
longitudeDelta: this.state.position.longitudeDelta
}
this.setState(
{
position: {
latitude: region.latitude,
longitude: region.longitude,
latitudeDelta: region.latitudeDelta,
longitudeDelta: region.longitudeDelta,
error: null
}
})
}, err => {
console.log(err)
alert('fetching the position failed')
}, {enableHighAccuracy: false, timeout: 20000, maximumAge: 0})
As per MDN documentation :
The PositionOptions.maximumAge property is a positive long value indicating the maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device must return a cached position regardless of its age.
I have created an android app with CRNA, I can get the current location of the user by Expo's location API. But I can't figure out how to get the city name of a pinned location? This is my code so far:
class Map extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: 41.0141977,
longitude: 28.9638121,
latitudeDelta: 0.1,
longitudeDelta: 0.05,
},
x: {
latitude: 41.0238343,
longitude: 29.0335236,
},
regionName: "",
}
}
onDragEnd(e) {
this.setState({x: e.nativeEvent.coordinate});
}
onRegionChange(region) {
this.setState({region});
}
render() {
return (
<Modal
animationType={"slide"}
transparent={true}
visible={this.props.visible}
onRequestClose={this.props.changeState}
style={styles.modal}
>
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange.bind(this)}
style={styles.map}
><MapView.Marker draggable
coordinate={this.state.x}
onDragEnd={this.onDragEnd.bind(this)}
/></MapView>
</Modal>
);
}
}
For that you need to use some for of geocoding.
In general look at the google maps page about geocoding.
And here is an npm package for react native.
As I googled more and more I learnt it's called reverse geocoding. So I created an redux action like this and it solved my problem very well:
export function fetchCityName(lat, lng) {
const link = `http://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}`;
return dispatch => {
dispatch(startFetch());
return fetch(link)
.then(response => response.json())
.then(responseJson => {
const addressComponent = _.get(responseJson, 'results[0].address_components', []);
const getAreaName = zone => _.get(
addressComponent,
`[${_.findIndex(addressComponent, obj => _.includes(obj.types, zone))}].long_name`
);
const region = ' ' + getAreaName('administrative_area_level_1');
const country = ' ' + getAreaName('country');
const region2 = getAreaName('administrative_area_level_2');
const location = region2 ?
[region2, region, country].toString() :
region.concat(',' + country);
dispatch(getCityName(location));
})
.catch(console.error)
Can anyone confirm if React Native Geolocation is actually working on Android?
I am stuck with location request timed out while using getCurrentPosition() method and no error message while using watchPosition() method.
I have added the required permission (FINE LOCATION) on AndroidManifest.xml and location permission is allowed for the app.
Here is my implementation:
componentWillMount() {
navigator.geolocation.getCurrentPosition((position) => {
console.log('+++++++');
console.log(position.coords.longitude);
this.setState({
longitude: position.coords.longitude,
error: null,
});
},
(error) => {
console.log(error);
},
);
}
React Native Version : 0.42
you need to change enableHighAccuracy to false
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
this.state = {
region:{}}
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
region: {
longitude: position.coords.longitude,
latitude: position.coords.latitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});
},
(error) => console.log(new Date(), error),
{enableHighAccuracy: false, timeout: 10000, maximumAge: 3000}
);
After implementing all above answers
i had to restart my new phone then it started working
Yes, location works perfectly in our React Native apps for Android.
First of all, getCurrentPosition(..) does not return a watchId. You should be using watchPosition(..) for that. Check that your device has location services enabled and if you're testing it in the emulator, that you've set a location in emulator settings. Another note: on Android M and higher, you also need to request permissions using the PermissionsAndroid.check(...) and PermissionsAndroid.request(...) API calls.
Instead of referring to the position object, just deal with the coords object.
navigator.geolocation.getCurrentPosition(
({coords}) => {
const {latitude, longitude} = coords
this.setState({
position: {
latitude,
longitude,
},
region: {
latitude,
longitude,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
}
})
},
(error) => alert(JSON.stringify(error)),
// 'enableHighAccuracy' sometimes causes problems
// If it does, just remove it.
{enableHighAccuracy: true}
)
I had a similar issue to this because I was in a building which resulted to my device not being able to properly capture the gps signals. If you are in a closed building, try moving outside.
My advise to get perfect location data is to create 2 location handlers.
I use react-native-location as a first handler,
if location cant be fetched, we use the second handler using native geolocation.
Never fails, Compability:
IOS - all versions
ANDROID - all above SDK 20
Check the example below:
Configuration
RNLocation.configure({
distanceFilter: 0.5,
desiredAccuracy: {
ios: "best",
android: "highAccuracy"
},
headingOrientation: "portrait",
// Android ONLY
androidProvider: "auto",
interval: 5000, // Milliseconds
fastestInterval: 10000, // Milliseconds
maxWaitTime: 5000, // Milliseconds
// IOS ONLY
allowsBackgroundLocationUpdates: false,
headingFilter: 1, // Degrees
pausesLocationUpdatesAutomatically: false,
showsBackgroundLocationIndicator: false,
})
Function getUserLocation
static getUserLocation = async () => {
let locationSubscription: any = null
let locationTimeout: any = null
const options = { enableHighAccuracy: true, timeout: 25000 }
return new Promise<any>((resolve, reject) => {
// request permissions using RN Location
RNLocation.requestPermission({
ios: "whenInUse",
android: {
detail: "fine"
}
}).then(granted => {
console.log("Location Permissions: ", granted)
// if has permissions try to obtain location with RN location
if (granted) {
locationSubscription && locationSubscription()
locationSubscription = RNLocation.subscribeToLocationUpdates(([locations]: any) => {
locationSubscription()
locationTimeout && clearTimeout(locationTimeout)
console.log("location fetched with RN Geolocation")
resolve({ coords: { latitude: locations.latitude, longitude: locations.longitude }})
})
} else {
locationSubscription && locationSubscription()
locationTimeout && clearTimeout(locationTimeout)
console.log("no permissions to obtain location")
resolve(null)
}
// if RN Location cant resolve the request use Native Location instead
locationTimeout = setTimeout(() => {
navigator.geolocation.getCurrentPosition((locations) => {
locationSubscription()
locationTimeout && clearTimeout(locationTimeout)
console.log("location fetched with Native Geolocation")
resolve(locations)
}, error => {
locationSubscription && locationSubscription()
locationTimeout && clearTimeout(locationTimeout)
console.log("location error", error)
resolve(null)
}, options);
}, 15000)
})
})
}
cd android
gradlew clean
dependencies
"react-native": "0.62.0",
"#react-native-community/geolocation": "^2.0.2",
Better if you try this code, I have tested in Android OS 8, RN 0.49.5
React Native current location
the trick is to set
{ enableHighAccuracy: true, timeout: 25000, maximumAge: 3600000 }