CODEWITHSUNDEEP
javascriptreactjsreact-native
Jeremy Delhaie
Jeremy Delhaie

Reputation: 33

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.

Upvotes: 0

Views: 5602

Answers (4)

mr_a_top
mr_a_top

Reputation: 81

initialRegion={{
   longitude: origin ? origin.longitude : 0,
   latitude: origin ? origin.latitude : 0,
}}

Just set it to 0 when not available

Upvotes: 1

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

Problem in only Android

Solution :-

<MapView 
  initialRegion={{
    latitude: Number(letitude),
    longitude: Number(longitude),
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }}
>

Number(your let and long) it will convert in number

Upvotes: 1

BradByte
BradByte

Reputation: 11093

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
            }
        }
    }
}

Upvotes: 1

peterp
peterp

Reputation: 3165

The latitude and longitude can be changed.

Launch Android Device Monitor from Android Studio (Tools -> Android -> Android Device Monitor)

Switch to the Emulator Control Tab and change it in Location Controls group. enter image description here

Upvotes: 0

Related Questions