Skip to content

Commit f164741

Browse files
baronhabaronha
committed
✨ feat: add document for camera.
1 parent 16e91af commit f164741

File tree

9 files changed

+279
-11
lines changed

9 files changed

+279
-11
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ React Native Multiple Image Picker **(RNMIP)** enables application to pick image
2727
| 📺 | Display video duration. |
2828
| 🎆 | Preview image/video. |
2929
| ⛅️ | Support iCloud Photo Library. |
30-
| 🔪 | Crop single/multiple image (new) ✨ |
30+
| 🍕 | Crop single/multiple image (new) ✨ |
3131
| 🌪 | Scrolling performance. ☕️ |
3232

3333
## Installation

‎docs/docs/CAMERA.mdx

+269
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
---
2+
id: camera
3+
title: Camera 📸
4+
sidebar_label: Camera 📸
5+
slug: /camera
6+
---
7+
8+
import ReactPlayer from 'react-player'
9+
10+
The camera module provides a simple interface for capturing photos and recording videos with customizable options.
11+
12+
<ReactPlayer
13+
playing
14+
controls
15+
width="100%"
16+
height="100%"
17+
url="https://github.com/user-attachments/assets/7afbc4cd-07a7-46b0-8501-9f1b3be70699"
18+
/>
19+
20+
## Usage
21+
22+
```typescript
23+
import { openCamera } from '@baronha/react-native-multiple-image-picker'
24+
25+
const open = async () => {
26+
try {
27+
const response = await openCamera({
28+
mediaType: 'all',
29+
cameraDevice: 'back'
30+
})
31+
console.log(response)
32+
} catch (e) {
33+
console.log(e)
34+
}
35+
}
36+
```
37+
38+
## Configuration Options
39+
40+
### `mediaType`
41+
Specifies the type of media that can be captured.
42+
43+
```typescript
44+
mediaType?: 'video' | 'image' | 'all'
45+
```
46+
47+
**Default:** `'all'`
48+
49+
### `cameraDevice`
50+
Selects which camera to use for capture.
51+
52+
```typescript
53+
cameraDevice?: 'front' | 'back'
54+
```
55+
56+
**Default:** `'back'`
57+
58+
### `videoMaximumDuration`
59+
Sets the maximum duration for video recording in seconds.
60+
61+
```typescript
62+
videoMaximumDuration?: number
63+
```
64+
65+
**Default:** No limit
66+
67+
### `presentation`
68+
Controls how the camera view is presented (iOS only).
69+
70+
```typescript
71+
presentation?: 'fullScreenModal' | 'formSheet'
72+
```
73+
74+
**Default:** `'fullScreenModal'`
75+
76+
### `language`
77+
Sets the interface language.
78+
79+
```typescript
80+
language?: Language
81+
```
82+
83+
**Supported values:**
84+
- 🌐 `'system'`: System default
85+
- 🇨🇳 `'zh-Hans'`: Simplified Chinese
86+
- 🇹🇼 `'zh-Hant'`: Traditional Chinese
87+
- 🇯🇵 `'ja'`: Japanese
88+
- 🇰🇷 `'ko'`: Korean
89+
- 🇬🇧 `'en'`: English
90+
- 🇹🇭 `'th'`: Thai
91+
- 🇮🇩 `'id'`: Indonesian
92+
- 🇻🇳 `'vi'`: Vietnamese
93+
- 🇷🇺 `'ru'`: Russian
94+
- 🇩🇪 `'de'`: German
95+
- 🇫🇷 `'fr'`: French
96+
- 🇸🇦 `'ar'`: Arabic
97+
98+
**Default:** `'system'`
99+
100+
### `crop`
101+
Enables and configures image cropping after capture.
102+
103+
See details in [Crop Configuration](/config/#crop-)
104+
105+
### `color`
106+
107+
- **Type**: [**ColorValue**](https://reactnative.dev/docs/colors)
108+
- **Default**: 🟦 `#2979ff`
109+
- **Required**: No
110+
- **Platform**: iOS, Android
111+
112+
## Result Type
113+
114+
The camera function returns a `CameraResult` object:
115+
116+
```typescript
117+
interface CameraResult {
118+
/**
119+
* Path to the captured media file
120+
* - iOS: Starts with 'file://'
121+
* - Android: Can start with 'file://' or 'content://'
122+
*/
123+
path: string
124+
125+
/**
126+
* Type of captured media
127+
* - 'video': For video recordings
128+
* - 'image': For photos
129+
*/
130+
type: 'video' | 'image'
131+
132+
/**
133+
* Width of the media in pixels
134+
* For cropped images, this represents the final cropped width
135+
*/
136+
width: number
137+
138+
/**
139+
* Height of the media in pixels
140+
* For cropped images, this represents the final cropped height
141+
*/
142+
height: number
143+
144+
/**
145+
* Duration of the video in seconds
146+
* Only available when type is 'video'
147+
* @platform ios, android
148+
*/
149+
duration: number
150+
151+
/**
152+
* Path to the video thumbnail image
153+
* Only available when type is 'video'
154+
* Format: 'file://path/to/thumbnail.jpg'
155+
* @platform ios, android
156+
*/
157+
thumbnail?: string
158+
159+
/**
160+
* Original filename of the captured media
161+
* Example: 'IMG_1234.JPG' or 'VID_5678.MP4'
162+
*/
163+
fileName: string
164+
}
165+
```
166+
167+
### Example Response
168+
169+
#### Photo Capture
170+
```typescript
171+
{
172+
path: 'file:///var/mobile/Containers/.../IMG_0123.JPG',
173+
type: 'image',
174+
width: 3024,
175+
height: 4032,
176+
fileName: 'IMG_0123.JPG'
177+
}
178+
```
179+
180+
#### Video Recording
181+
```typescript
182+
{
183+
path: 'file:///var/mobile/Containers/.../VID_0124.MP4',
184+
type: 'video',
185+
width: 1920,
186+
height: 1080,
187+
duration: 15.6,
188+
thumbnail: 'file:///var/mobile/Containers/.../VID_0124_thumb.JPG',
189+
fileName: 'VID_0124.MP4'
190+
}
191+
```
192+
193+
### Notes
194+
195+
- The `path` format may vary between iOS and Android. Always use the provided path as-is.
196+
- Video thumbnails are automatically generated and provided in the `thumbnail` property.
197+
- For cropped images, the `width` and `height` reflect the dimensions after cropping.
198+
- The `duration` property is only available for video recordings and is measured in seconds.
199+
- All file paths are provided with the appropriate prefix (`file://` or `content://`).
200+
201+
## Examples
202+
203+
### Photo Capture
204+
```typescript
205+
const result = await openCamera({
206+
mediaType: 'image',
207+
cameraDevice: 'back'
208+
})
209+
```
210+
211+
### Video Recording
212+
```typescript
213+
const result = await openCamera({
214+
mediaType: 'video',
215+
videoMaximumDuration: 30,
216+
cameraDevice: 'front'
217+
})
218+
```
219+
220+
### With Cropping
221+
```typescript
222+
const result = await openCamera({
223+
mediaType: 'image',
224+
crop: {
225+
circle: true,
226+
ratio: [
227+
{ title: "Square", width: 1, height: 1 },
228+
{ title: "Portrait", width: 3, height: 4 }
229+
]
230+
}
231+
})
232+
```
233+
234+
### Custom UI
235+
```typescript
236+
const result = await openCamera({
237+
color: '#FF6B6B',
238+
language: 'en',
239+
presentation: 'fullScreenModal'
240+
})
241+
```
242+
243+
## Platform Specific Notes
244+
245+
### iOS
246+
- Supports `presentation` option for modal style
247+
- Full support for all UI customization options
248+
249+
### Android
250+
- Maximum 4 custom crop ratios
251+
- Some UI elements may appear differently
252+
253+
## Required Permissions
254+
255+
### iOS
256+
Add to `Info.plist`:
257+
```xml
258+
<key>NSCameraUsageDescription</key>
259+
<string>Camera access is required to take photos and videos</string>
260+
<key>NSMicrophoneUsageDescription</key>
261+
<string>Microphone access is required to record videos</string>
262+
```
263+
264+
### Android
265+
Add to `AndroidManifest.xml`:
266+
```xml
267+
<uses-permission android:name="android.permission.CAMERA" />
268+
<uses-permission android:name="android.permission.RECORD_AUDIO" />
269+
```

‎docs/docs/CONFIG.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ Theme mode for the picker.
177177

178178
Primary color for the picker UI elements.
179179

180-
- **Type**: ColorValue
180+
- **Type**: [**ColorValue**](https://reactnative.dev/docs/colors)
181181
- **Default**: 🟦 `#2979ff`
182182
- **Required**: No
183183
- **Platform**: iOS, Android
@@ -186,7 +186,7 @@ Primary color for the picker UI elements.
186186

187187
Background color for dark mode UI elements.
188188

189-
- **Type**: ColorValue
189+
- **Type**: [**ColorValue**](https://reactnative.dev/docs/colors)
190190
- **Default**: ⚫️ `#1A1A1A`
191191
- **Required**: No
192192
- **Platform**: iOS, Android

‎docs/docs/CROP.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: crop
3-
title: Open Crop
4-
sidebar_label: Open Crop
3+
title: Crop 🍕
4+
sidebar_label: Crop 🍕
55
slug: /crop
66
---
77

‎docs/docs/PREVIEW.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: preview
3-
title: Open Preview
4-
sidebar_label: Open Preview
3+
title: Preview 🎑
4+
sidebar_label: Preview 🎑
55
slug: /preview
66
---
77

‎docs/docs/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ React Native Multiple Image Picker **(RNMIP)** enables application to pick image
3535
| 📺 | Display video duration. |
3636
| 🎆 | Preview image/video. |
3737
| ⛅️ | Support iCloud Photo Library. |
38-
| 🔪 | Crop single/multiple image (new) ✨ |
38+
| 🍕 | Crop single/multiple image (new) ✨ |
3939
| 🌪 | Scrolling performance. ☕️ |
4040

4141
## Sponsor & Support ☕️

‎docs/sidebars.ts

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const sidebars: SidebarsConfig = {
2626

2727
'crop',
2828
'preview',
29+
'camera',
2930
],
3031
}
3132

‎example/src/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,6 @@ export default function App() {
9393
}
9494
}
9595

96-
console.log('images: ', images)
97-
9896
const onCamera = async () => {
9997
try {
10098
const response = await openCamera()

‎src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ const validateLanguage = (language?: Language): Language => {
162162
return language
163163
}
164164

165-
const primaryColor = '#FB9300'
165+
const primaryColor = '#2979ff'
166166

167167
export const defaultOptions: Config = {
168168
maxSelect: DEFAULT_COUNT,

0 commit comments

Comments
 (0)