Camera access (expo-camera) in React Native - UI Render Trace

Component - Camera access (expo-camera)

This component uses the expo-camera library to show the device camera view on screen. It asks the user for permission to use the camera and then displays the live camera feed. A button lets the user take a picture.

Widget Tree

View
├─ Camera
└─ Button

The root View holds two children: the Camera component which shows the live camera feed, and a Button below it that the user can press to take a photo.

Render Trace - 3 Steps

Step 1: View

Step 2: Camera

Step 3: Button

State Change - Re-render

Trigger:User presses the 'Take Picture' button

Before

Camera preview is active, no photo taken

→

After

Photo is captured and saved, UI may show a preview or confirmation

Re-renders:The entire component rerenders to update UI with the captured photo or feedback

UI Quiz - 3 Questions

What does the Camera component display on the screen?

A A button to open camera settings

B A static image from the gallery

C A live video feed from the device camera

D A text input for camera permissions

Key Insight

When building camera features, always ask for permission first. Show a clear live preview so users know what they will capture. Keep controls simple and visible for easy use.

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