0

Please, am new to react native. Am trying to get the current location through google places autocomplete for android in expo but an getting the error 'TypeError: null is not an object (evaluating 'RNFusedLocation.getCurrentPosition')' below is my code

Please, am new to react native. Am trying to get the current location through google places autocomplete for android in expo but an getting the error 'TypeError: null is not an object (evaluating 'RNFusedLocation.getCurrentPosition')' below is my code

App.js

import { StyleSheet, Text, View, StatusBar, PermissionsAndroid, Platform,} from 'react-native';
import HomeScreen from './src/screens/HomeScreen/HomeScreen';
import DestinationSearch from './src/screens/DestinationSearch/DestinationSearch';
import SearchResults from './src/screens/SearchResults/SearchResults';
import { useEffect, useState } from 'react';

//import * as Location from 'expo-location';
import Geolocation, { getCurrentPosition } from 'react-native-geolocation-service';
navigator.geolocation = require('react-native-geolocation-service');


export default function App() {

  const androidPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: "Uber App location Permission",
          message:
            "Uber App needs access to your location " +
            "so you can take awesome rides.",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can use the location");
      } else {
        console.log("Location permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };

  useEffect(() => {
    if (androidPermission) {
      Geolocation.getCurrentPosition(
          (position) => {
            console.log(position);
          },
          (error) => {
            // See error code charts below.
            console.log(error.code, error.message);
          },
          { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
      );
      
    }
  
  }, [])
  

  useEffect(() => {
    if(Platform.OS == 'android') {
      androidPermission()
    } else{
      //IOS
      Geolocation.requestAuthorization();
    }
  }, [])
  

  
  

  return (
    <View>
      
      {/* <HomeScreen /> */}
      <DestinationSearch />
      {/* <SearchResults /> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop:StatusBar.currentHeight
  },
});

`

DestinationSearch.jsx

import { View, Text, StyleSheet, SafeAreaView, StatusBar } from 'react-native'
import React, {useEffect, useState,} from 'react'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import {GOOGLE_MAPS_APIKEY} from '@env'
import PlaceRow from './PlaceRows';

const DestinationSearch = () => {

  const [originPlace,setOriginPlace] = useState(null)
  const [destinationPlace, setDestinationPlace] = useState(null)

  useEffect(() => {
    console.log('useEffect is called')
    if (originPlace && destinationPlace) {
      console.warn('Redirect to results')
    }
  }, [originPlace, destinationPlace])


  return (
    <SafeAreaView>
        <View style={styles.container}>

        <GooglePlacesAutocomplete
            nearbyPlacesApi = 'GooglePlacesSearch'
            placeholder = 'From...'
            listViewDisplayed = 'auto'
            debounce = {400}
            currentLocation = {true}
            currentLocationLabel='Current location'
            minLenght = {2}
            enabledPoweredByContainer = {true}
            fetchDetails = {true}
            autoFoccus = {true}
            renderRow={(data)=> <PlaceRow  data={data}/>}
            query ={{
                
                key: GOOGLE_MAPS_APIKEY ,
                language :'en'
            }}
            styles={{
              container: styles.autocompleteContainer,
              textInput: styles.textInput,
              listView: styles.listView,
              seperator: styles.separator
            }}
            onPress = {(data, details = null)=> {
                setOriginPlace({data, details})
                console.log(currentLocation)
            
            }}
            />

        <GooglePlacesAutocomplete
          nearbyPlacesApi = 'GooglePlacesSearch'
          placeholder = 'To...'
          listViewDisplayed = 'auto'
          debounce = {400}
          minLenght = {2}
          enabledPoweredByContainer = {true}
          fetchDetails = {true}
          autoFoccus = {true}
          query ={{
              
              key: GOOGLE_MAPS_APIKEY ,
              language :'en'
          }}
          renderRow={(data)=> <PlaceRow  data={data}/>}

          styles={{
            container: {
              ...styles.autocompleteContainer,
              top: 70
            },
            textInput: styles.textInput,
            seperator: styles.separator
          }}

          onPress = {(data, details = null)=> {
              setDestinationPlace({data, details})
          
          }}
          />

0 Answers0