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.