Camera, Gallery, and Device Features

# CHAPTER 24

Camera, Gallery, and Device Features #

1. Introduction #

2. Learning Objectives #

• Install and configure hardware-specific Expo packages.

• Request Camera and Media Library permissions safely.

• Launch the native device Camera to take a photograph.

• Launch the native Photo Gallery to select an image.

• Render the captured image URI dynamically in the UI.

3. The Permissions Barrier #

4. Installation #

npx expo install expo-image-picker

5. Accessing the Photo Gallery #

import React, { useState } from 'react';
import { Button, Image, View, Text } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function GalleryPicker() {
  // State to hold the temporary local file path of the selected image
  const [imageUri, setImageUri] = useState(null);

  const pickImage = async () => {
    // 1. Request Permission to view the gallery
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    
    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return; // Stop execution!
    }

    // 2. Launch the Image Picker UI
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true, // Lets the user crop the photo into a square!
      aspect: [1, 1],
      quality: 0.5, // Compresses the image size by 50%
    });

    // 3. If they didn't hit 'Cancel', save the URI to state!
    if (!result.canceled) {
      setImageUri(result.assets[0].uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      
      {/* 4. Render the image if the state exists! */}
      {imageUri ? (
        <Image source={{ uri: imageUri }} style={{ width: 200, height: 200, marginTop: 20, borderRadius: 100 }} />
      ) : (
        <Text style={{ marginTop: 20 }}>No image selected</Text>
      )}
    </View>
  );
}

6. Taking a Live Photo (The Camera) #

const takePhoto = async () => {
  // 1. Request Camera Permission
  const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
  
  if (permissionResult.granted === false) {
    alert("You've refused to allow this app to access your camera!");
    return;
  }

  // 2. Launch the Native Camera ViewFinder
  const result = await ImagePicker.launchCameraAsync({
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.8,
  });

  if (!result.canceled) {
    setImageUri(result.assets[0].uri); // Saves to the exact same state!
  }
};

7. Preparing to Upload (FormData) #

// Advanced snippet for uploading to a server
const uploadImage = async (uri) => {
  const formData = new FormData();
  
  // Append the raw file data
  formData.append('profile_photo', {
    uri: uri,
    name: 'photo.jpg',
    type: 'image/jpeg',
  });

  try {
    await axios.post('https://api.example.com/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
  } catch (err) {
    console.error("Upload failed");
  }
};

8. Visual Learning: The Hardware Flow #

[ Button Click ]
       |
[ OS Popup: "Allow access to Camera?" ]
      /             \
 (Deny)             (Allow)
   |                  |
(Alert UI)      [ Opens ViewFinder ]
                      |
                 (User snaps photo)
                      |
            [ result.assets[0].uri ] -> Passed to State -> Renders on Screen

9. Common Mistakes #

• Testing Camera on Simulators: The iOS Simulator does NOT have a camera. If you try to run launchCameraAsync on a Mac simulator, the app will crash or do nothing. You MUST test camera functionality using the Expo Go app on a physical device with an actual camera lens!

10. Best Practices #

• Explaining Why: Apple frequently rejects apps from the App Store if they request camera permissions without a valid reason. In your app.json file, Expo allows you to configure permission messages. You must explicitly state: "cameraPermission": "Allow this app to access your camera to update your profile avatar."

11. Practice Exercises #

1. 1. What asynchronous method provided by expo-image-picker triggers the native iOS/Android camera viewfinder?

1. 2. What specific JavaScript payload format must be utilized when transmitting a physical binary file (like a photo) via an Axios POST request?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the strict security sandbox model employed by iOS and Android regarding hardware access. Why is graceful error handling mandatory when a user denies permission?

• Q: Describe the architectural difference between a standard JSON payload and a FormData payload when executing an HTTP POST request. Why is FormData required for media uploads?

• Q: Walk through the specific configuration steps required to ensure your application passes the Apple App Store review process regarding privacy disclosure strings for Camera and Microphone usage.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #