How to centre a MapView on a user’s current location when the Map Screen is opened? React Native Expo

How to centre the map to show a user’s current location when the map screen is opened? By following the expo documentation, it should be achieved with Expo Location API? However, the documentation is unclear. I took part of the code from expo Location documentation and implemented it in my Map Screen. So, how should I integrate it in MapView to execute the getCurrentPositionAsync method and centre the map accordingly when the map screen is opened?

import React, { useContext, useState, useEffect } from "react";
import MapView from "react-native-maps";
import styled from "styled-components";
import { Searchbar } from "react-native-paper";
import { View } from "react-native";

import * as Location from 'expo-location';

const Map = styled(MapView)`
height: 100%;
width: 100%;

const SearchBarContainer= styled(View)`
padding: ${(props) =>[3]};
position: absolute;
z-index: 999;
top: 20px;
width: 100%;

export const MapScreen = ({navigation}) => {

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');

      let location = await Location.getCurrentPositionAsync({});
  }, []);

  return (
      <Searchbar placeholder="location"/>
    <Map >

Source: JavaSript – Stack Overflow

November 23, 2021
Category : News
Tags: expo | javascript | react native | react-native-maps | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.