Skip to main content

Camera 📸

The camera module provides a simple interface for capturing photos and recording videos with customizable options.

Usage​

import { openCamera } from '@baronha/react-native-multiple-image-picker'

const open = async () => {
  try {
    const response = await openCamera({
      mediaType: 'all',
      cameraDevice: 'back'
    })
    console.log(response)
  } catch (e) {
    console.log(e)
  }
}

Configuration Options​

mediaType​

Specifies the type of media that can be captured.

mediaType?: 'video' | 'image' | 'all'

Default: 'all'

cameraDevice​

Selects which camera to use for capture.

cameraDevice?: 'front' | 'back'

Default: 'back'

videoMaximumDuration​

Sets the maximum duration for video recording in seconds.

videoMaximumDuration?: number

Default: No limit

presentation​

Controls how the camera view is presented (iOS only).

presentation?: 'fullScreenModal' | 'formSheet'

Default: 'fullScreenModal'

language​

Sets the interface language.

language?: Language

Supported values:

  • 🌐 'system': System default
  • 🇨🇳 'zh-Hans': Simplified Chinese
  • 🇹🇼 'zh-Hant': Traditional Chinese
  • 🇯🇵 'ja': Japanese
  • 🇰🇷 'ko': Korean
  • 🇬🇧 'en': English
  • 🇹🇭 'th': Thai
  • 🇮🇩 'id': Indonesian
  • 🇻🇳 'vi': Vietnamese
  • 🇷🇺 'ru': Russian
  • 🇩🇪 'de': German
  • 🇫🇷 'fr': French
  • 🇸🇦 'ar': Arabic

Default: 'system'

crop​

Enables and configures image cropping after capture.

See details in Crop Configuration

color​

  • Type: ColorValue
  • Default: 🟦 #2979ff
  • Required: No
  • Platform: iOS, Android

Result Type​

The camera function returns a CameraResult object:

interface CameraResult {
  /**
   * Path to the captured media file
   * - iOS: Starts with 'file://'
   * - Android: Can start with 'file://' or 'content://'
   */
  path: string

  /**
   * Type of captured media
   * - 'video': For video recordings
   * - 'image': For photos
   */
  type: 'video' | 'image'

  /**
   * Width of the media in pixels
   * For cropped images, this represents the final cropped width
   */
  width: number

  /**
   * Height of the media in pixels
   * For cropped images, this represents the final cropped height
   */
  height: number

  /**
   * Duration of the video in seconds
   * Only available when type is 'video'
   * @platform ios, android
   */
  duration: number

  /**
   * Path to the video thumbnail image
   * Only available when type is 'video'
   * Format: 'file://path/to/thumbnail.jpg'
   * @platform ios, android
   */
  thumbnail?: string

  /**
   * Original filename of the captured media
   * Example: 'IMG_1234.JPG' or 'VID_5678.MP4'
   */
  fileName: string
}

Example Response​

Photo Capture​

{
  path: 'file:///var/mobile/Containers/.../IMG_0123.JPG',
  type: 'image',
  width: 3024,
  height: 4032,
  fileName: 'IMG_0123.JPG'
}

Video Recording​

{
  path: 'file:///var/mobile/Containers/.../VID_0124.MP4',
  type: 'video',
  width: 1920,
  height: 1080,
  duration: 15.6,
  thumbnail: 'file:///var/mobile/Containers/.../VID_0124_thumb.JPG',
  fileName: 'VID_0124.MP4'
}

Notes​

  • The path format may vary between iOS and Android. Always use the provided path as-is.
  • Video thumbnails are automatically generated and provided in the thumbnail property.
  • For cropped images, the width and height reflect the dimensions after cropping.
  • The duration property is only available for video recordings and is measured in seconds.
  • All file paths are provided with the appropriate prefix (file:// or content://).

Examples​

Photo Capture​

const result = await openCamera({
  mediaType: 'image',
  cameraDevice: 'back'
})

Video Recording​

const result = await openCamera({
  mediaType: 'video',
  videoMaximumDuration: 30,
  cameraDevice: 'front'
})

With Cropping​

const result = await openCamera({
  mediaType: 'image',
  crop: {
    circle: true,
    ratio: [
      { title: "Square", width: 1, height: 1 },
      { title: "Portrait", width: 3, height: 4 }
    ]
  }
})

Custom UI​

const result = await openCamera({
  color: '#FF6B6B',
  language: 'en',
  presentation: 'fullScreenModal'
})

Platform Specific Notes​

iOS​

  • Supports presentation option for modal style
  • Full support for all UI customization options

Android​

  • Maximum 4 custom crop ratios
  • Some UI elements may appear differently

Required Permissions​

iOS​

Add to Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required to take photos and videos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required to record videos</string>

Android​

Add to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />