CODEWITHSUNDEEP
javascriptandroidreact-nativemobileexpo
Yeo Bryan
Yeo Bryan

Reputation: 429

Setting map region based on current location

i would really appreciate some help with this issue.

Basically i am trying to pass my current latitude and longtitude via var1 and var2 into the coordinates of the initial region. However, upon running this code there will be an error message stating that Warning: Failed prop type: The prop initialRegion.latitude is marked as required in MapView, but its value is undefined.

I have printed out the value of var1 and var2 to console and it can be seen that they are numbers and are definitely not undefined. Can someone please kindly explain to me what is going on and recommend a solution?

import React, { Component } from 'react';
import { Platform, Text, View, StyleSheet,Dimensions } from 'react-native';
import  MapView, { Marker } from 'react-native-maps';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = 
    {
      region : 
      {
        latitude: 1.290270,
        longitude: 103.851959,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02,
      },
      location: null,
      errorMessage : null,

    }
  }
  componentWillMount() {
    if (Platform.OS === 'ios' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
  };

  render() {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.var1, this.var2}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: this.var1,longitude: this.var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Upvotes: 1

Views: 2357

Answers (1)

Filipe
Filipe

Reputation: 884

You haven't defined these var1 and var2 variables. You could define them as class variables (Thus accessing them with this.var1 would work), however it makes more sense to define them directly on the render function.

Also, where you print their values, the Text component expects a string child, where you pass two strings. So, it would be better to join those two strings, either with var1 + var2, or `${var1}${var2}`

  render() {
    let var1;
    let var2;
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{`${var1} ${var2}`}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: var1, longitude: var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }

Upvotes: 2

Related Questions