react-native-customized-image-picker

react-native-customized-image-picker

iOS/Android image picker with support for camera, video compression, multiple images and cropping

Result

Usage

example

https://github.com/shijingsh/pickExample

Import library

import ImagePicker from "react-native-customized-image-picker";

Select from gallery

Call single image picker

ImagePicker.openPicker({}).then(image => {
  console.log(image);
});

Call multiple image picker

ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});

Select from camera

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

Select video

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.

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 /android/app/src/main/AndroidManifest.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

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

pod install

Setting themes

Setting language

• Add file gallery_strings.xml under the directory "yourProject\android\app\src\main\res\values".

<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".

<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 .

<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