bramus / bramus/react-native-maps-directions
Cannot read property 'latitude' of undefined
- Dominant language
- JavaScript
- Stars
- 1.3k
- Forks
- 210
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I want to display the user's current location on the map. I'm working on a react-native bear project and I have configured 'react-native-modules' and 'expo-location package' for the bear project. But when I call the 'getLocation' method it does return 'Cannot read property 'latitude' of undefined' the first time. But If I run it again it does return the user's location.
`
import React, {useState, useEffect} from 'react';
import {
StyleSheet,
ScrollView,
View,
Text,
FlatList,
ActivityIndicator,
} from 'react-native';
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
import {Permissions} from 'react-native-unimodules';
import * as Location from 'expo-location';
import Screen from '../../../components/Screen';
import AppText from '../../../components/AppText';
import AppButton from '../../../components/AppButton';
import IconComponent from '../../../components/Icon';
import defaultStyles from '../../../config/style';
const OrderDetailsScreen = ({route}) => {
const {
_id: orderId,
address,
contactNo,
createdOn,
customerId,
orderItems,
orderStatus,
orderType,
shopId,
} = route.params;
const [loading, setLoading] = useState(false);
const [failed, setFailed] = useState(true);
const [orderList, setOrderList] = useState();
let [location, setLocation] = useState();
async function getLocation() {
const result = await Permissions.askAsync(Permissions.LOCATION);
if (!result.granted) return;
const {
coords: {latitude, longitude},
} = await Location.getCurrentPositionAsync({
accuracy:Location.Accuracy.Low
});
setLocation({latitude, longitude});
}
const getOrderList = (orderItems) => {};
useEffect(() => {
getLocation()
}, []);
if (loading === true) {
return (
);
} else if (failed === true) {
Unable to load order details
;
}
return (
Delivery address
{address}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
backgroundColor: defaultStyles.colors.whiteColor,
},
section: {
borderWidth: 1,
borderColor: defaultStyles.colors.lightGrey,
},
subSection: {
flex: 1,
flexDirection: 'row',
},
subSectionText: {
fontSize: 14,
fontWeight: 'bold',
marginLeft: 20,
color: defaultStyles.colors.mediumGrey,
},
address: {
fontSize: 15,
fontWeight: 'bold',
color: defaultStyles.colors.darkGrey,
textAlign: 'justify',
marginVertical: 10,
},
mapContainer: {
width: '100%',
height: 200,
borderWidth:1
},
mapView: {
flex:1
},
});
export default OrderDetailsScreen;
`
Contributor guide
No contributing guide indexed for this repository
Research direction
The affected entry point is OrderDetailsScreen in the supplied snippet; start by tracing the initial location state through the first render and the MapView region and Marker props. Reproduce the first call and verify that completion means the screen no longer reads location.latitude before coordinates exist.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100