Open VihagaYohan opened 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, }}>
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 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', }}>
}
return (
); };
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;
`