Facing issue while using google map api in my application building with react native expo

Issue

I am making an application in which I am using google map. The map should show the user's current location through latitude longitude when we open the app. But It's not showing the current location of user.

Here is the code of googleMapView Component -

import { View, Text, StyleSheet } from 'react-native'
import React, { useContext, useEffect, useState } from 'react'
import MapView,{PROVIDER_GOOGLE} from "react-native-maps"
import { Dimensions } from 'react-native'
import { UserLocationContext } from '../../Context/UserLocationContext'

export default function GoogleMapView() {

    const [mapRegion,setmapRegion]=useState([])
    // const {location}=useContext(UserLocationContext)
    const {location,setLocation}=useContext(UserLocationContext)

    useEffect(()=>{
      if(location){
        console.log("User location", location)
        // console.log("1234")
        setmapRegion({
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
          latitudeDelta: 0.0522,
          longitudeDelta: 0.0421,
        })
      }
    },[])

  return (
    <View style={{marginTop:20}}>
      <Text style={styles.text}>Top Near By Places</Text>
      <View style={styles.container}>
        <MapView style={styles.map}
        showsUserLocation={true}
        provider={PROVIDER_GOOGLE}
        region={mapRegion}
        ></MapView>
    </View>
    </View>
  )
}

const styles=StyleSheet.create({
    map:{
        width:Dimensions.get("screen").width*0.93,
        height:Dimensions.get("screen").height*0.23,
        alignSelf:"center",
    },
    container:{
        borderRadius:20,
        overflow:"hidden"
    },
    text:{
      fontWeight:"bold",
      fontSize:16,
      marginBottom:10
    }
})

UserLocationContext code -

import { createContext } from "react";

export const UserLocationContext=createContext(null)

GoogleMapView component is rendered inside home that is inside tabNavigation and tabNavigation is inside App.js

App.js file-

import { StyleSheet, Text, View, StatusBar ,SafeAreaView} from 'react-native';
import TabNavigation from './App/Navigations/TabNavigation';
import { NavigationContainer } from '@react-navigation/native';
import * as Location from 'expo-location';
import { useState,useEffect} from 'react';
import { UserLocationContext } from './App/Context/UserLocationContext';
import GoogleMapView from './App/Components/Home/GoogleMapView';

export default function App() {
  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');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      // console.log(location)
    })();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <UserLocationContext.Provider 
      value={{location,setLocation}}>
      <NavigationContainer>
        <TabNavigation/>
      </NavigationContainer>
      </UserLocationContext.Provider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

TabNavigation.js-

import { View, Text } from 'react-native'
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import Home from '../Screen/Home';
import Profile from '../Screen/Profile';
import Search from '../Screen/Search';
import Favorite from '../Screen/Favorite';
import { Ionicons, Feather , MaterialIcons, FontAwesome} from '@expo/vector-icons';

const Tab=createBottomTabNavigator();

export default function TabNavigation() {
  return (
        <Tab.Navigator screenOptions={{
          tabBarActiveBackgroundColor:"#97a9b3",
          tabBarActiveTintColor:"white",
          headerShown:false,
        }}>
            <Tab.Screen name='Home' component={Home} options={{
              tabBarIcon:({color,size})=>(
                <Ionicons name="home" size={size} color={color} />
              )
            }}/>
            <Tab.Screen name='Search' component={Search} options={{
              tabBarIcon:({color,size})=>(
                <Feather name="search" size={size} color={color}/>
              )
            }}/>
            <Tab.Screen name='Favorite' component={Favorite} options={{
              tabBarIcon:({color,size})=>(
                <MaterialIcons name="favorite-border" size={size} color={color} />
              )
            }}/>
            <Tab.Screen name='Profile' component={Profile} options={{
              tabBarIcon:({color,size})=>(
                <FontAwesome name="user" size={size} color={color} />
              ),
            }}/>
        </Tab.Navigator>
  )
}

Home.js-

import { View, Text } from 'react-native'
import React from 'react'
import Header from '../Components/Home/Header'
import { SafeAreaView } from 'react-native-safe-area-context'
import GoogleMapView from '../Components/Home/GoogleMapView'

export default function Home() {
  return (
    <SafeAreaView style={{ paddingVertical:12, paddingHorizontal:15}}>
      <Header/>
      <GoogleMapView/>
    </SafeAreaView>
  )
}

I tried to print location in console to check if useEffect inside mapView is working properly. At first it was not printing when I opened the app but when I make any changes and save the file then it prints the location in console. But when I reload the app again it is not printing but after making any change and saving it, it prints. So may be this issue is because of useEffect. Don't know what is wrong in that.

Solution

useEffect doesn’t re-run when location changes. The location request is asynchronous and might take some time to resolve. Add location to dependencies and useEffect will re-run when it changes.

useEffect(()=>{
  if(location){
    console.log("User location", location)
...
  }
}, [location])

See useEffect for more information.

Answered By - user18309290