I’m working with the MapView library from expo ! as you can see in the code everything is logic but it keeps telling me ‘The prop coordinate.latitude
is marked as required in MapMarker
, but its value is undefined
‘ even tho I’m consoling log the event and it’s showing that it is not undefined
"action": "press",
"coordinate": Object {
"latitude": 37.73174790670175,
"longitude": -122.47094504535197,
},
"position": Object {
"x": 352,
"y": 307,
},
}
and this is my code :
const MapScreen = ({ navigation }) => {
const MapRegion = {
latitude: 37.78,
longitude: -122.43,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
const [newCoor, setNewCoor] = useState();
let markerCoordinates;
const selectLocationHandler = (event) => {
console.log("ana", event.nativeEvent);
setNewCoor({
lat: event.nativeEvent.coordinate.latitude,
lng: event.nativeEvent.coordinate.longitude,
});
console.log(newCoor);
};
if (newCoor) {
markerCoordinates = {
latitude: newCoor.latitude,
longitude: newCoor.longitude,
};
}
const savePickedLocationHandler = () => {
if (!newCoor) {
return;
}
navigation.navigate("NewPlaceScreen", { pickedLocation: newCoor });
};
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity
style={{ marginHorizontal: 20 }}
onPress={savePickedLocationHandler}
>
<Text
style={{
fontSize: 19,
fontWeight: "bold",
color: Platform.OS === "android" ? "#C06E00" : "white",
}}
>
Save
</Text>
</TouchableOpacity>
),
});
}, []);
return (
<MapView
style={styles.mapImage}
region={MapRegion}
onPress={selectLocationHandler}
>
{markerCoordinates && <Marker coordinate={markerCoordinates}></Marker>}
</MapView>
);
};
const styles = StyleSheet.create({
mapImage: {
flex: 1,
},
});
export default MapScreen;