bramus / bramus/react-native-maps-directions

Cannot read property 'latitude' of undefined

Open
#159 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.