Camera access (expo-camera) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when the camera permission is denied?

Consider a React Native app using expo-camera. If the user denies camera permission, what will the app show?

React Native

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

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

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

  if (hasPermission === null) {
    return <View><Text>Requesting permission...</Text></View>;
  }
  if (hasPermission === false) {
    return <View><Text>No access to camera</Text></View>;
  }
  return <Camera style={{ flex: 1 }} />;
}

A The app crashes with a runtime error.

B The app shows a message: 'No access to camera'.

C The camera view opens but is black.

D The app automatically retries permission request forever.

💡 Hint

Think about how the app handles the permission state when denied.

When permission is denied, the state hasPermission is false, so the app shows the message 'No access to camera'. It does not crash or retry automatically.

❓ lifecycle

intermediate

When is the camera permission requested in the component lifecycle?

In a React Native component using expo-camera, when does the permission request happen?

React Native

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

A When the component unmounts.

B Every time the component updates.

C Only when the user taps a button.

D When the component mounts for the first time.

💡 Hint

Look at the dependency array of useEffect.

The empty dependency array [] means the effect runs once after the component mounts.

📝 Syntax

advanced

Which code correctly captures a photo using expo-camera?

Select the code snippet that correctly takes a picture with expo-camera and saves the URI.

React Native

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

export default function App() {
  const cameraRef = useRef(null);

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

  return (
    <>
      <Camera ref={cameraRef} style={{ flex: 1 }} />
      <Button title="Snap" onPress={takePicture} />
    </>
  );
}

A const photo = await Camera.takePictureAsync(); console.log(photo.uri);

B const photo = cameraRef.takePicture(); console.log(photo.uri);

C const photo = await cameraRef.current.takePictureAsync(); console.log(photo.uri);

D const photo = await cameraRef.current.capture(); console.log(photo.uri);

💡 Hint

Remember to use the ref and the correct method name.

The correct method is takePictureAsync() called on the camera ref current object. Other options use wrong method names or call on wrong objects.

❓ navigation

advanced

How to navigate back after taking a photo in a camera screen?

In a React Navigation stack, after taking a photo with expo-camera, how do you navigate back to the previous screen?

React Native

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

const takePicture = async () => {
  const photo = await cameraRef.current.takePictureAsync();
  navigation.goBack();
};

A Call navigation.goBack() after photo is taken.

B Call navigation.navigate('Camera') after photo is taken.

C Call navigation.reset() after photo is taken.

D Call navigation.push('Camera') after photo is taken.

💡 Hint

Think about returning to the previous screen in the stack.

navigation.goBack() returns to the previous screen. navigate or push would open a new screen. reset clears the navigation state.

🔧 Debug

expert

Why does the camera preview stay black after permission is granted?

You granted camera permission but the preview stays black. What is the most likely cause?

React Native

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

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

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

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <View />;
  }
  return <Camera style={{ width: 0, height: 0 }} />;
}

A The Camera component has zero width and height, so preview is invisible.

B The permission was not actually granted.

C The Camera component must be wrapped in a ScrollView.

D The Camera component requires a flashMode prop to show preview.

💡 Hint

Check the style of the Camera component.

If the Camera has zero width and height, it will not display anything visible, causing a black screen.

Practice

1. What is the first step to use the camera in a React Native app with expo-camera?

easy

A. Directly show the camera preview

B. Request permission to access the camera

C. Take a picture immediately

D. Install a photo editing library

Solution

1. Step 1: Understand permission requirement

   Mobile apps must ask user permission before accessing hardware like the camera.

2. Step 2: Request camera permission first

   Using expo-camera, you call permission request functions before showing the camera.

3. Final Answer:

   Request permission to access the camera -> Option B

4. Quick Check:

   Permission request = A [OK]

Hint: Always ask permission before using hardware [OK]

Common Mistakes:

• Trying to show camera preview without permission
• Taking picture before permission granted
• Skipping permission request step

2. Which of the following is the correct way to import the Camera component from expo-camera?

easy

A. import Camera from 'expo-camera';

B. import CameraComponent from 'expo-camera';

C. import * as Camera from 'expo-camera';

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

Solution

1. Step 1: Check expo-camera export style

   The Camera component is a named export, so it must be imported with curly braces.

2. Step 2: Use correct import syntax

   Correct syntax is import { Camera } from 'expo-camera'; to access the Camera component.

3. Final Answer:

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

4. Quick Check:

   Named import uses curly braces = D [OK]

Hint: Named exports need curly braces in import [OK]

Common Mistakes:

• Using default import without braces
• Importing everything as an object
• Using wrong import names

3. What will be the output of this code snippet inside a React Native component using expo-camera?

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

return hasPermission === null ? Requesting permission : hasPermission === false ? No access : ;

medium

A. Shows camera preview immediately without permission

B. Shows 'No access' text always

C. Shows 'Requesting permission' text initially, then camera preview if granted

D. Throws a syntax error

Solution

1. Step 1: Analyze permission state flow

   Initially, hasPermission is null, so it shows 'Requesting permission'.

2. Step 2: After permission request

   If permission granted, hasPermission becomes true and camera preview shows; if denied, shows 'No access'.

3. Final Answer:

   Shows 'Requesting permission' text initially, then camera preview if granted -> Option C

4. Quick Check:

   Permission null -> text, granted -> camera = B [OK]

Hint: Check initial state null shows loading text [OK]

Common Mistakes:

• Expecting camera preview before permission granted
• Confusing permission states
• Ignoring async permission request

4. Identify the error in this React Native code snippet using expo-camera:

const cameraRef = React.useRef(null);

async function takePicture() {
  if (cameraRef) {
    const photo = await cameraRef.current.takePictureAsync();
    console.log(photo.uri);
  }
}

medium

A. cameraRef should be checked as cameraRef.current, not cameraRef

B. takePictureAsync() is not an async function

C. cameraRef must be a state variable, not a ref

D. console.log cannot print photo.uri

Solution

1. Step 1: Check cameraRef usage

   cameraRef is a ref object; to access the camera instance, use cameraRef.current.

2. Step 2: Correct condition check

   The condition should check if (cameraRef.current) to ensure the camera is ready.

3. Final Answer:

   cameraRef should be checked as cameraRef.current, not cameraRef -> Option A

4. Quick Check:

   Ref object needs .current to access value = C [OK]

Hint: Check .current on refs before use [OK]

Common Mistakes:

• Checking ref object directly instead of .current
• Forgetting async on takePictureAsync
• Misusing console.log for URIs

5. You want to build a React Native app that takes a photo only if the user grants camera permission and then saves the photo URI in state. Which sequence of steps is correct?

hard

A. Request permission -> Show camera preview -> Use ref to take picture -> Save URI in state

B. Show camera preview -> Take picture -> Request permission -> Save URI in state

C. Take picture -> Request permission -> Show camera preview -> Save URI in state

D. Save URI in state -> Request permission -> Show camera preview -> Take picture

Solution

1. Step 1: Request permission before camera use

   Always ask and confirm permission before showing camera preview.

2. Step 2: Show camera preview and take picture

   Use a ref to access the camera and take a picture only after permission granted.

3. Step 3: Save photo URI in state

   Store the photo URI in state to use or display later in the app.

4. Final Answer:

   Request permission -> Show camera preview -> Use ref to take picture -> Save URI in state -> Option A

5. Quick Check:

   Permission first, then camera, then save = A [OK]

Hint: Permission first, then camera, then save URI [OK]

Common Mistakes:

• Taking picture before permission
• Saving URI before picture taken
• Showing camera without permission