How to get current location using react-native-maps

Question

Im trying to render a map at the current user geolocation on android device, using react-native maps.

Here is what i've got so far:

import React, { Component } from 'react';

import {
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';

import MapView from 'react-native-maps';

const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

class MapComponent extends Component {
  constructor() {
    super()
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }

      this.setState({initialPosition: initialRegion})
    },
    (error) => alert(JSON.stringify(error)),
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
  }


  renderScreen = () => {
      return (
        <View style={styles.container}>
          <MapView
            style={styles.map}
            initialRegion={this.state.initialPosition}/>
        </View>
      );
  }

  render() {
    return (
      this.renderScreen()
    );
  }
}

const styles = StyleSheet.create({
  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,
  },
});

export default MapComponent;

The map renders, but not in current device geolocation, as expected. (it renders in the middle of the ocean)

The permissions are already set at AndroidManifest.xml as:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

After 20 seconds, i get an alert saying, "Location request timed out" "code 3"

What i'm doing wrong?

Geolocation.getCurrentPosition((info) => { let lat = info.coords.latitude; let long = info.coords.longitude; console.log(lat); console.log(long); var initialRegion = { latitude: lat, longitude: long, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }; this.setState({ initialPosition: initialRegion }); }); — GUGAN RAJ
– GUGAN RAJ, Commented Jan 18, 2022 at 11:28

Mikhail Aksenov · Accepted Answer · 2017-11-29 17:42:53Z

8

I'm not sure but there is an issue ("Geolocation timed out, code 3") which looks related

For anyone else struggling with this issue on android, try removing the maximumAge: 2000 option parameter. This option was causing geolocation to either timeout or crash the app.

answered Nov 29, 2017 at 17:42

Mikhail Aksenov

9349 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ErTR · Accepted Answer · 2024-07-21 04:32:26Z

7

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

const App = () => {
  const [position, setPosition] = useState({
    latitude: 10,
    longitude: 10,
    latitudeDelta: 0.001,
    longitudeDelta: 0.001,
  });

useEffect(() => {
  Geolocation.getCurrentPosition((pos) => {
    const crd = pos.coords;
    setPosition({
      latitude: crd.latitude,
      longitude: crd.longitude,
      latitudeDelta: 0.0421,
      longitudeDelta: 0.0421,
    });
  },(err) => {
    console.log(err);
  });
}, []);

  return (
    <MapView
      style={styles.map}
      initialRegion={position}
      showsUserLocation={true}
      showsMyLocationButton={true}
      followsUserLocation={true}
      showsCompass={true}
      scrollEnabled={true}
      zoomEnabled={true}
      pitchEnabled={true}
      rotateEnabled={true}>
       <Marker
       title='Yor are here'
       description='This is a description'
       coordinate={position}/>
       </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});


export default App;

edited Jul 21, 2024 at 4:32

ErTR

9151 gold badge15 silver badges41 bronze badges

answered Apr 27, 2022 at 6:51

Thaiyalnayaki

1671 silver badge8 bronze badges

1 Comment

gsm Over a year ago

this is working. also add permissions <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

itsmysterybox · Accepted Answer · 2018-10-28 08:25:12Z

1

It's working perfectly in mine. Only change I made was in StyleSheet.

container: {
    position: 'absolute',
    height : SCREEN_HEIGHT,
    width : SCREEN_WIDTH,
    justifyContent: 'flex-end',
    alignItems: 'center',
}

Thereafter, it renders my location. You can add marker after that to show your location.

edited Oct 28, 2018 at 8:25

itsmysterybox

2,8764 gold badges25 silver badges27 bronze badges

answered Oct 28, 2018 at 7:55

Harsh Vishnoi

511 silver badge4 bronze badges

Comments

Henfs · Accepted Answer · 2020-04-13 11:31:27Z

0

navigator.geolocation.getCurrentPosition() is deprecated.
Use @react-native-community/geolocation instead.

npm install @react-native-community/geolocation --save

edited Apr 13, 2020 at 11:31

Henfs

5,46912 gold badges33 silver badges48 bronze badges

answered Apr 13, 2020 at 11:10

Kavidu Aloka Kodikara

3295 silver badges22 bronze badges

2 Comments

ggDeGreat Over a year ago

react-native-geolocation-service is much better

Daniel Danielecki Over a year ago

@react-native-community/geolocation seems to be deprecated, upvote for @ggDeGreat.

zachee · Accepted Answer · 2020-08-20 10:49:21Z

-1

1.npm install @react-native-community/geolocation --save
2.import Geolocation from '@react-native-community/geolocation';
3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition

edited Aug 20, 2020 at 10:49

answered Aug 20, 2020 at 10:44

zachee

1671 silver badge5 bronze badges

1 Comment

Gregor Koukkoullis Over a year ago

It would be nice if you could explain in a little more detail how your described step help answering the question.

GUGAN RAJ · Accepted Answer · 2022-01-18 11:25:42Z

import React, { Component } from "react";
// global.currentScreenIndex = 'Dashboard';
//Import all required component
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  TouchableHighlight,
  StatusBar,
  FlatList,
  ActivityIndicator,
  Button,
  NetInfo,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geolocation from "@react-native-community/geolocation";

const MyStatusBar = ({ backgroundColor, ...props }) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);
   

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    Geolocation.getCurrentPosition((info) => {
      let lat = info.coords.latitude;
      let long = info.coords.longitude;

      console.log(lat);
      console.log(long);
      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      };
      this.setState({ initialPosition: initialRegion });
    });
  }

  render() {
    const { modalVisible } = this.state;
    const { navigate } = this.props.navigation;
    // const token_data = token_value();
    // console.log("token_homes_2st"+token_data);

    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={this.state.initialPosition}
          showsUserLocation={true}
        />
      </View>
    );
  }
}
export default Dashboard;

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    fontWeight: "400",
    color: "#000",
    fontFamily:
      "Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
  },

  map: {
    height: 400,
    width: 400,
    justifyContent: "flex-end",
    alignItems: "center",
  },
});

Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post.

Collectives™ on Stack Overflow

How to get current location using react-native-maps

6 Answers 6

Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related