CODEWITHSUNDEEP
androidreact-nativereact-native-mapscurrentlocation
Contractor
Contractor

Reputation: 61

react-native get current location

I tried to use react-native-maps and get my current location. I tried to use not only 'react-native-geolocation-service' and '@react-native-community/geolocation'. Map still indicate google HQ maybe in San Francisco. ({"coords": {"accuracy": 20, "altitude": 5, "heading": 0, "latitude": 37.4219983, "longitude": -122.084, "speed": 0}, "mocked": false, "timestamp": 1577294172000})

How can I load my current location in my android emulator(Pixel_2 & Pixel_3). Please answer to me... I've been wrestling for over a week...

Below is my packages. 

  "dependencies": {
    "@react-native-community/geolocation": "^2.0.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-android-location-enabler": "^1.2.0",
    "react-native-geolocation-service": "^3.1.0",
    "react-native-maps": "0.26.1"
  },



import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Alert, TextInput,
  TouchableWithoutFeedback, 
  TouchableHighlight, TouchableOpacity,
  Keyboard, ScrollView, PermissionsAndroid,
} from 'react-native';

import MapView, {Marker}  from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';
// import Geolocation from '@react-native-community/geolocation';
import RNAndroidLocationEnabler from 'react-native-android-location-enabler';

Geolocation.getCurrentPosition(
  (position) => {
      console.log(position);
  },
  (error) => {
      // See error code charts below.
      console.log(error.code, error.message);
  },
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);


export default class App extends Component {


  render() {
    return (

        <View style={styles.container}>


        <MapView

          minZoomLevel={6}
          maxZoomLevel={16}
          // mapType="none"
          style={styles.map}
          initialRegion={{

            // latitude: this.state.location.coords.latitude,
            // longitude: this.state.location.coords.longitude,
            latitude: 37.4219983,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>


               <Marker
          coordinate={{latitude: 37.78825, longitude: -122.4324}}
          title="this is a marker"
          description="this is a marker example"
        />


        </MapView>
        <Text style={styles.SampleHeader}>
             GUDUGUDU ^^  
             </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  SampleHeader: {
    // flex: 3,
    // flexDirection: 'column',
    backgroundColor: '#d9d9d9',
    // width: 90,
    paddingTop: 0,
    paddingBottom: 5,
    marginLeft: 15,
    marginRight: 15,
    marginTop: 5,
    marginBottom: 5,
    textAlign: "center",
    // fontFamily: 'Cochin',
    fontSize: 22,
    fontWeight: '300',
    color: 'black',
    padding: 5,
    borderRadius: 10,
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },


});
'''

Upvotes: 0

Views: 4864

Answers (4)

diazgonza17
diazgonza17

Reputation: 1

For anyone still having this issue, for me it was due to cached position, the maximumAge option sets the amount of milliseconds a possible cached position is acceptable to return, that is by default set to INFINITY.

As for the interface OP posted, you should use the search bar on the embedded map to input a location

First Step:

FirstStep

Then click on "Save Point", and choose a name

Second Step:

SecondStep

Lastly select it from the list of saved points and click on "Set Location"

Third Step:

ThirdStep

After changing the location inside the emulator this answer on react native geolocation for android returning cached position worked for me: stackoverflow.com/a/68464142/1199196

Upvotes: 0

user14453950
user14453950

Reputation: 1

you should first find your initial location through search box. after you find it click on the map to specify your exact location. then press "set Location" button

Upvotes: 0

Contractor
Contractor

Reputation: 61

My emulator user interface in location is not like yours. How can I call that function?

My emulator: Pixel_2

Upvotes: 0

emeraldsanto
emeraldsanto

Reputation: 4741

This is completely normal with Android emulators. They are using the Google HQ location by default, you have to manually input another location in the settings.

First, you have to click on the three dots at the bottom of the side menu next to the emulator:

Then go to the location tab:

You can now change the Latitude and Longitude to the desired values and hit SEND to update the emulator's location.

Upvotes: 0

Related Questions