### Start Example App Packager

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application.

```sh
yarn example start
```

--------------------------------

### Install and Build Project

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/example/README.md

Commands to install project dependencies and clean the build.

```bash
yarn
yarn prebuild --clean
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Builds and runs the example app on an iOS simulator or device.

```sh
yarn example ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Builds and runs the example app on an Android device or emulator.

```sh
yarn example android
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all required dependencies for each package.

```sh
yarn
```

--------------------------------

### Bootstrap Project Dependencies

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Installs all project dependencies and pods, setting up the development environment.

```sh
yarn bootstrap
```

--------------------------------

### Install for React Native CLI

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/GETTING_STARTED.mdx

Install the package and its peer dependency for React Native CLI projects. Remember to run `pod install` for iOS.

```bash
yarn add @baronha/react-native-multiple-image-picker
yarn add -D react-native-nitro-modules
cd ios && pod install
```

--------------------------------

### Install for Expo

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/GETTING_STARTED.mdx

Install the package and its peer dependency for Expo projects. Use `npx expo prebuild` to prepare the native project.

```bash
npx expo install @baronha/react-native-multiple-image-picker 
npx expo install react-native-nitro-modules -- --dev
npx expo prebuild
```

--------------------------------

### Previewing Local and Remote Media

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/PREVIEW.mdx

Use `openPreview` to display a list of images and videos. Configure preview options like language. Ensure media paths are correct and the package is installed.

```typescript
import {
  openPreview,
  PreviewConfig,
} from '@baronha/react-native-multiple-image-picker'

const previewConfig: PreviewConfig = {
  language: 'system',
}

const media: MediaPreview[] = [
  // remote image
  {
    path: 'https://images.unsplash.com/photo-1733235015085-fc29c17c4a16?w=500',
    type: 'image',
  },
  // local video
  {
    path: 'file://Documents/video-sample/mp4',
    thumbnail:
      'https://images.unsplash.com/photo-1733889886752-f4599c954608?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    type: 'video',
  },
  // remote video
  {
    path: 'https://cdn.pixabay.com/video/2024/02/09/199958-911694865_large.mp4',
    type: 'video',
  },
]

// call to preview
openPreview(media, 2, previewConfig)
```

--------------------------------

### Photo Capture Example Response

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Illustrates the expected result object structure for a photo capture operation.

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

--------------------------------

### Video Recording Example Response

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Shows the typical response object for a video recording, including duration and thumbnail.

```typescript
{
  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'
}
```

--------------------------------

### Record Video

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Starts video recording with a specified maximum duration and camera device. The 'video' media type must be selected.

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

--------------------------------

### Set Up Local Include Directories

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Configures directories from which header files can be included.

```cmake
include_directories(
        "src/main/cpp"
        "../cpp"
)
```

--------------------------------

### Basic Image Picker Usage with Configuration

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/USAGE.mdx

Demonstrates how to import and use the `openPicker` function with a custom configuration object. This snippet shows setting maximum selections, media types, and UI themes. It's useful for customizing the picker's appearance and behavior.

```typescript
import { openPicker, Config } from '@baronha/react-native-multiple-image-picker'

const config: Config = {
  maxSelect: 10,
  maxVideo: 10,
  primaryColor: '#FB9300',
  backgroundDark: '#2f2f2f',
  numberOfColumn: 4,
  mediaType: 'all',
  selectBoxStyle: 'number',
  selectMode: 'multiple',
  language: 'vi', // 🇻🇳 Vietnamese
  theme: 'dark',
  isHiddenOriginalButton: false,
  primaryColor: '#F6B35D',
}

const onPicker = async () => {
  try {
    const response = await openPicker(config)
    setImages(response)
  } catch (e) {
    // catch error for multiple image picker
  }
}
```

--------------------------------

### Open Cropper with Configuration

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CROP.mdx

Demonstrates how to import and use the `openCropper` function to open the image cropper with a specified configuration. Ensure the image path is correct and handle potential errors.

```typescript
import { openCropper } from '@baronha/react-native-multiple-image-picker'

const cropConfig: CropConfig = {
  // ...
}

const open = async () => {
  try {
    const response = await openCropper('file://path/to/image.jpg', cropConfig)
    setImages(response)
  } catch (e) {
    // catch error for multiple image picker
  }
}
```

--------------------------------

### iOS Info.plist Permissions

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/GETTING_STARTED.mdx

Add these keys to your project's `Info.plist` file to grant necessary permissions for photo library and camera access.

```xml
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) needs photo library permissions</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) needs photo library permissions</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs to access your Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs to access your microphone so that you can record audio.</string>
```

--------------------------------

### Customize Camera UI

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Opens the camera with custom UI elements such as color, language, and presentation style. Use 'color', 'language', and 'presentation' options.

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

--------------------------------

### Project and CMake Minimum Version

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Defines the project name and the minimum required CMake version.

```cmake
project(MultipleImagePicker)
cmake_minimum_required(VERSION 3.9.0)
```

--------------------------------

### Display Showcase Data in React Native

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/SHOWCASE/index.mdx

Renders a list of applications from JSON data, linking to each application's page. Ensure the 'showcase.css' and 'showcase.json' files are correctly imported and structured.

```javascript
import style from './showcase.css'
import data from './showcase.json'

<div className="showcaseContainer">
  {data.map((item, index) => {
    return (
      <a
        key={`showcase-${index}`}
        href={item.link}
        target="_blank"
        className="showcaseItem"
      >
        <img src={item.banner} alt={item.title} className="showcaseBanner" />
        <b>{item.title}</b>
        <p className="showcaseTagline">{item?.tagline}</p>
      </a>
    )
  })}
</div>
```

--------------------------------

### Open Camera for Media Capture

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Opens the device camera to capture photos, videos, or both. Specify the desired media type and camera device.

```typescript
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)
  }
}
```

--------------------------------

### Run Unit Tests

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
yarn test
```

--------------------------------

### Add C++ Library and Sources

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Defines a shared C++ library and lists its source files.

```cmake
add_library(${PACKAGE_NAME} SHARED
        src/main/cpp/cpp-adapter.cpp
)
```

--------------------------------

### openCamera

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Opens the device's camera to capture photos or record videos with various configuration options.

```APIDOC
## openCamera

### Description
Opens the device's camera to capture photos or record videos. This function allows for extensive customization through its configuration options.

### Method
`openCamera(options?: CameraOptions): Promise<CameraResult[]>`

### Parameters
#### Options (`CameraOptions`)
- **mediaType** (`'video' | 'image' | 'all'`) - Optional - Specifies the type of media that can be captured. Defaults to `'all'`.
- **cameraDevice** (`'front' | 'back'`) - Optional - Selects which camera to use for capture. Defaults to `'back'`.
- **videoMaximumDuration** (`number`) - Optional - Sets the maximum duration for video recording in seconds. Defaults to no limit.
- **presentation** (`'fullScreenModal' | 'formSheet'`) - Optional - Controls how the camera view is presented (iOS only). Defaults to `'fullScreenModal'`.
- **language** (`Language`) - Optional - Sets the interface language. Defaults to `'system'`.
- **crop** (`CropOptions`) - Optional - Enables and configures image cropping after capture. See [Crop Configuration](/config/#crop-).
- **color** (`ColorValue`) - Optional - Sets the color for UI elements. Defaults to `#2979ff`.

### Result Type (`CameraResult`)
- **path** (`string`) - Path to the captured media file. iOS paths start with 'file://', Android paths can start with 'file://' or 'content://'.
- **type** (`'video' | 'image'`) - Type of captured media.
- **width** (`number`) - Width of the media in pixels. For cropped images, this represents the final cropped width.
- **height** (`number`) - Height of the media in pixels. For cropped images, this represents the final cropped height.
- **duration** (`number`) - Optional - Duration of the video in seconds. Only available when type is 'video'.
- **thumbnail** (`string`) - Optional - Path to the video thumbnail image. Only available when type is 'video'. Format: 'file://path/to/thumbnail.jpg'.
- **fileName** (`string`) - Original filename of the captured media.

### Examples
#### Photo Capture
```typescript
const result = await openCamera({
  mediaType: 'image',
  cameraDevice: 'back'
})
```

#### Video Recording
```typescript
const result = await openCamera({
  mediaType: 'video',
  videoMaximumDuration: 30,
  cameraDevice: 'front'
})
```

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

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

--------------------------------

### Verify TypeScript and ESLint

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Runs TypeScript for type checking and ESLint for code linting to ensure code quality.

```sh
yarn typescript
yarn lint
```

--------------------------------

### iOS Camera and Microphone Permissions

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Add these keys to your Info.plist file to request camera and microphone access on iOS.

```xml
<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>
```

--------------------------------

### Package Name and Verbose Makefiles

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Sets the package name and enables verbose output for the build process.

```cmake
set (PACKAGE_NAME MultipleImagePicker)
set (CMAKE_VERBOSE_MAKEFILE ON)
```

--------------------------------

### Include Autolinking Script

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Includes a generated CMake script for autolinking Nitrogen specifications.

```cmake
include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/MultipleImagePicker+autolinking.cmake)
```

--------------------------------

### Camera Result Interface

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Defines the structure of the object returned after capturing media. Includes path, type, dimensions, duration, and thumbnail for videos.

```typescript
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
}
```

--------------------------------

### Enjoy Message

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/example/README.md

A simple message indicating completion.

```bash
NNN Enjoy Bro 🐧
```

--------------------------------

### Android Camera and Microphone Permissions

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Include these permission tags in your AndroidManifest.xml file to enable camera and audio recording on Android.

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

--------------------------------

### Capture Image with Cropping

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Captures an image and enables cropping with predefined aspect ratios. Configure the 'crop' option with desired ratios.

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

--------------------------------

### Link Libraries

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Links the project's C++ library with system and external libraries.

```cmake
target_link_libraries(
        ${PACKAGE_NAME}
        ${LOG_LIB}
        android                                   # <-- Android core
)
```

--------------------------------

### Capture Photo

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/CAMERA.mdx

Initiates the camera to capture a single image. Ensures the 'image' media type is specified.

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

--------------------------------

### C++ Standard Version

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Specifies the C++ standard to be used for compilation.

```cmake
set (CMAKE_CXX_STANDARD 20)
```

--------------------------------

### Find Log Library

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/android/CMakeLists.txt

Locates the Android log library for use in the project.

```cmake
find_library(LOG_LIB log)
```

--------------------------------

### Rebuild Expo Project After Config Changes

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/GETTING_STARTED.mdx

After updating your Expo app configuration, run `npx expo prebuild` to apply the changes to the native project. For EAS builds, run `eas build`.

```bash
npx expo prebuild
```

```bash
eas build
```

--------------------------------

### Result Object Properties

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/RESULT.mdx

The result object contains various properties describing the selected media item, including its path, file details, dimensions, type, and platform-specific information.

```APIDOC
## Result Object

### Description
This object represents a single media item selected by the user.

### Properties

- **path** (string) - Local file path of the media.
- **fileName** (string) - Name of the media file.
- **localIdentifier** (string) - Unique identifier for the media asset.
- **width** (number) - Width of the media in pixels.
- **height** (number) - Height of the media in pixels.
- **mime** (string) - MIME type of the media file.
- **size** (number) - File size in bytes.
- **bucketId** (number) - ID of the bucket containing the media. (Android only)
- **realPath** (string) - Actual file path in the device storage. (Android only)
- **parentFolderName** (string) - Name of the parent folder. (Android only)
- **creationDate** (number) - Creation timestamp of the media.
- **type** (string) - Type of the media file. Options: `image` | `video`.
- **duration** (number) - Duration in seconds (for video files).
- **thumbnail** (string) - Thumbnail path for video files.
- **crop** (boolean) - Indicates if the media has been cropped.
```

--------------------------------

### Long Press Callback for Preview

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/PREVIEW.mdx

Define an `onLongPress` callback function to handle long press events on media items within the preview. This function receives the index of the long-pressed item.

```typescript
onLongPress: (index: number) => void
```

--------------------------------

### Expo App Configuration for Permissions

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/docs/docs/GETTING_STARTED.mdx

Configure iOS permissions within your `app.json`, `app.config.json`, or `app.config.js` for managed Expo apps.

```json
{
  "name": "my app",
  "ios": {
    // ...
    "infoPlist": {
      "NSPhotoLibraryAddUsageDescription": "$(PRODUCT_NAME) needs photo library permissions",
      "NSPhotoLibraryUsageDescription": "$(PRODUCT_NAME) needs photo library permissions",
      "NSCameraUsageDescription": "$(PRODUCT_NAME) needs to access your Camera",
      "NSMicrophoneUsageDescription": "$(PRODUCT_NAME) needs to access your microphone so that you can record audio"
    }
    // ...
  }
}
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/nitrogenzlab/react-native-multiple-image-picker/blob/main/CONTRIBUTING.md

Automatically fixes formatting errors detected by ESLint.

```sh
yarn lint --fix
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.