Failed prop type: Invalid prop `region.latitude` of type `string` supplied to `MapView`, expected `number`

Question

I'm using react-native 0.61 and I got two files. As you can see below I'm passing location from FethcLocation.js to app.js file and assign it as a location object. Then I pass down it to the userMaps.js file and assign it to longitude and latitude values. but I'm getting an error saying...

Warning: Failed prop type: Invalid prop region.latitude of type string supplied to MapView, expected number.

FetchLocation.js

import React from 'react';
import {View} from 'react-native';
navigator.geolocation = require('@react-native-community/geolocation');

class FetchLocation extends React.Component {
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.props.setLocation(position);
      },
      error => {
        console.log(error);
      },
      {enableHighAccuracy: false, timeout: 20000, maximumAge: 10000},
    );
  }

  render() {
    return <View></View>;
  }
}

export default FetchLocation;

app.js

import React from 'react';
import {Button} from 'react-native';
import FetchLocation from './components/FetchLocation';
import UserMaps from './components/UserMaps';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: {lat: '', lon: ''},
      showTraffic: 'false',
    };
  }

  assignLocation = props => {
    this.setState({
      location: {
        lat: props.coords.latitude,
        lon: props.coords.longitude,
      },
    });
  };

  manageTraffic = () => {
    this.setState({
      showTraffic: 'true',
    });
    console.log(this.state.showTraffic);
  };

  render() {
    return (
      <>
        <Button title="Traffic" onPress={this.manageTraffic}></Button>
        <FetchLocation setLocation={this.assignLocation} />
        <UserMaps mapData={this.state} />
      </>
    );
  }
}

export default App;

userMaps.js

import React from 'react';
import {View, StyleSheet} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const UserMaps = props => {
  const {location, showTraffic} = props.mapData;

  return (
    <View style={styles.mapContainer}>
      <MapView
        provider={PROVIDER_GOOGLE}
        showsUserLocation={true}
        showsCompass={true}
        showsBuildings={false}
        showsTraffic={true}
        showsIndoors={true}
        style={styles.map}
        region={{
          latitude: location.lat,
          longitude: location.lon,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}>
        {/* <MapView.Marker coordinate={(location.lat + 2, location.lon + 2)} /> */}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  mapContainer: {
    width: '100%',
    height: '100%',
  },

  map: {
    height: '100%',
    width: '100%',
  },
});

export default UserMaps;

Have you checked in the console the type of the props passed down? If they look like "0.567263" (the quotes count in this case) then it's a string - you may convert them to numbers by something like Number(location.lat), but pay attention to errors like NaN. — muka.gergely
I just console log the values. It's like this 2.8596752 probably not a string. — nipunravisara

natanfoleto natanfoleto · Accepted Answer · 2020-10-19T10:20:49

Add Number() before the variables, like this:

region={{
      latitude: Number(location.lat),
      longitude: Number(location.lon),
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121,
    }}>

or

<MapView.Marker coordinate={(
   Number(location.lat) + 2, 
   Number(location.lon) + 2
 )} />

Failed prop type: Invalid prop `region.latitude` of type `string` supplied to `MapView`, expected `number`

1 Answers