Location services in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native Geolocation API.

React Native

import Geolocation from '[1]';

Drag options to blanks, or click blank then click option'

Areact-native-location

B@react-native-community/geolocation

Creact-native-geolocation-service

Dexpo-location

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'expo-location' without using Expo.

Using '@react-native-community/geolocation' which is deprecated.

The correct package to import for React Native Geolocation is react-native-geolocation-service.

2fill in blank

medium

Complete the code to request location permission on Android.

React Native

const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.[1]);

Drag options to blanks, or click blank then click option'

AACCESS_FINE_LOCATION

BACCESS_COARSE_LOCATION

CACCESS_BACKGROUND_LOCATION

DACCESS_NETWORK_STATE

Attempts:

3 left

💡 Hint

Common Mistakes

Requesting ACCESS_NETWORK_STATE which is unrelated to location.

Using ACCESS_COARSE_LOCATION when fine location is needed.

To get precise location, you request ACCESS_FINE_LOCATION permission on Android.

3fill in blank

hard

Fix the error in the code to get current position.

React Native

Geolocation.getCurrentPosition([1]);

Drag options to blanks, or click blank then click option'

A() => console.log('Position obtained')

Bposition => console.log(position)

Cerror => console.error(error)

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or error callback as first argument.

Using a callback that does not accept the position parameter.

The first argument to getCurrentPosition is a success callback that receives the position object.

4fill in blank

hard

Fill both blanks to watch location changes and handle errors.

React Native

const watchId = Geolocation.watchPosition([1], [2]);

Drag options to blanks, or click blank then click option'

Aposition => console.log(position)

Berror => console.error(error)

C() => alert('Location updated')

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping success and error callbacks.

Passing null instead of error callback.

The first argument is the success callback for position updates, the second is the error callback.

5fill in blank

hard

Fill all three blanks to clear the location watch and stop updates.

React Native

Geolocation.[1](watchId);

// To stop watching, call [2] with the [3] returned by watchPosition.

Drag options to blanks, or click blank then click option'

AclearWatch

CwatchId

DstopWatching

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopWatching which does not exist.

Not passing the watchId to clearWatch.

You use clearWatch with the watchId to stop location updates.