react-native-customized-image-picker
Version:
Select single or multiple images, with croping option
305 lines (250 loc) • 12.9 kB
Markdown
# react-native-customized-image-picker
iOS/Android image picker with support for camera, video compression, multiple images and cropping
## Result
<p align="left">
<img width=200 height=356 title="Multiple Pick" src="https://github.com/samad324/react-native-customized-image-picker/blob/master/images/pic.png">
<img width=200 height=356 title="video Pick" src="https://github.com/samad324/react-native-customized-image-picker/blob/master/images/pic2.png">
<img width=200 height=356 title="iOS multiple Pick" src="https://github.com/samad324/react-native-customized-image-picker/blob/master/images/pic3.png">
</p>
## Usage
<a href="https://nodei.co/npm/react-native-customized-image-picker/">
<img src="https://nodei.co/npm/react-native-customized-image-picker.svg?downloads=true&downloadRank=true&stars=true">
</a>
<p>
<a href="https://badge.fury.io/js/react-native-customized-image-picker">
<img src="https://badge.fury.io/js/react-native-customized-image-picker.svg" alt="npm version" height="18">
</a>
<a href="https://npmjs.org/react-native-customized-image-picker">
<img src="https://img.shields.io/npm/dm/react-native-customized-image-picker.svg" alt="npm downloads" height="18">
</a>
<a href="https://travis-ci.org/aws/react-native-customized-image-picker">
<img src="https://travis-ci.org/aws/react-native-customized-image-picker.svg?branch=master" alt="build:started">
</a>
<a href="https://codecov.io/gh/aws/react-native-customized-image-picker">
<img src="https://codecov.io/gh/aws/react-native-customized-image-picker/branch/master/graph/badge.svg" />
</a>
</p>
#### example
https://github.com/shijingsh/pickExample
#### Import library
```javascript
import ImagePicker from "react-native-customized-image-picker";
```
#### Select from gallery
Call single image picker
```javascript
ImagePicker.openPicker({}).then(image => {
console.log(image);
});
```
Call multiple image picker
```javascript
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
```
### Select from camera
```javascript
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
```
Select video
```javascript
ImagePicker.openCamera({
width: 300,
height: 400,
isVideo: true
}).then(image => {
console.log(image);
});
```
### Optional cleanup
Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use `clean` to clean all tmp files.
Delete the cut, compression, and photographed pictures.
```javascript
ImagePicker.clean()
.then(() => {
console.log("removed all tmp images from tmp directory");
})
.catch(e => {
console.log(e);
});
```
#### Request Object
| Property | Type | Description |
| ---------------------- | :----------------------: | :-------------------------------------------------------------------- |
| cropping | bool (default false) | Enable or disable cropping |
| width | number(default 200) | Width of result image when used with `cropping` option |
| height | number(default 200) | Height of result image when used with `cropping` option |
| multiple | bool (default false) | Enable or disable multiple image selection |
| isCamera | bool (default false) | Enable or disable camera selection |
| openCameraOnStart | bool (default false) | Enable or disable turn on the camera when it starts |
| returnAfterShot | bool (default false) | Enable or disable pictures taken directly |
| multipleShot | bool (default false) | Enable or disable Capture image multiple time |
| maxSize | number (default 9) | set image count |
| spanCount | number (default 3) | Set the number of pictures displayed in a row |
| includeBase64 | bool (default false) | Enable or disable includeBase64 |
| compressQuality | number([0-100]) | Picture compression ratio |
| minCompressSize | number | Setting the minimum size of the compressed file(kb) |
| title | string | Sets the title of the page |
| isVideo | bool (default false) | Enable or disable video only |
| isSelectBoth | bool (default false) | Enable or disable select both images and videos |
| isHidePreview | bool (default false) | Enable or disable hidden preview button |
| isHideVideoPreview | bool (default false) | Enable or disable hidden video preview button |
| isPlayGif | bool (default false) | Enable or disable play gif |
| hideCropBottomControls | bool (default true) | Enable or disable crop controls |
| aspectRatioX | number (default 1) | Set an aspect ratio X for crop bounds. |
| aspectRatioY | number (default 1) | Set an aspect ratio Y for crop bounds. |
| videoQuality | number (default 1) | 1: high 0: low. |
| imageLoader | string (default "GLIDE") | Sets the imageLoader of the page,enum(PICASSO,GLIDE,FRESCO,UNIVERSAL) |
#### Response Object
| Property | Type | Description |
| -------- | :----: | :----------------------------------------------- |
| path | string | Selected image location |
| width | number | Selected image width |
| height | number | Selected image height |
| mime | string | Selected image MIME type (image/jpeg, image/png) |
| size | number | Selected image size in bytes |
| data | base64 | Optional base64 selected file representation |
## Install
```
npm i react-native-customized-image-picker --save
yarn add react-native-customized-image-picker
```
#### android
#### add permission <pickerExample>/android/app/src/main/AndroidManifest.xml
```xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
```
### iOS
- [TZImagePickerController](https://github.com/banchichen/TZImagePickerController)
#### info.plist add the following to the file
```
<key>NSCameraUsageDescription</key>
<string>1</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>1</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>1</string>
```
auto linked
#### pod install
cd ios and run
```bash
pod install
```
## Setting themes
#### Setting language
- Add file gallery_strings.xml under the directory "yourProject\android\app\src\main\res\values".
```xml
<resources>
<string name="gallery_loading_view_click_loading_more">Load more</string>
<string name="gallery_loading_view_no_more">No more</string>
<string name="gallery_loading_view_loading">Loading…</string>
<string name="gallery_over_button_text">Complete</string>
<string name="gallery_over_button_text_checked">Complete(%1$d/%2$d)</string>
<string name="gallery_image_max_size_tip">You can only choose %1$d photos</string>
<string name="gallery_page_title">%1$d/%2$d</string>
<string name="gallery_media_grid_image_title">photos</string>
<string name="gallery_media_grid_video_title">video</string>
<string name="gallery_default_request_storage_access_permission_tips">App request to read your album</string>
<string name="gallery_default_camera_access_permission_tips">>App request to Camera</string>
<string name="gallery_default_media_empty_tips">Absolutely empty</string>
<string name="gallery_device_no_camera_tips">The device has no camera</string>
<string name="gallery_device_camera_unable">Camera not available</string>
<string name="gallery_preview_title">preview</string>
<string name="gallery_all_image">All pictures</string>
<string name="gallery_all_video">All video</string>
<string name="gallery_take_image">Photograph</string>
<string name="gallery_image_selected">Selected</string>
<string name="gallery_image_unit">pictures</string>
<string name="gallery_title_cut">cut</string>
<string name="gallery_video">record video</string>
</resources>
```
#### Setting style
- modify file styles.xml under the directory "yourProject\android\app\src\main\res\values".
```xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
<style name="Theme_Light.Default">
<item name="gallery_toolbar_bg">#233</item>
<item name="gallery_toolbar_close_image">@mipmap/ic_launcher</item>
<item name="gallery_toolbar_close_color">#223</item>
<item name="gallery_toolbar_widget_color">#2A2A2F</item>
<item name="gallery_toolbar_text_color">#fff</item>
<item name="gallery_toolbar_text_size">16dp</item>
<item name="gallery_toolbar_divider_height">16dp</item>
<item name="gallery_toolbar_divider_bg">#1976D2</item>
<item name="gallery_toolbar_bottom_margin">10dp</item>
<item name="gallery_toolbar_text_gravity">right</item>
<item name="gallery_toolbar_height">16dp</item>
<item name="gallery_toolbar_over_button_bg">@mipmap/ic_launcher</item>
<item name="gallery_toolbar_over_button_text_size">16dp</item>
<item name="gallery_toolbar_over_button_text_color">#446</item>
<item name="gallery_toolbar_over_button_pressed_color">#1976D2</item>
<item name="gallery_toolbar_over_button_normal_color">#1976D2</item>
<item name="gallery_color_statusbar">#1976D2</item>
<item name="gallery_color_active_widget">#1976D2</item>
<item name="gallery_checkbox_button_tint_color">#1976D2</item>
<item name="gallery_checkbox_text_color">#1976D2</item>
<item name="gallery_page_bg">#FFFFFF</item>
<item name="gallery_default_image">@mipmap/ic_launcher</item>
<item name="gallery_camera_image">@mipmap/ic_launcher</item>
<item name="gallery_camera_bg">#1976D2</item>
<item name="gallery_take_image_text_color">#1976D2</item>
<item name="gallery_ucrop_status_bar_color">#1976D2</item>
<item name="gallery_ucrop_toolbar_color">#1976D2</item>
<item name="gallery_ucrop_toolbar_widget_color">#1976D2</item>
<item name="gallery_ucrop_activity_widget_color">#1976D2</item>
<item name="gallery_ucrop_toolbar_title">@string/app_name</item>
</style>
<style name="gallery_checkBox" parent="@android:style/Widget.CompoundButton.CheckBox">
<item name="android:scaleX">1.5</item>
<item name="android:scaleY">1.5</item>
</style>
</resources>
```
- modify file AndroidManifest.xml .
```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example"
android:versionCode="1"
android:versionName="1.0">
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
tools:replace="android:theme"
android:requestLegacyExternalStorage="true"
android:theme="@style/AppTheme">
<meta-data android:name="ScopedStorage" android:value="true" />
<activity
android:name="cn.finalteam.rxgalleryfinal.ui.activity.MediaActivity"
android:exported="true"
android:theme="@style/Theme_Light.Default" />
</application>
</manifest>
```
##### Important content
- xmlns:tools="http://schemas.android.com/tools"
- tools:replace="android:theme"
- android:theme="@style/AppTheme"
- cn.finalteam.rxgalleryfinal.ui.activity.MediaActivity Theme_Light.Default
## License
_MIT_