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

Tijs Martens Tijs Martens · Accepted Answer · 2021-01-10T11:34:56

You can pass children the MapboxGL.Mapview.

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

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

2 Answers