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.

Practice

1. What is the main purpose of using Geolocation.getCurrentPosition in a React Native app?

easy

A. To display a map on the screen

B. To continuously track the user's location

C. To request permission for location access

D. To get the user's current location once

Solution

1. Step 1: Understand the function purpose

   Geolocation.getCurrentPosition is designed to get the user's location only once when called.

2. Step 2: Differentiate from continuous tracking

   Continuous tracking uses watchPosition, not getCurrentPosition.

3. Final Answer:

   To get the user's current location once -> Option D

4. Quick Check:

   Single location fetch = getCurrentPosition [OK]

Hint: Get current location once with getCurrentPosition [OK]

Common Mistakes:

• Confusing getCurrentPosition with watchPosition
• Thinking it requests permissions automatically
• Assuming it tracks location continuously

2. Which of the following is the correct syntax to request the user's current location in React Native?

easy

A. navigator.location.getCurrentPosition(successCallback);

B. Geolocation.watchPosition(successCallback, errorCallback);

C. Geolocation.getCurrentPosition(successCallback, errorCallback);

D. Location.getPosition(successCallback, errorCallback);

Solution

1. Step 1: Identify correct API usage

   The correct React Native API call for one-time location is Geolocation.getCurrentPosition with success and error callbacks.

2. Step 2: Eliminate incorrect options

   watchPosition is for continuous tracking, navigator.location and Location.getPosition are not valid React Native APIs.

3. Final Answer:

   Geolocation.getCurrentPosition(successCallback, errorCallback); -> Option C

4. Quick Check:

   Correct method and parameters = Geolocation.getCurrentPosition(successCallback, errorCallback); [OK]

Hint: Use getCurrentPosition with success and error callbacks [OK]

Common Mistakes:

• Using watchPosition for one-time location
• Using browser navigator API in React Native
• Incorrect method names or missing callbacks

3. What will be the output of the following code snippet in a React Native app if location permission is granted and location is successfully fetched?

Geolocation.getCurrentPosition(
  position => console.log(position.coords.latitude),
  error => console.log(error.message)
);

medium

A. Logs the user's latitude coordinate as a number

B. Logs the error message string

C. Throws a syntax error

D. Logs the entire position object

Solution

1. Step 1: Analyze success callback

   The success callback logs position.coords.latitude, which is a number representing latitude.

2. Step 2: Understand error callback usage

   The error callback logs error messages only if permission is denied or fetching fails, which is not the case here.

3. Final Answer:

   Logs the user's latitude coordinate as a number -> Option A

4. Quick Check:

   Success callback logs latitude number [OK]

Hint: Success callback logs latitude, error callback logs error [OK]

Common Mistakes:

• Expecting entire position object logged
• Confusing error callback with success callback
• Assuming syntax error due to arrow functions

4. Identify the error in this React Native code snippet for tracking location changes:

const watchId = Geolocation.watchPosition(
  position => console.log(position.coords.longitude),
  error => console.log(error.message)
);
Geolocation.clearWatch(watchId);

medium

A. Error callback should be first argument

B. clearWatch is called immediately, stopping tracking instantly

C. watchPosition requires a third parameter for options

D. watchPosition does not return a watchId

Solution

1. Step 1: Understand watchPosition behavior

   watchPosition starts tracking and returns a watchId to stop it later.

2. Step 2: Analyze clearWatch usage

   Calling clearWatch(watchId) immediately after starting tracking stops it right away, so no updates will be received.

3. Final Answer:

   clearWatch is called immediately, stopping tracking instantly -> Option B

4. Quick Check:

   Immediate clearWatch stops tracking [OK]

Hint: Don't clearWatch immediately after watchPosition [OK]

Common Mistakes:

• Calling clearWatch too soon
• Mixing argument order in watchPosition
• Assuming watchPosition returns nothing

5. You want to build a React Native app that tracks the user's location continuously but only updates the UI when the user moves more than 50 meters. Which approach is best to implement this efficiently?

hard

A. Use watchPosition with distanceFilter: 50 option to limit updates

B. Use getCurrentPosition repeatedly every second with a timer

C. Use watchPosition without options and filter distance manually in callback

D. Request location once and update UI only if user moves manually

Solution

1. Step 1: Understand continuous tracking with filtering

   watchPosition supports options like distanceFilter to update only when user moves a set distance, saving resources.

2. Step 2: Compare other options

   Using getCurrentPosition repeatedly wastes battery and CPU. Filtering manually after every update is less efficient. Requesting location once won't track movement.

3. Final Answer:

   Use watchPosition with distanceFilter: 50 option to limit updates -> Option A

4. Quick Check:

   distanceFilter option limits updates efficiently [OK]

Hint: Use distanceFilter option with watchPosition for efficient updates [OK]

Common Mistakes:

• Polling location repeatedly with getCurrentPosition
• Ignoring distanceFilter and filtering manually
• Requesting location only once for continuous tracking