React Native : Warning: Failed prop type: Invalid prop `coordinate` of type `number` supplied to `MapMarker`, expected `object` - react-native

Question

I'm building my first app, a city guide app.
I'm still very new to React Native and I'm having a problem with react-native-maps (I think).
I'm trying to get the markers that show up on the map to come from my database via Axios queries
This is my Axios :
import axios from 'axios';
// URL API BASE
const APIURL = 'http://10.22.101.55:5000/api';
// RECUPERATION DES RESTAURANTS
export const getAllRestaurant = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/restaurant`, {
nom: nom,
adresse: adresse,
ville: ville,
cp: cp,
telephone: telephone,
email: email,
latitude: latitude,
longitude: longitude
});
I had to change the URL of my call otherwise I received a Network Error type error
(Localhost -> 10.22.101.55)
My page where I call Axios :
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
// Récupération des données
import {getAllRestaurant} from '../service/emplacements'
export default function AccueilScreen() {
// RECUPERATION DES RESTAURANTS
const [restaurants, setRestaurants] = React.useState([])
const LesRestaurants = () => [
getAllRestaurant().then(response => {
setRestaurants(response.data);
console.log(response);
}).catch(err => console.log('API :' + err))
]
// CHARGEMENT DES RESTAURANTS
useEffect(() => {
LesRestaurants()
},[])
return (
<View style={styles.container}>
<MapView
scrollEnabled={false}
rotateEnabled={false}
zoomEnabled={false}
minZoomLevel={0}
maxZoomLevel={13}
style={styles.map}
region={{
latitude: 49.4826616,
longitude: 1.7245633,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
{restaurants.map((restaurant) => (
<Marker
key={restaurant.id}
coordinate={restaurant.latitude, restaurant.longitude}
title={restaurant.nom}
/>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: '100%',
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
And this what I got in the console :
Object {
"config": Object {
"adapter": [Function xhrAdapter],
"data": undefined,
"headers": Object {
"Accept": "application/json, text/plain, */*",
},
"maxBodyLength": -1,
"maxContentLength": -1,
"method": "get",
"timeout": 0,
"transformRequest": Array [
[Function transformRequest],
],
"transformResponse": Array [
[Function transformResponse],
],
"url": "http://10.22.101.55:5000/api/restaurant",
"validateStatus": [Function validateStatus],
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
},
"data": Array [
Object {
"adresse": "17 Rue de la France",
"cp": 76220,
"createdAt": "2021-05-10T07:41:25.000Z",
"email": "lerestaurant#gmail.com",
"id": 1,
"latitude": 49.4813,
"longitude": 1.73745,
"nom": "Le Restaurant",
"telephone": "0685459547",
"updatedAt": "2021-05-10T07:41:25.000Z",
"ville": "Gournay",
},
],
"headers": Object {
"cache-control": "public, max-age=0",
"connection": "keep-alive",
"content-length": "268",
"content-type": "application/json; charset=utf-8",
"date": "Mon, 10 May 2021 08:14:35 GMT",
"etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"keep-alive": "timeout=5",
"x-powered-by": "Express",
},
"request": XMLHttpRequest {
"DONE": 4,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"OPENED": 1,
"UNSENT": 0,
"_aborted": false,
"_cachedResponse": undefined,
"_hasError": false,
"_headers": Object {
"accept": "application/json, text/plain, */*",
},
"_incrementalEvents": false,
"_lowerCaseResponseHeaders": Object {
"cache-control": "public, max-age=0",
"connection": "keep-alive",
"content-length": "268",
"content-type": "application/json; charset=utf-8",
"date": "Mon, 10 May 2021 08:14:35 GMT",
"etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"keep-alive": "timeout=5",
"x-powered-by": "Express",
},
"_method": "GET",
"_perfKey": "network_XMLHttpRequest_http://10.22.101.55:5000/api/restaurant",
"_requestId": null,
"_response": "[{\"id\":1,\"nom\":\"Le Restaurant\",\"adresse\":\"17 Rue de la France\",\"ville\":\"Gournay\",\"cp\":76220,\"telephone\":\"0685459547\",\"email\":\"lerestaurant#gmail.com\",\"latitude\":49.4813,\"longitude\":1.73745,\"createdAt\":\"2021-05-10T07:41:25.000Z\",\"updatedAt\":\"2021-05-10T07:41:25.000Z\"}]",
"_responseType": "",
"_sent": true,
"_subscriptions": Array [],
"_timedOut": false,
"_trackingName": "unknown",
"_url": "http://10.22.101.55:5000/api/restaurant",
"readyState": 4,
"responseHeaders": Object {
"Cache-Control": "public, max-age=0",
"Connection": "keep-alive",
"Content-Length": "268",
"Content-Type": "application/json; charset=utf-8",
"Date": "Mon, 10 May 2021 08:14:35 GMT",
"ETag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
"Keep-Alive": "timeout=5",
"X-Powered-By": "Express",
},
"responseURL": "http://10.22.101.55:5000/api/restaurant",
"status": 200,
"timeout": 0,
"upload": XMLHttpRequestEventTarget {},
"withCredentials": true,
},
"status": 200,
"statusText": undefined,
}
And the error message in the console + the error display
Warning: Failed prop type: Invalid prop coordinate of type number
supplied to MapMarker, expected object.
For me, the error is made because of the coordinate that I give to <Marker/>
Thanks in advance for your help and your time !
EDIT : The error is truly coming from coordinate, when I give manually the latitude and longitude, everything is working just fine.

Answer 1

The solution was to change :
coordinate={restaurant.latitude, restaurant.longitude}
to
coordinate={{latitude: restaurant.latitude, longitude: restaurant.longitude}}
the error was due to my syntax which was bad.
I was not giving latitude and longitude correctly to the coordinate prop.
And Coordinate cannot be 'null' or 'undefine'.