Jeremy Delhaie Jeremy Delhaie - 9 days ago 7
Javascript Question

Warning: failed prop type: Required prop 'region.latitude' was not specified

I have a problem but I don't know if it's linked to this.

When I'm running my map on Android Emulator from Android Studio, I have this warning and I'm geolocate on Google plex on Palo alto and not on my actual geolocation. Is it because I use an emulator or not ?

Here is my code if you want to check :

Map.js

import React, { Component } from 'react';
import Geolocation from '../geolocation/Geolocation';
import Shops from '../shops/Shop';
import {
Text,
View
} from 'react-native';
import MapView from 'react-native-maps';
import styles from './Style';

class Map extends Geolocation {

render() {
return (
<View>
<MapView style={styles.map}
region={{
latitude: this.state.position.coords.latitude,
latitudeDelta: 0.001,
longitude: this.state.position.coords.longitude,
longitudeDelta: 0.001
}} />
<Shops />
</View>
);
}
}

export default Map;


Geolocation.js

import React, { Component } from 'react';
import styles from './Style';

class Geolocation extends Component {

constructor(props) {
super(props);
this.state = {
position : {
coords: {}
}
}
}

componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({position});
},
(error) => alert(error.message),
{enableHighAccuracy: true, timeout: 20000}
);
navigator.geolocation.watchPosition((position) => {
this.setState({position});
});
}
}

export default Geolocation;


Thanks for your answer if you have any ideas, I am a little bit lost with this issue.

Answer

I believe it's because you're assigning out the MapView coordinates from this.state.position.cords object, which on initial render will be undefined for cords.latitude and cords.longitude, thus throwing the propTypes warning.

Initialize them in the constructor to avoid this.

constructor(props) {
    super(props);
    this.state = {
        position : {
            coords: {
              latitude: 0,
              longitude: 0
            }
        }
    }
}
Comments