Search code examples
react-nativeaxiosreact-native-maps

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

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": "[email protected]",
      "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\":\"[email protected]\",\"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. enter image description here

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.

Solution

  • 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'.