TypeError: undefined is not an object (evaluating 'navigator.geolocation.requestAuthorization')

Question

I am attempting to call:

`navigator.geolocation.requestAuthorization();`

to request geolocation permission.

But, this is resulting in error when running in iOS simulator

This was working at one point, but stopped. I attempted to delete and create a new project. I also tried to uninstall/reinstall node and react-native-cli.

import React, {Fragment, Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

export default class App extends Component {

    constructor(props)
    {
        super(props);

        navigator.geolocation.requestAuthorization();
    }

    render() {

        return (

                <View style={styles.MainContainer}>
                <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
                <Text style={styles.sectionTitle}>Hello World!</Text>
                </SafeAreaView>
                </View>

                );
    }
}

const styles = StyleSheet.create({
  MainContainer :{
     justifyContent: 'center',
     flex:1,
     margin: 5,
     marginTop: (Platform.OS === 'ios') ? 20 : 0,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
});

I am getting this error:

[error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 'navigator.geolocation.requestAuthorization')

This error is located at:
    in App (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

Housebreaking

"This was working at one point, but stopped." <-- What does this mean? Please include what you changed in-between the working and non-working state. Perhaps you upgraded and now that the newly release version of React Native v0.60 moved geolocation to a separate package, your project no longer has access to the geolocation library and thus you get that error? There are a log of potential errors. You need to include more information. – Digiovanni

I was successfully using the geolocation api and able to get the location. I was continuing on my project, adding more code, then started getting this error. I just installed the react-native stack a few days ago, I had not upgraded anything. I created the attached bare bones code to post here. – Housebreaking

Your comment below indicates that you are on 0.60. Please check the linked package from my previous comment and install it if you made your project with react-native init. If you did not, please edit your question and include how you setup the new project. – Digiovanni

Answer 1

geolocation has been extracted from react native .60 version. If you need an alternative solution

install react-native-community/geolocation

npm install @react-native-community/geolocation --save


react-native link @react-native-community/geolocation

then

IOS

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app. In order to enable geolocation in the background, you need to include the 'NSLocationAlwaysUsageDescription' key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode.

Android

To request access to location, you need to add the following line to your app's AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

usage

import Geolocation from '@react-native-community/geolocation';

Geolocation.getCurrentPosition(info => console.log(info));

Bridie

This doesn't solve the issue, now just gives error: "Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'navigator.geolocation.getCurrentPosition')" – Housebreaking

which react native version you are using – Bridie

if you are keep getting the error try installing react-native-geolocation-service. link - github.com/Agontuk/react-native-geolocation-service – Bridie

react-native-cli: 2.0.1 react-native: 0.60.0 npm: 6.9.0 node: 12.5.0 – Housebreaking

I could not found any doc which say geolocation has been deprecated or extracted, can you provide any links which show it, I only could find the facebook.github.io/react-native/docs/geolocation which do not say any thing like you said – Tonicity

Answer 2

Please ensure you have added libRCTGeolocation.a in Build Phases --> Link Binary With Libraries on your Xcode Project settings and RCTGeolocation.xcodeproj under Libraries of your Xcode project.

Quinine

Answer 3

From RN 0.6 or later, geolocation is not included in the RN core.If you want to use its API, you should do follow the steps in this link: https://github.com/react-native-community/react-native-geolocation

Kosiur

Answer 4

you should use @react-native-community/geolocation

first install it

yarn add @react-native-community/geolocation

then import

import Geolocation from '@react-native-community/geolocation';

in your function

Geolocation.setRNConfiguration(config);

Limon

Answer 5

I was also dealing with the same issue. Later on, I simply changed the package and everything was fine.

yarn add react-native-geolocation-service

// import Geolocation from '@react-native-community/geolocation';
import Geolocation from 'react-native-geolocation-service';

Legaspi