bramus / react-native-maps-directions

Directions Component for `react-native-maps`
MIT License
1.25k stars 197 forks source link

Cannot read property 'latitude' of undefined #159

Open VihagaYohan opened 3 years ago

VihagaYohan commented 3 years ago

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 ( <Screen style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}> <ActivityIndicator animating={loading} size="small" color={defaultStyles.colors.primaryColor} /> ); } else if (failed === true) { <Screen style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>

Unable to load order details
</Screen>;

}

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;

`

MadhavNasit commented 3 years ago

Put MapView with this condition, may be this solve your issue. {location != undefined ? <MapView style={styles.mapView} provider={PROVIDER_GOOGLE} region={{ latitude: location.latitude, longitude: location.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }}>

: null // Here you can add activity loader }