Expo geolocation permission

Hi, on the expo go app, i could not grant it geolocation permission when the popup came, and now its affecting my app, the places search is not suggesting when i type to search a place. Please how do i go back to enable that permission again. Thanks

Hi

Could you please provide some more information about what you’re trying to do?

Please run expo diagnostics and paste the output into a reply.
Then let us know what platform you’re having this problem on. Android or iOS or both?
Also, have you configured any permissions in app.json?
And could you share the code that is not working as you expect it to? (I mean just the specific part of the code that is not working. Not your whole app :slight_smile: )

expo diagnostics output
Expo CLI 4.10.0 environment info:
System:
OS: macOS 10.15.7
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.17.1 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7199119
Xcode: /undefined - /usr/bin/xcodebuild
npmGlobalPackages:
expo-cli: 4.10.0
Expo Workflow: managed

The problem is on android. It is a ride booking app, so when you try to search for a drop location it does not make any suggestion in other to select from

Thanks

Could you please also provide the above info, and the Expo SDK version?

When you post the code snippet, please put it between two lines with three backticks so that it is properly formatted.

```
like this
```

SDK 41,
the code

``import React, { useContext } from ‘react’;
import { Platform, StatusBar, Button, Alert } from ‘react-native’;
import { GooglePlacesAutocomplete } from ‘react-native-google-places-autocomplete’;
import { colors } from ‘…/common/theme’;
import {
Google_Map_API_Key,
language,
features,
default_country_code
} from ‘config’;
import { useDispatch } from ‘react-redux’;
import { FirebaseContext } from ‘common/src’;

export default function SearchScreen(props) {
const { api } = useContext(FirebaseContext);
const {
fetchCoordsfromPlace,
updateTripPickup,
updateTripDrop
} = api;
const dispatch = useDispatch();
const locationType = props.navigation.getParam(‘locationType’);
const savedAddresses = props.navigation.getParam(‘savedAddresses’);

if(features.AllowCountrySelection == false){

}

const updateLocation = (data) => {
    if(data.place_id){
        fetchCoordsfromPlace(Platform.OS, data.place_id).then((res)=>{
            if(res && res.lat){
                if(locationType=='pickup'){
                    dispatch(updateTripPickup({
                        lat:res.lat,
                        lng:res.lng,
                        add:data.description,
                        source: 'search'
                    }));
                }else{
                    dispatch(updateTripDrop({
                        lat:res.lat,
                        lng:res.lng,
                        add:data.description,
                        source: 'search'
                    }));
                }
                props.navigation.pop();
            }else{
                Alert.alert(language.alert,language.place_to_coords_error);
            }
        });
    } else {
        if(data.description){
            if(locationType=='pickup'){
                dispatch(updateTripPickup({
                    lat:data.lat,
                    lng:data.lng,
                    add:data.description,
                    source: 'search'
                }));
            }else{
                dispatch(updateTripDrop({
                    lat:data.lat,
                    lng:data.lng,
                    add:data.description,
                    source: 'search'
                }));
            }
            props.navigation.pop();
        }
    }

}

return (
    <GooglePlacesAutocomplete
        placeholder={language.search}
        minLength={2} // minimum length of text to search
        autoFocus={true}
        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        listViewDisplayed='auto'  // true/false/undefined
        fetchDetails={true}
        renderLeftButton={() => <Button
            title="Back"
            onPress={() => { props.navigation.goBack(); }}
        />
        }
        textInputProps={{ clearButtonMode: 'while-editing' }}
        onPress={(data) => { // 'details' is provided when fetchDetails = true
            updateLocation(data);
        }}

        query={
            features.AllowCountrySelection?
            {
                key: Google_Map_API_Key[Platform.OS],
                language: 'en',
            }
            :
            {
                key: Google_Map_API_Key[Platform.OS],
                language: 'en',
                components: 'country:' + default_country_code.code.toLowerCase()
            }
        }
        predefinedPlaces = {savedAddresses}

        styles={{
            container: {
                marginTop: Platform.OS == 'android' ? StatusBar.currentHeight : 44,
                backgroundColor: colors.GREY.default
            },
            textInputContainer: {
                width: '100%',
            },
            description: {
                fontWeight: 'bold'
            },
            description: {
                color: colors.WHITE
            },
            predefinedPlacesDescription: {
                color: colors.BLUE.light
            },
        }}
        renderDescription={(row) => row.description || row.formatted_address || row.name}
        fetchDetails={false}
        minLength={4}
        debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
    />
);

}``

The ``` need to be on their own line for the formatting to work correctly.

Anyway, I see you’re using react-native-google-places-autocomplete which I am not familiar with. It seems to be an unofficial library.

If you need to get the phone’s current location it seems you will need to use something like expo-location.

Please have a look at the example code in the documentation. Maybe a call to Location.requestForegroundPermissionsAsync() will work for you.

Its an official library, and am using a real device not emulator

‘’’
import React, { useContext } from ‘react’;
import { Platform, StatusBar, Button, Alert } from ‘react-native’;
import { GooglePlacesAutocomplete } from ‘react-native-google-places-autocomplete’;
import { colors } from ‘…/common/theme’;
import {
Google_Map_API_Key,
language,
features,
default_country_code
} from ‘config’;
import { useDispatch } from ‘react-redux’;
import { FirebaseContext } from ‘common/src’;

export default function SearchScreen(props) {
const { api } = useContext(FirebaseContext);
const {
fetchCoordsfromPlace,
updateTripPickup,
updateTripDrop
} = api;
const dispatch = useDispatch();
const locationType = props.navigation.getParam(‘locationType’);
const savedAddresses = props.navigation.getParam(‘savedAddresses’);

if(features.AllowCountrySelection == false){

}

const updateLocation = (data) => {
    if(data.place_id){
        fetchCoordsfromPlace(Platform.OS, data.place_id).then((res)=>{
            if(res && res.lat){
                if(locationType=='pickup'){
                    dispatch(updateTripPickup({
                        lat:res.lat,
                        lng:res.lng,
                        add:data.description,
                        source: 'search'
                    }));
                }else{
                    dispatch(updateTripDrop({
                        lat:res.lat,
                        lng:res.lng,
                        add:data.description,
                        source: 'search'
                    }));
                }
                props.navigation.pop();
            }else{
                Alert.alert(language.alert,language.place_to_coords_error);
            }
        });
    } else {
        if(data.description){
            if(locationType=='pickup'){
                dispatch(updateTripPickup({
                    lat:data.lat,
                    lng:data.lng,
                    add:data.description,
                    source: 'search'
                }));
            }else{
                dispatch(updateTripDrop({
                    lat:data.lat,
                    lng:data.lng,
                    add:data.description,
                    source: 'search'
                }));
            }
            props.navigation.pop();
        }
    }

}

return (
    <GooglePlacesAutocomplete
        placeholder={language.search}
        minLength={2} // minimum length of text to search
        autoFocus={true}
        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        listViewDisplayed='auto'  // true/false/undefined
        fetchDetails={true}
        renderLeftButton={() => <Button
            title="Back"
            onPress={() => { props.navigation.goBack(); }}
        />
        }
        textInputProps={{ clearButtonMode: 'while-editing' }}
        onPress={(data) => { // 'details' is provided when fetchDetails = true
            updateLocation(data);
        }}

        query={
            features.AllowCountrySelection?
            {
                key: Google_Map_API_Key[Platform.OS],
                language: 'en',
            }
            :
            {
                key: Google_Map_API_Key[Platform.OS],
                language: 'en',
                components: 'country:' + default_country_code.code.toLowerCase()
            }
        }
        predefinedPlaces = {savedAddresses}

        styles={{
            container: {
                marginTop: Platform.OS == 'android' ? StatusBar.currentHeight : 44,
                backgroundColor: colors.GREY.default
            },
            textInputContainer: {
                width: '100%',
            },
            description: {
                fontWeight: 'bold'
            },
            description: {
                color: colors.WHITE
            },
            predefinedPlacesDescription: {
                color: colors.BLUE.light
            },
        }}
        renderDescription={(row) => row.description || row.formatted_address || row.name}
        fetchDetails={false}
        minLength={4}
        debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
    />
);

}
'''

It was supposed to be backticks. Anyway, no need to paste your code again. My answer remains basically the same.

You are using a library that has nothing to do with Expo, and I am unable to help you with that, specifically, but if you want to ask the user for permission to get their location, then you could do that part with expo-location.

Note: I am not telling you to stop using react-native-google-places-autocomplete, but you should ask the authors of that library, or perhaps on stackoverflow if you are having problems with it.

Thank you very much. I will try to implement it to see