If You are using React Native v0.60.0+ you must follow these intructions to enable currentLocation: https://git.io/JF4AR

Question

I'm getting a warning in my app that say : If You areusing React Native v0.60.0+ you must follow these intructions to enable currentLocation: https://git.io/JF4AR I'm working with React Native v0.72.4 expo 4.9.0.0

I'm new to React Native and need help, please

Indeed, if you consult the documentation for react-native-google-places-autocomplete, it says this: "If you are targeting React Native 0.60.0+ you must install either @react-native-community/geolocation (https://github.com/react-native-community/react-native-geolocation) or react-native-geolocation-service(https://github.com/Agontuk/react-native-geolocation-service).

Please make sure you follow the installation instructions there and add navigator.geolocation = require(GEOLOCATION_PACKAGE) somewhere in you application before ."

I then tried to install those packages and added the line navigator.geolocation = require(GEOLOCATION_PACKAGE) to my code and it still isn't working.

After that when Typing The location it doesn't autocomplete!!!

Here's my code:

import React,{useRef,useContext,useState} from 'react'
import { StyleSheet, Text, View,Dimensions,TouchableOpacity,} from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { Avatar,Icon} from 'react-native-elements';
import { colors,parameters } from '../global/styles'
import {GOOGLE_MAPS_APIKEY} from "@env";


const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;



const DestinationScreen = ({navigation}) => {

    const textInput1 = useRef(4);
    const textInput2 = useRef(5);
    

    return (
        <>
            <View style = {styles.view2}>
                <View style ={styles.view1}> 
                    <Icon 
                        type ="material-community"
                        name ="arrow-left"
                        color ={colors.grey1}
                        size ={32}
                        onPress ={()=>navigation.goBack()} 
                    />
                </View>
                <TouchableOpacity>
                    <View style ={{top:25,alignItems:"center"}}>
                        <View style ={styles.view3}>
                            <Avatar 
                                rounded
                                avatarStyle ={{}}
                                size ={30}
                                source = {require('../../assets/blankProfilePic.jpg')}
                                />
                            <Text style ={{marginLeft:5}}>For Someone</Text>
                            <Icon 
                                type ="material-community"
                                name ="chevron-down"
                                color ={colors.grey1}
                                size ={26}
                                />
                        </View>
                    </View>
                </TouchableOpacity>

                <GooglePlacesAutocomplete 
                nearbyPlacesAPI = 'GooglePlacesSearch'
                placeholder ="From..."
                listViewDisplayed = "auto"
                debounce ={400}
                currentLocation ={true}
                currentLocationLabel='Current location'
                ref ={textInput1}
                minLength ={2}
                enablePoweredByContainer = {false}
                fetchDetails ={true}
                autoFocus ={true}
                styles = {autoComplete}
                query ={{
                    key:GOOGLE_MAPS_APIKEY,
                    language:"en"
                }}

            />

            </View>
            
        </>
    )
}

export default DestinationScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop:parameters.statusBarHeight
    },
    
    view1:{
      position:"absolute",
      top:25,
      left:12,
      backgroundColor:colors.white,
      height:40,
      width:40,
      borderRadius:20,
      justifyContent:"center",
      alignItems:"center",
      marginTop:2, 
      zIndex: 10
      
    },
    
    view3:{
      flexDirection:"row",
      alignItems:"center",
      marginTop:2,   
      marginBottom:10,
      backgroundColor: colors.white,
      height:30,
      zIndex: 10
    },
    
    view2:{backgroundColor:colors.white,
          zIndex:4,
          paddingBottom:10,
          
        },
    
        view24:{
          flexDirection:"row",
          justifyContent:"space-between",
         marginVertical:15,
          paddingHorizontal:20   
      }, 
      
      view25:{
          flexDirection:'row',
         alignItems:"baseline"
      },
      
      flatlist:{
          marginTop:20,
          zIndex:17,
          elevation:8
      },    
    
    });
    
    
    const autoComplete = {
    
        textInput:{
            backgroundColor: colors.grey6,
            height: 50,
            borderRadius: 5,
            paddingVertical: 5,
            paddingHorizontal: 10,
            fontSize: 15,
            flex: 1,
            borderWidth:1,
            marginHorizontal:15,
        },
        container: {
           paddingTop:20,
          flex: 1,
          backgroundColor:colors.white
              },
      
        textInputContainer: {
          flexDirection: 'row',
        },
  
  }