Location services in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this React Native location request code?

Consider this React Native code snippet that requests location permission and fetches the current position. What will be the value of location after the code runs successfully?

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

export default function LocationExample() {
  const [location, setLocation] = useState(null);

  const getLocation = () => {
    Geolocation.getCurrentPosition(
      pos => setLocation(pos.coords),
      err => setLocation({ error: err.message })
    );
  };

  useEffect(() => {
    getLocation();
  }, []);

  return (
    <View>
      <Text>{location ? JSON.stringify(location) : 'Loading...'}</Text>
    </View>
  );
}

A An error object with a message property always, because permission is denied by default

B A string 'Loading...' because location is never set

C Null, because useState was initialized with null and never updated

D An object with latitude and longitude properties representing the device's current position

💡 Hint

Think about what Geolocation.getCurrentPosition does when it succeeds.

The getCurrentPosition function calls the success callback with an object containing coords that has latitude and longitude. This updates the location state with these coordinates, so the UI shows them as a JSON string.

🧠 Conceptual

intermediate

Which permission is required to access location on Android in React Native?

To use location services in a React Native app on Android, which permission must be declared in the AndroidManifest.xml file?

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

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

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

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

💡 Hint

Location permission is about GPS or precise location.

The ACCESS_FINE_LOCATION permission allows the app to access precise location data from GPS or network sources. Other permissions like INTERNET or CAMERA are unrelated to location.

❓ lifecycle

advanced

What happens if you don't clear location watch in React Native?

In React Native, if you use Geolocation.watchPosition to track location changes but forget to clear the watch with Geolocation.clearWatch, what is the likely effect?

A The app will continue to consume battery and resources even when the component unmounts

B The location updates will stop automatically after 5 minutes

C The app will crash immediately due to memory leak

D Nothing happens; watchPosition cleans itself up automatically

💡 Hint

Think about what happens when background tasks are not stopped.

If you don't clear the watch, the location listener stays active, causing battery drain and unnecessary resource use. It does not stop automatically or crash the app immediately.

📝 Syntax

advanced

Which option correctly requests location permission using React Native Permissions library?

Given the React Native Permissions library, which code snippet correctly requests location permission on iOS?

A const result = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);

B const result = await request('ios.permission.LOCATION_WHEN_IN_USE');

C const result = await Permissions.request('LOCATION_WHEN_IN_USE');

D const result = await requestPermission(PERMISSIONS.IOS.LOCATION_ALWAYS);

💡 Hint

Check the exact method and constant names from the library.

The correct usage is to import request and PERMISSIONS from the library and call request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE). Other options use wrong method names or string formats.

🔧 Debug

expert

Why does this React Native location code fail to update state?

This React Native code tries to get location but the UI never updates from 'Loading...'. What is the cause?

React Native

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

export default function App() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Geolocation.getCurrentPosition(position => {
      setLocation(position.coords);
    });
  }, []);

  return (
    <View>
      <Text>{location ? JSON.stringify(location) : 'Loading...'}</Text>
    </View>
  );
}

A The Geolocation.getCurrentPosition callback is never called due to missing permissions

B The code assigns to the variable 'location' directly instead of using setLocation, so state does not update

C The useEffect hook is missing a dependency array, causing infinite re-renders

D The initial state should be an empty object, not null, to trigger rendering

💡 Hint

Remember how React state updates work.

React state variables must be updated using their setter functions. Direct assignment to the state variable does not trigger a re-render or update the UI.

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