Handling Camera and Image Picker Integration in React Native

Course: React Native Training

Topic: Handling Camera and Image Picker Integration

Course Link: React Native Training Course

Demo Link: Register for a Free Course Demo

Website: JustAcademy

1. Introduction to Camera and Image Picker Integration

Camera and image picker integration is an important feature in React Native applications. It allows users to capture photographs using their device camera or select existing images from the device's photo gallery. These features are commonly used in profile management, social media applications, e-commerce platforms, document verification, messaging applications, and attendance systems.

React Native provides the Image component to display images, but a separate library is needed to open the device camera or media selection interface. In Expo-based applications, expo-image-picker provides a convenient way to capture photos and select images using the operating system's interface. For applications that require a custom camera preview and more control over camera behavior, expo-camera is another option.

Official documentation: Expo ImagePicker Documentation and Expo Camera Documentation.

1.1 What Is Camera Integration?

Camera integration means connecting a React Native application to the device's camera so users can capture new photographs or videos. The application requests permission when required, launches the camera interface, receives the captured media result, and uses the returned file URI to display or process the media.

1.2 What Is an Image Picker?

An image picker is a system interface that allows users to select existing images from their device's photo library. Depending on the library and configuration, it can also support video selection, multiple image selection, cropping, and image quality settings.

1.3 Difference Between Camera and Image Picker

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand camera and image picker functionality in React Native.
• Install and configure the Expo ImagePicker library.
• Request and handle camera and media permissions.
• Capture a photograph using the device camera.
• Select an image from the device gallery.
• Display selected images using React Native's Image component.
• Configure cropping, aspect ratio, image quality, and media types.
• Handle cancellation, permission denial, and runtime errors.
• Prepare images for upload to a backend or cloud storage service.
• Apply privacy, performance, and security best practices.

3. Setting Up the React Native Environment

3.1 Requirements

• Node.js and npm or another compatible package manager.
• A React Native project created with Expo.
• Expo Go or a development build compatible with the project's dependencies.
• An Android or iOS device or emulator for testing.
• Basic knowledge of JavaScript, React hooks, and React Native components.

3.2 Create an Expo Project

If you do not already have a project, create one using the following commands:

npx create-expo-app CameraImagePickerApp
cd CameraImagePickerApp
npx expo start

Open the project on a compatible device or emulator. If you already have an Expo React Native project, continue with the library installation step.

3.3 Install Expo ImagePicker

Run the following command from the project directory:

npx expo install expo-image-picker

Using npx expo install helps select a package version compatible with the installed Expo SDK. Restart the development server after installing dependencies if necessary.

3.4 Why Use Expo ImagePicker?

• It provides access to the operating system's familiar camera and media selection interfaces.
• It simplifies common photo capture and selection workflows.
• It returns asset information such as the local URI, dimensions, filename, MIME type, and file size when available.
• It supports image editing and other picker options where supported by the platform.
• It reduces the need to implement a complete camera interface for simple use cases.

4. Understanding the ImagePicker API

The ImagePicker API exposes methods for launching the camera, opening the media library, checking permissions, requesting permissions, and retrieving pending results on supported platforms.

4.1 Importing ImagePicker

Import the library into the component where you need camera or image selection functionality.

import * as ImagePicker from 'expo-image-picker';

4.2 Understanding Asynchronous Operations

Launching the camera or image library returns a Promise. Use an asynchronous function with await to wait for the result. A try...catch block helps handle failures, while a cancellation check prevents the application from accessing an asset that does not exist.

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 0.8,
});

if (!result.canceled && result.assets?.length) {
  const selectedImage = result.assets[0];
  console.log(selectedImage.uri);
}

5. Handling Camera Permissions

Camera permission protects the user's privacy by allowing the operating system to control which applications can access the camera. Request permission when the user chooses an action that requires it, and explain why access is needed.

5.1 Request Camera Permission

import * as ImagePicker from 'expo-image-picker';

async function requestCameraAccess() {
  const permission =
    await ImagePicker.requestCameraPermissionsAsync();

  if (permission.granted) {
    console.log('Camera permission granted');
  } else {
    console.log('Camera permission not granted');
  }

  return permission.granted;
}

5.2 Permission Status

5.3 Handling Permission Denial

If a user denies camera access, do not repeatedly interrupt them with permission prompts. Explain which feature needs access and, when the operating system no longer allows another prompt, guide the user to the application settings if they want to enable it.

import { Alert, Linking } from 'react-native';

function showCameraPermissionMessage(canAskAgain) {
  if (canAskAgain) {
    Alert.alert(
      'Camera permission required',
      'Allow camera access to capture a new photo.'
    );
  } else {
    Alert.alert(
      'Camera access is disabled',
      'Enable camera permission in your device settings.',
      [
        { text: 'Cancel', style: 'cancel' },
        { text: 'Open Settings', onPress: () => Linking.openSettings() }
      ]
    );
  }
}

Permission behavior can differ by operating system and application configuration. Test both first-time requests and previously denied permissions.

6. Handling Image Library Permissions

Media library permissions vary by platform and by the operation being performed. Modern operating systems may allow access to only the photos selected by the user. Some image selection flows use the operating system's picker without requiring broad library access. Request library permissions only when the specific workflow requires them.

6.1 Request Media Library Permission

async function requestGalleryAccess() {
  const permission =
    await ImagePicker.requestMediaLibraryPermissionsAsync();

  if (!permission.granted) {
    return false;
  }

  return true;
}

6.2 Limited Photo Access

On supported operating systems, a user may grant access to selected photos instead of the entire library. Design the application so users can work with the images they selected and can update their selection when necessary. Do not assume the application has unrestricted access to all gallery content.

6.3 Permission Configuration

For Expo projects using Continuous Native Generation, permission descriptions can be configured through the ImagePicker config plugin in the app configuration file. Build-time configuration changes generally require a new native build to take effect.

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "Allow access to photos you choose to upload.",
          "cameraPermission": "Allow camera access to take a photo."
        }
      ]
    ]
  }
}

Use permission messages that accurately explain the feature. Avoid requesting microphone access if the application does not need it; review the library's configuration options to control optional permissions where supported.

7. Capturing a Photo Using the Camera

The launchCameraAsync() method opens the camera capture interface. After the user captures a photo, the result includes a cancellation flag and an array of assets when capture succeeds.

7.1 Basic Camera Capture Example

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

export default function CameraExample() {
  const [imageUri, setImageUri] = useState(null);

  const takePhoto = async () => {
    try {
      const permission =
        await ImagePicker.requestCameraPermissionsAsync();

      if (!permission.granted) {
        Alert.alert(
          'Permission required',
          'Camera access is needed to take a photo.'
        );
        return;
      }

      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [4, 3],
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        setImageUri(result.assets[0].uri);
      }
    } catch (error) {
      Alert.alert('Error', 'Unable to capture the photo.');
      console.error(error);
    }
  };

  return (
    <View>
      <Button title="Take Photo" onPress={takePhoto} />
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 250, height: 250 }}
          resizeMode="contain"
        />
      )}
    </View>
  );
}

7.2 Explanation of the Code

1. useState stores the URI of the captured image.
2. The user presses the Take Photo button to start the process.
3. The application requests camera permission.
4. If permission is not granted, an explanatory message is displayed.
5. launchCameraAsync() opens the camera interface.
6. The result is checked to determine whether the user canceled the action.
7. The first returned asset's URI is stored in state.
8. The Image component renders the captured photo.

7.3 Important Considerations

• A camera may not be available in some simulators or browsers.
• Users may cancel capture without selecting an image.
• Camera behavior and available options can vary across devices.
• Always test the camera feature on a physical device.
• For a custom live camera preview, barcode scanning, or advanced camera controls, evaluate expo-camera instead of relying only on the system picker.

8. Selecting an Image from the Gallery

The launchImageLibraryAsync() method displays the operating system's media selection interface. It is useful when users want to choose an existing photograph rather than take a new one.

8.1 Basic Image Picker Example

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

export default function GalleryExample() {
  const [imageUri, setImageUri] = useState(null);

  const pickImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        setImageUri(result.assets[0].uri);
      }
    } catch (error) {
      Alert.alert('Error', 'Unable to select the image.');
      console.error(error);
    }
  };

  return (
    <View>
      <Button title="Choose from Gallery" onPress={pickImage} />
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 250, height: 250 }}
          resizeMode="contain"
        />
      )}
    </View>
  );
}

8.2 Why Is the Cancellation Check Important?

The user may close the picker without choosing an image. When result.canceled is true, the application should keep its existing state and avoid accessing result.assets[0]. This prevents errors caused by trying to read a nonexistent asset.

8.3 Displaying an Image

React Native's Image component accepts a local URI as its source. The image must have appropriate dimensions or layout constraints to be visible.

<Image
  source={{ uri: imageUri }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

Common values for resizeMode include cover, contain, stretch, and center. Select a mode that fits the application's design.

9. Combining Camera and Gallery in One Screen

Most applications allow users to either take a new photo or select an existing image. Both actions can update the same state variable, simplifying preview and upload logic.

9.1 Complete Camera and Gallery Component

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

export default function CameraGalleryScreen() {
  const [image, setImage] = useState(null);

  const takePhoto = async () => {
    try {
      const permission =
        await ImagePicker.requestCameraPermissionsAsync();

      if (!permission.granted) {
        Alert.alert(
          'Permission required',
          'Please allow camera access to take a photo.'
        );
        return;
      }

      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        setImage(result.assets[0]);
      }
    } catch (error) {
      Alert.alert('Camera error', 'Could not take a photo.');
      console.error(error);
    }
  };

  const chooseImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        setImage(result.assets[0]);
      }
    } catch (error) {
      Alert.alert('Picker error', 'Could not select an image.');
      console.error(error);
    }
  };

  const removeImage = () => setImage(null);

  return (
    <View>
      <Text>Profile Photo</Text>
      <Button title="Take Photo" onPress={takePhoto} />
      <Button title="Choose from Gallery" onPress={chooseImage} />

      {image && (
        <>
          <Image
            source={{ uri: image.uri }}
            style={{ width: 250, height: 250 }}
            resizeMode="cover"
          />
          <Text>File: {image.fileName || 'Unknown'}</Text>
          <Text>Size: {image.fileSize ?? 'Unknown'} bytes</Text>
          <Button title="Remove Photo" onPress={removeImage} />
        </>
      )}
    </View>
  );
}

9.2 Benefits of a Shared Image State

• Both camera and gallery actions use the same preview component.
• The selected image's metadata is available for validation.
• Replacing and removing the image is straightforward.
• The same image object can be passed to a later upload workflow.

10. Understanding the ImagePicker Result Object

A successful picker result contains an assets array. Each asset includes a URI and dimensions, along with other metadata when available. A canceled result has canceled: true and no usable selected asset array.

10.1 Common Asset Properties

10.2 Safely Reading Asset Information

if (!result.canceled && result.assets?.length) {
  const asset = result.assets[0];

  const details = {
    uri: asset.uri,
    fileName: asset.fileName ?? 'photo',
    fileSize: asset.fileSize ?? null,
    width: asset.width,
    height: asset.height,
    mimeType: asset.mimeType ?? 'application/octet-stream',
  };

  console.log(details);
}

Metadata is not guaranteed to be present for every asset or platform. Validate the fields your application actually needs rather than assuming every property has a value.

11. Image Cropping, Aspect Ratio, and Quality

ImagePicker options allow developers to customize the media selection process. The exact behavior depends on the operating system and installed library version.

11.1 Cropping an Image

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 0.8,
});

Setting allowsEditing: true enables an editing or cropping interface where supported. Cropping behavior can differ between Android and iOS. Multiple image selection and editing are not generally compatible; when selecting multiple assets, check the library's documented option behavior.

11.2 Aspect Ratio

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  aspect: [1, 1],
  quality: 0.8,
});

The aspect option specifies the desired crop ratio where supported. For example:

• [1, 1] represents a square image.
• [4, 3] represents a landscape-style ratio.
• [16, 9] represents a wide-screen ratio.

Do not assume every platform applies the same crop geometry. Test the required ratios on target devices.

11.3 Image Quality

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  quality: 0.7,
});

The quality value generally ranges from 0 to 1 for supported compression behavior. Higher quality may produce larger files, while lower quality can reduce upload time and storage usage. Quality settings do not guarantee a specific output file size, and editing or format conversion may affect the final result.

11.4 Choosing Suitable Quality Settings

These values are starting points, not universal requirements. The application should validate image dimensions, file size, and clarity against its own use case.

12. Selecting Multiple Images

Some applications need users to select multiple photographs, such as a product gallery, travel album, or social media post. ImagePicker supports multiple selection on supported platforms.

12.1 Multiple Image Selection Example

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsMultipleSelection: true,
  selectionLimit: 5,
  quality: 0.8,
});

if (!result.canceled) {
  const selectedImages = result.assets ?? [];
  console.log('Selected images:', selectedImages.length);
}

12.2 Rendering Multiple Images

import { FlatList, Image, View } from 'react-native';

function ImageGallery({ images }) {
  return (
    <FlatList
      data={images}
      keyExtractor={(item, index) => item.uri + index}
      numColumns={2}
      renderItem={({ item }) => (
        <Image
          source={{ uri: item.uri }}
          style={{ width: 150, height: 150, margin: 4 }}
          resizeMode="cover"
        />
      )}
    />
  );
}

In a production application, use a stable unique key whenever possible and validate the total number and size of selected files before upload. Cropping multiple images is not supported in the same way as single-image editing, so consult the current API documentation.

13. Supporting Videos and Other Media Types

ImagePicker can support video selection as well as image selection. For an image-only feature, explicitly configure mediaTypes: ['images'] to avoid accidental video selection.

13.1 Selecting a Video

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['videos'],
  quality: 1,
});

if (!result.canceled && result.assets?.length) {
  const video = result.assets[0];
  console.log(video.uri);
}

13.2 Important Differences

• Videos can be much larger than photographs.
• Video selection and transcoding options may vary by platform.
• Some video workflows may require additional permission handling.
• Video preview requires an appropriate video component rather than the Image component.
• For audio recording or video capture with audio, review the relevant microphone permissions and configuration.

14. Uploading an Image to a Backend API

Capturing or selecting an image is usually only the first step. Applications often need to upload the image to a server for profile updates, product listings, document submission, or content sharing.

14.1 Understanding FormData

FormData can send a file as part of a multipart HTTP request. The application commonly supplies a URI, filename, and MIME type for the selected image. The server must validate the uploaded file and enforce its own security rules.

14.2 Example Upload Function

async function uploadImage(asset, token) {
  if (!asset?.uri) {
    throw new Error('No image selected');
  }

  const formData = new FormData();

  formData.append('image', {
    uri: asset.uri,
    name: asset.fileName || 'upload.jpg',
    type: asset.mimeType || 'image/jpeg',
  });

  const response = await fetch('https://api.example.com/upload', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
    },
    body: formData,
  });

  if (!response.ok) {
    throw new Error('Image upload failed');
  }

  return response.json();
}

Important: Replace the example endpoint with your real backend URL. The code assumes the server accepts a multipart field named image. Avoid manually setting a multipart Content-Type header in environments where the networking implementation must generate the boundary automatically.

14.3 Upload Flow

1. The user captures or selects an image.
2. The application checks that a valid asset URI exists.
3. It validates the file size, type, and dimensions where necessary.
4. The image is appended to a FormData object.
5. The application sends the multipart request to the backend.
6. The server validates the file, processes it, and stores it according to its rules.
7. The application handles the response and displays success or error feedback.

15. Image Storage and URI Management

The URI returned by ImagePicker is generally a reference to a local asset or file. It should not automatically be treated as a permanent storage location.

15.1 Temporary Versus Persistent Storage

• Temporary URI: May refer to a cached or temporary file whose availability can change.
• Persistent application storage: Suitable when the app needs to retain a local copy, subject to platform and filesystem behavior.
• Remote storage: A backend or cloud storage service can store an uploaded image and return a persistent resource URL or identifier.

15.2 Recommended Strategy

For a profile picture, keep the local URI for an immediate preview and upload the asset when appropriate. After a successful upload, store the server's image URL or media identifier as the durable reference. If an offline workflow needs to upload later, copy the asset into app-managed storage when appropriate and maintain a persisted upload queue.

Do not assume a local URI will remain valid indefinitely. If an application depends on the original file later, confirm the URI's lifetime and implement the required copying or storage workflow.

16. Building a Reusable Image Picker Component

Reusable components reduce duplication and make camera and gallery behavior easier to maintain across profile screens, product forms, and other parts of an application.

16.1 Example Reusable Component

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

export default function ImageSelector({ value, onChange }) {
  const chooseImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        onChange(result.assets[0]);
      }
    } catch (error) {
      Alert.alert('Error', 'Unable to select an image.');
    }
  };

  const takePhoto = async () => {
    try {
      const permission =
        await ImagePicker.requestCameraPermissionsAsync();

      if (!permission.granted) {
        Alert.alert('Permission required', 'Camera access is needed.');
        return;
      }

      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        quality: 0.8,
      });

      if (!result.canceled && result.assets?.length) {
        onChange(result.assets[0]);
      }
    } catch (error) {
      Alert.alert('Error', 'Unable to capture a photo.');
    }
  };

  return (
    <View>
      <Button title="Choose Image" onPress={chooseImage} />
      <Button title="Take Photo" onPress={takePhoto} />
      {value?.uri && (
        <Image
          source={{ uri: value.uri }}
          style={{ width: 200, height: 200 }}
        />
      )}
    </View>
  );
}

16.2 Using the Component

import { useState } from 'react';
import { View, Text } from 'react-native';
import ImageSelector from './ImageSelector';

export default function ProfileScreen() {
  const [profileImage, setProfileImage] = useState(null);

  return (
    <View>
      <Text>Update Profile Picture</Text>
      <ImageSelector
        value={profileImage}
        onChange={setProfileImage}
      />
    </View>
  );
}

The parent component owns the selected image state, while the reusable component handles selection and capture. In a production project, you can extend the component with loading states, file validation, removal, upload progress, and customizable labels.

17. Error Handling and Troubleshooting

Camera and image selection workflows depend on operating-system permissions, device hardware, media availability, and file handling. Good error handling helps the application remain usable when something goes wrong.

17.1 Use Try-Catch Blocks

try {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
  });

  if (!result.canceled && result.assets?.length) {
    console.log('Selected:', result.assets[0].uri);
  }
} catch (error) {
  console.error('Image selection failed:', error);
}

17.2 Handle Android Pending Results

On Android, the operating system may destroy the application's main activity while the system picker is open. Expo ImagePicker provides getPendingResultAsync() for supported recovery scenarios. Review the official API documentation and test this behavior when reliability is important.

import * as ImagePicker from 'expo-image-picker';

async function recoverPendingPickerResult() {
  try {
    const pendingResult = await ImagePicker.getPendingResultAsync();

    if (pendingResult && !pendingResult.canceled) {
      const asset = pendingResult.assets?.[0];

      if (asset) {
        console.log('Recovered image:', asset.uri);
      }
    }
  } catch (error) {
    console.error('Unable to recover picker result:', error);
  }
}

Integrate pending-result recovery into an appropriate application lifecycle or initialization flow. Verify the actual result type before reading its properties, because errors and successful results can have different shapes.

18. Security and Privacy Best Practices

Images may contain sensitive information, including faces, identity documents, location metadata, or personal details. Camera and gallery features should be designed with privacy and data protection in mind.

• Request permissions only when required for a user-initiated feature.
• Explain why camera or media access is needed.
• Respect denied and limited permissions.
• Avoid logging private image URIs, authentication tokens, or sensitive metadata in production.
• Validate file type, size, dimensions, and content on the backend.
• Do not trust a filename or MIME type supplied by the client as proof that a file is safe.
• Use HTTPS for image uploads.
• Restrict upload size and allowed file types on the server.
• Store uploaded files with appropriate access controls.
• Remove temporary files when they are no longer needed and the platform allows it.
• Ask for explicit user action before uploading personal images.
• Consider whether EXIF metadata, such as location information, should be retained or stripped.

19. Performance Optimization

Large images can increase memory usage, upload time, and storage costs. Optimizing the media workflow helps applications remain responsive.

19.1 Practical Optimization Techniques

• Choose a reasonable output quality for the intended use case.
• Resize or compress images when required by product specifications.
• Show a preview without unnecessarily duplicating large image data in memory.
• Use thumbnails for lists and full-size images only when needed.
• Display upload progress for large files.
• Prevent accidental repeated uploads while a request is in progress.
• Use pagination or virtualized lists for galleries containing many images.
• Keep UI state separate from large binary content.
• Consider background or resumable upload strategies for applications that handle large media files.

19.2 Avoid Unnecessary Base64 Encoding

ImagePicker can return Base64 image data when requested. However, Base64 increases data size and can consume significant memory for large files. Prefer URI-based file handling and multipart upload unless Base64 is specifically required by the API or processing workflow.

20. Testing Camera and Image Picker Features

Testing should cover successful selection as well as cancellations, permission denial, network failure, and different device configurations.

20.1 Manual Testing Checklist

• Verify that the camera opens on a supported physical device.
• Capture a photo and confirm the preview appears correctly.
• Open the gallery and select an image.
• Cancel camera capture and gallery selection.
• Deny camera permission and verify the fallback message.
• Test limited media library access where supported.
• Test small and large images.
• Test image cropping and aspect ratio on Android and iOS.
• Test multiple image selection if the feature supports it.
• Verify file metadata and upload behavior.
• Test failed uploads and offline network conditions.
• Confirm that the application does not upload images without the intended user action.

20.2 Device and Platform Considerations

Camera and media behavior differs across Android, iOS, and web. Some options are platform-specific, and simulator support may be limited. Check the current documentation for the Expo SDK version used by the project and test on representative devices.

21. Mini Project: Profile Photo Upload Application

21.1 Project Objective

Build a React Native profile screen where users can capture a new photo or select an existing image, preview it, remove it, and upload it to a backend service.

21.2 Functional Requirements

1. Display a profile image placeholder when no image is selected.
2. Provide a Take Photo button.
3. Provide a Choose from Gallery button.
4. Request camera permission when needed.
5. Preview the selected image.
6. Display relevant image metadata.
7. Allow the user to replace or remove the image.
8. Validate image size and type before upload.
9. Show an upload progress or loading indicator.
10. Display success and failure messages.
11. Store the server-returned image reference after a successful upload.

21.3 Suggested Folder Structure

CameraImagePickerApp/
  App.js
  components/
    ImageSelector.js
    ImagePreview.js
  services/
    imageUploadService.js
  utils/
    imageValidation.js

21.4 Suggested Development Steps

1. Install and configure expo-image-picker.
2. Create a reusable image selector component.
3. Implement camera permission handling.
4. Implement camera capture and gallery selection.
5. Render a preview and display available metadata.
6. Write a validation function for file size and media type.
7. Implement multipart upload using the backend API contract.
8. Add loading indicators and error feedback.
9. Test permissions, cancellation, and platform differences.
10. Document setup instructions and test results.

21.5 Example Image Validation Function

function validateImage(asset, maxSizeBytes = 5 * 1024 * 1024) {
  if (!asset?.uri) {
    return { valid: false, message: 'Please select an image.' };
  }

  if (
    asset.mimeType &&
    !['image/jpeg', 'image/png', 'image/webp'].includes(asset.mimeType)
  ) {
    return { valid: false, message: 'Unsupported image type.' };
  }

  if (asset.fileSize != null && asset.fileSize > maxSizeBytes) {
    return { valid: false, message: 'Image must be 5 MB or smaller.' };
  }

  return { valid: true, message: 'Image is valid.' };
}

This client-side validation improves the user experience but does not replace server-side validation. The file size or MIME type may be unavailable, and file metadata supplied by the client must not be treated as a security guarantee.

22. Common Mistakes to Avoid

• Forgetting to install the image picker dependency.
• Assuming camera access is automatically granted.
• Reading assets[0] without checking cancellation and asset availability.
• Assuming the same permissions are required for every gallery selection workflow.
• Assuming every device supports the same camera or crop behavior.
• Using a local URI as a permanent remote image URL.
• Uploading files without validating size and type.
• Requesting excessive permissions that are unrelated to the feature.
• Sending large Base64 strings when URI-based uploads would be more suitable.
• Failing to handle upload errors and slow networks.
• Testing only on a simulator.
• Using image editing and multiple selection together without checking compatibility.

23. Interview Questions and Answers

Q1. What is camera integration in React Native?

Camera integration connects a React Native application to a device camera so users can capture photos or videos. A library such as Expo ImagePicker can launch the system camera interface.

Q2. What is an image picker?

An image picker is a user interface that allows a person to select existing media from a device's photo library or gallery.

Q3. Which library can be used for image selection in Expo?

The expo-image-picker library supports opening the camera and selecting media from the device library.

Q4. What is the purpose of launchCameraAsync()?

It opens the system camera capture interface and returns a result containing cancellation information and the captured media asset when successful.

Q5. What does launchImageLibraryAsync() do?

It opens the system media selection interface so the user can choose an existing image or other supported media.

Q6. Why should permissions be handled carefully?

Camera and media access involve personal data and device resources. The application should request the minimum permissions needed and explain their purpose.

Q7. What is the purpose of result.canceled?

It indicates whether the user canceled the picker or capture action. Checking it prevents the application from attempting to access an asset when none was selected.

Q8. What is the purpose of the asset URI?

The URI identifies the selected or captured media resource and can be used as the source for a local image preview or file upload, subject to its lifetime and platform behavior.

Q9. How can image quality be configured?

The ImagePicker options include a quality setting for supported image compression workflows. The resulting size and quality depend on the platform, image, and editing options.

Q10. How can an image be displayed?

Use React Native's Image component with a URI source and suitable width and height.

Q11. How can an image be uploaded to a backend?

Create a FormData object, append the image file information, and send it to an appropriate multipart endpoint using fetch or another networking library.

Q12. Why might an image URI stop working?

The URI may point to temporary or cached storage. If the file must remain available, copy it to suitable persistent storage or upload it to a server.

Q13. What is the difference between ImagePicker and a custom camera library?

ImagePicker provides a convenient system interface for capture and selection. A camera library such as expo-camera is more suitable when an application needs a custom live preview or more direct camera controls.

Q14. Why is backend image validation necessary?

Client-side checks can be bypassed. The server must independently validate file contents, size, type, and access rules before accepting and storing an upload.

Q15. How can image picker functionality be tested?

Test capture, selection, cancellation, denied permissions, limited photo access, large files, upload errors, and platform-specific behavior on physical devices and supported emulators.

24. Practical Exercises

1. Create a button that opens the camera and displays the captured image.
2. Create a gallery picker that allows the user to select one image.
3. Add an image preview with a remove button.
4. Implement permission denial handling for camera access.
5. Add cropping and a square aspect ratio to a profile photo workflow.
6. Display the selected image's dimensions and file size when available.
7. Implement multiple image selection with a maximum of five images.
8. Write a validation function that rejects unsupported file types.
9. Upload a selected image to a test backend using FormData.
10. Test how the application behaves when the user cancels selection or loses network connectivity.

25. Quick Revision Checklist

• Understand the difference between camera capture and gallery selection.
• Install expo-image-picker with the compatible Expo package command.
• Use launchCameraAsync() for camera capture.
• Use launchImageLibraryAsync() for gallery selection.
• Request camera permissions when needed.
• Handle cancellation and empty asset results.
• Use the returned URI to preview an image.
• Configure cropping, aspect ratio, quality, and media types according to requirements.
• Validate images before upload and validate them again on the server.
• Use appropriate persistent storage when a local asset must survive beyond its temporary lifetime.
• Handle errors, loading states, and upload failures.
• Test on physical devices and review platform-specific permission behavior.

26. Conclusion

Camera and image picker integration allows React Native applications to capture new photos and select existing media through familiar device interfaces. By using Expo ImagePicker, developers can implement common workflows without building a complete custom camera interface. A reliable implementation must also handle permissions, cancellation, asset metadata, previews, upload validation, temporary file storage, and platform differences.

For advanced camera previews and camera controls, explore Expo Camera. For image selection and standard capture workflows, consult the official Expo ImagePicker guide. To learn more about React Native development, visit the JustAcademy React Native Training Course or register for a course demo.

27. Additional Learning Resources

• Expo ImagePicker API Documentation
• Expo Image Picker Tutorial
• Expo Camera Documentation
• Expo Permissions Guide
• React Native Image Component
• JustAcademy React Native Training
• JustAcademy Demo Registration
• JustAcademy Official Website