Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
react-native-customized-image-picker
Advanced tools
Select single or multiple images, with croping option
iOS/Android image picker with support for camera, video compression, multiple images and cropping
https://github.com/shijingsh/pickExample
import ImagePicker from "react-native-customized-image-picker";
Call single image picker
ImagePicker.openPicker({}).then(image => {
console.log(image);
});
Call multiple image picker
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
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);
});
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);
});
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) |
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 |
npm i react-native-customized-image-picker --save
yarn add react-native-customized-image-picker
<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" />
<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
cd ios and run
pod install
<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>
<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>
<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>
MIT
FAQs
Select single or multiple images, with croping option
The npm package react-native-customized-image-picker receives a total of 273 weekly downloads. As such, react-native-customized-image-picker popularity was classified as not popular.
We found that react-native-customized-image-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.