How to get the user location in react-native-mapbox-gl?

Question

i'm using react-native-mapbox-gl to show the map in my react app, on page load it should show the location of the user like how the google maps shows, but it fails to show instead it will show some other region of the map,

Can someone help?

Thanks in advance.

here is the snippet

import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  componentDidMount() {
    MapboxGL.setTelemetryEnabled(false);
  }

  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
          <MapboxGL.UserLocation />
        </View>
      </View>
    );
  }
}

@sv12 thats for reactjs right?? i want in react native. – Deekshith MR Mar 02 '20 at 07:17 — Deekshith MR, Mar 02 '20 at 07:17
Check my edit , You might get an idea – joy08 Mar 02 '20 at 07:31 — joy08, Mar 02 '20 at 07:31
which platform are you facing problem ? – Khurshid Ansari Mar 27 '20 at 10:03 — Khurshid Ansari, Mar 27 '20 at 10:03

score 4 · Answer 1 · answered Jan 10 '21 at 11:34

4

You can pass children the MapboxGL.Mapview.

<MapboxGL.MapView style={styles.map}>
  <MapboxGL.UserLocation/>
</MapboxGL.MapView>

answered Jan 10 '21 at 11:34

Tijs Martens

266
2
10

1

Can you give more info? What can I do? It's not worked for me ... – Mohammad Reza Oct 28 '21 at 11:38
1

Spent a day trying to debug this, turns out it was working the whole time but I was looking at the wrong part of the map. The simulator's location was in San Fransisco, I'm in the UK. – rsedlr Jan 13 '23 at 11:36

joy08 · Answer 2 · 2020-03-02T07:30:40.640

1

Check this article that shows how to display user location marker using Marker component.

https://github.com/react-native-mapbox-gl/maps/issues/227

https://github.com/react-native-community/react-native-maps/blob/master/docs/marker.md

react-native mapbox is not showing user location and annotation

edited Mar 02 '20 at 07:30

answered Mar 02 '20 at 07:17

joy08

9,004
8
38
73

score 0 · Answer 3 · answered Mar 16 '22 at 09:47

For me, it works(was showing the wrong location as of now):

<MapboxGL.MapView style={styles.map} zoomEnabled logoEnabled={false}>
  <MapboxGL.UserLocation visible={true} />
</MapboxGL.MapView>

For more information you can refer to official docs.

https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/MapView.md https://github.com/rnmapbox/maps/blob/main/docs/UserLocation.md

P.S: MapboxGL.MapView has one props showUserLocation but it seems now working now, I also tried several other props as mentioned in docs they are also not working, look docs are not updated!!

How to get the user location in react-native-mapbox-gl?

3 Answers3