Expo modules in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Using Expo Camera Module to Capture a Photo

What will happen when the user taps the button in this React Native Expo app code?

React Native

import React, { useState, useRef } from 'react';
import { View, Button, Image } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);
  const cameraRef = useRef(null);

  React.useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      setPhotoUri(photo.uri);
    }
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <View><Button title="No access to camera" disabled /></View>;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} ref={cameraRef} />
      <Button title="Take Photo" onPress={takePicture} />
      {photoUri && <Image source={{ uri: photoUri }} style={{ flex: 1 }} />}
    </View>
  );
}

A The app asks for camera permission, shows the camera preview, and when the button is tapped, it takes a photo and displays it below the button.

B The app crashes because Camera module is not imported correctly.

C The app shows a blank screen because the camera permission is never requested.

D The button does nothing because takePicture function is not connected to the button.

💡 Hint

Look at how the Camera permission is requested and how the takePicture function is used.

The code requests camera permission on mount, shows the camera preview if granted, and the button triggers takePicture which captures a photo and sets its URI to display the image.

❓ lifecycle

intermediate

Effect of useEffect Dependency on Expo Location Module

Consider this React Native Expo code snippet using the Location module. What will happen if the dependency array in useEffect is empty versus if it includes a state variable 'tracking'?

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import * as Location from 'expo-location';

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

  useEffect(() => {
    let subscriber;
    if (tracking) {
      (async () => {
        const { status } = await Location.requestForegroundPermissionsAsync();
        if (status === 'granted') {
          subscriber = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, loc => {
            setLocation(loc);
          });
        }
      })();
    } else if (subscriber) {
      subscriber.remove();
    }
    return () => subscriber?.remove();
  }, [tracking]);

  return (
    <View>
      <Button title={tracking ? 'Stop Tracking' : 'Start Tracking'} onPress={() => setTracking(!tracking)} />
      <Text>{location ? JSON.stringify(location.coords) : 'No location'}</Text>
    </View>
  );
}

A With an empty dependency array, location tracking starts only once on mount and never updates when 'tracking' changes; with [tracking], it starts and stops tracking correctly when 'tracking' changes.

B With an empty dependency array, the app crashes; with [tracking], it never requests permission.

C With an empty dependency array, tracking toggles correctly; with [tracking], the location never updates.

D Both cases behave the same and continuously track location regardless of 'tracking' state.

💡 Hint

Think about when useEffect runs based on its dependency array.

useEffect runs only once if dependency array is empty, so changes to 'tracking' won't trigger starting or stopping location updates. Including 'tracking' makes it respond to changes properly.

📝 Syntax

advanced

Correct Import and Usage of Expo Notifications Module

Which option correctly imports and schedules a local notification using Expo Notifications in a React Native app?

A

import * as Notifications from 'expo-notifications';

Notifications.scheduleLocalNotification({
  title: 'Hello',
  trigger: { seconds: 5 }
});

B

import { scheduleNotificationAsync } from 'expo-notifications';

scheduleNotificationAsync({
  content: { title: 'Hello' },
  trigger: { seconds: 5 }
});

C

import * as Notifications from 'expo-notifications';

Notifications.scheduleNotificationAsync({
  content: { title: 'Hello' },
  trigger: { seconds: 5 }
});

D

import Notifications from 'expo-notifications';

Notifications.schedule({
  content: { title: 'Hello' },
  trigger: { seconds: 5 }
});

💡 Hint

Check the official Expo Notifications API for method names and import style.

The correct import is 'import * as Notifications from "expo-notifications";' and the method to schedule is 'scheduleNotificationAsync'. Other options use wrong method names or import styles.

🔧 Debug

advanced

Debugging Expo Audio Playback Issue

Given this code snippet using Expo Audio module, the sound does not play when the button is pressed. What is the most likely cause?

React Native

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { Audio } from 'expo-av';

export default function App() {
  const [sound, setSound] = useState();

  async function playSound() {
    const { sound: newSound } = await Audio.Sound.createAsync(
      require('./assets/sound.mp3')
    );
    setSound(newSound);
    await newSound.playAsync();
  }

  return (
    <View>
      <Button title="Play Sound" onPress={playSound} />
    </View>
  );
}

A The require path is incorrect; it should be a URL string instead of require.

B The sound variable is shadowed inside playSound, so the state 'sound' is not set properly, causing no playback.

C The playAsync method is asynchronous and must be awaited outside the function.

D The Audio module is not imported correctly; it should be imported from 'expo-audio' instead of 'expo-av'.

💡 Hint

Look carefully at variable names and state usage inside the async function.

Inside playSound, the 'sound' variable declared with const shadows the state variable 'sound'. This can cause confusion but does not prevent playback. However, the code actually works. The real issue is that the sound object is not unloaded on unmount, but that does not stop playback. The most likely cause is the shadowing causing confusion in managing the sound object lifecycle.

🧠 Conceptual

expert

Understanding Expo Module Linking and Bare Workflow

Which statement best describes the difference in using Expo modules in Managed workflow versus Bare workflow in React Native?

A Both workflows require manual linking of Expo modules and native code configuration.

B In Bare workflow, Expo modules are pre-installed and require no configuration; in Managed workflow, you must eject to use native modules.

C Expo modules cannot be used in Bare workflow; they only work in Managed workflow.

D In Managed workflow, Expo modules are pre-linked and configured automatically; in Bare workflow, you must manually install and link native modules and configure native projects.

💡 Hint

Think about how Expo handles native code in Managed vs Bare workflows.

Managed workflow abstracts native code setup and pre-links Expo modules. Bare workflow requires manual installation, linking, and native project configuration for Expo modules.

Practice

1. What is the main purpose of Expo modules in a React Native app?

easy

A. To create custom UI components from scratch

B. To write backend server code

C. To manage app navigation between screens

D. To easily add device features like camera and location

Solution

1. Step 1: Understand Expo modules role

   Expo modules provide access to device features such as camera, location, and notifications.

2. Step 2: Compare options with this role

   Only To easily add device features like camera and location matches this purpose; others relate to UI, navigation, or backend, which Expo modules do not handle.

3. Final Answer:

   To easily add device features like camera and location -> Option D

4. Quick Check:

   Expo modules = device features access [OK]

Hint: Expo modules = device features access, not UI or backend [OK]

Common Mistakes:

• Confusing Expo modules with navigation libraries
• Thinking Expo modules create UI components
• Assuming Expo modules handle backend logic

2. Which is the correct way to import the Camera module from Expo in a React Native app?

easy

A. import { Camera } from 'expo-camera';

B. import Camera from 'react-native-camera';

C. import { Camera } from 'expo-device';

D. import Camera from 'expo-camera-module';

Solution

1. Step 1: Identify the official Expo Camera import

   The correct import is from 'expo-camera' with named import { Camera }.

2. Step 2: Check other options for correctness

   import Camera from 'react-native-camera'; uses a different library name, C imports from wrong module, D uses a non-existent module name.

3. Final Answer:

   import { Camera } from 'expo-camera'; -> Option A

4. Quick Check:

   Expo Camera import = { Camera } from 'expo-camera' [OK]

Hint: Expo modules import from 'expo-<feature>' with named imports [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong package name
• Confusing Expo modules with React Native community packages

3. What will the following code output if the user denies camera permission?

import { Camera } from 'expo-camera';
import React, { useState, useEffect } from 'react';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return Requesting permission...;
  }
  if (hasPermission === false) {
    return No access to camera;
  }
  return Camera access granted;
}

medium

A. Displays 'No access to camera'

B. Displays 'Requesting permission...' indefinitely

C. Displays 'Camera access granted'

D. Throws a runtime error

Solution

1. Step 1: Understand permission request flow

   The code requests camera permission asynchronously and sets hasPermission to true if granted, false otherwise.

2. Step 2: Analyze user denies permission case

   If user denies, status !== 'granted', so hasPermission is false, triggering the second if block to show 'No access to camera'.

3. Final Answer:

   Displays 'No access to camera' -> Option A

4. Quick Check:

   User denies permission = show 'No access to camera' [OK]

Hint: Permission denied sets hasPermission false, shows denial message [OK]

Common Mistakes:

• Assuming permission request never finishes
• Confusing null and false states
• Expecting granted message even if denied

4. Identify the error in this Expo Location usage code:

import * as Location from 'expo-location';
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        return;
      }
      let loc = await Location.getCurrentPositionAsync({});
      setLocation(loc);
    })();
  }, []);

  return location ? {JSON.stringify(location)} : Loading...;
}

medium

A. Using getCurrentPositionAsync without options

B. Using useState incorrectly with null initial value

C. Missing parentheses when calling requestForegroundPermissionsAsync

D. Not importing React properly

Solution

1. Step 1: Check async function calls

   The code uses await Location.requestForegroundPermissionsAsync without parentheses, so it references the function instead of calling it.

2. Step 2: Verify other parts

   useState with null is valid, React import is correct, getCurrentPositionAsync can be called with empty options object.

3. Final Answer:

   Missing parentheses when calling requestForegroundPermissionsAsync -> Option C

4. Quick Check:

   Async function call needs () to execute [OK]

Hint: Async calls need () after function name to run [OK]

Common Mistakes:

• Forgetting () on async function calls
• Assuming useState(null) is wrong
• Thinking getCurrentPositionAsync requires options

5. You want to build a React Native app using Expo modules that shows the user's current location only if permission is granted. Which sequence of steps is correct?

hard

A. Request permission first, then import Location module, then get location

B. Import Location module, request permission, check status, get location if granted, display location

C. Import Location module, get location immediately, then request permission if needed

D. Display location first, then request permission, then import Location module

Solution

1. Step 1: Understand correct usage order

   You must import the Location module first to use its functions.

2. Step 2: Request permission before accessing location

   Request permission and check status before calling getCurrentPositionAsync to avoid errors.

3. Step 3: Only get and display location if permission is granted

   This ensures app behaves correctly and respects user privacy.

4. Final Answer:

   Import Location module, request permission, check status, get location if granted, display location -> Option B

5. Quick Check:

   Import -> request permission -> check -> get location -> display [OK]

Hint: Always request permission before accessing device features [OK]

Common Mistakes:

• Trying to get location before permission
• Requesting permission after accessing location
• Importing modules after usage