Socket
Socket
Sign inDemoInstall

react-native-image-video-picker-editor

Package Overview
Dependencies
0
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-image-video-picker-editor

Picker and editor for image and video muliti select image and videotrimmer and image cropper


Version published
Maintainers
1
Weekly downloads
9
decreased by-75%

Weekly downloads

Readme

Source

react-native-image-video-picker-editor

iOS/Android image picker with support for camera, video, configurable compression, multiple images,image cropping , video trimming, max video lenght, photo take, video record, profile mask view

Result

Important note

I never try it with react-native < 0.60

Install

Step 1

npm i react-native-image-video-picker-editor --save

Step 2 Dependencies

npm @react-native-community/cameraroll @react-native-community/image-editor @react-native-community/masked-view react-native-camera react-native-vector-icons react-native-video react-native-video-helper react-native-easy-view-transformer

iOS

cd ios
pod install

Android

  • VERY IMPORTANT Add the following to your build.gradle's . (android/App/build.gradle)

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

react-native link

Step 4 Permissions

iOS add these to info.plist

Privacy - Photo Library Usage Description  (NSPhotoLibraryUsageDescription)
Privacy - Camera Usage Description (NSCameraUsageDescription)
Privacy - Microphone Usage Description (NSMicrophoneUsageDescription)

Android add these to android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Manual Installation

please follow each dependensy document :

Usage

Import library

import MImagePicker from 'react-native-image-video-picker-editor'
import { HandleCrop } from 'react-native-image-video-picker-editor/cropper'
<MImagePicker
    header={{ nextTitle: "Next", cancelTitle: "Cancel" }}
    onCancel={() => { }}
    onNext={async (param) => {
      param.videoMaxLen = 3; // not set or 0 for unlimited
      param.videoQuality = 'low';
      const res = await HandleCrop(param);
      this.setState({ result: res, showResult: true })
    }}
    cropSize={{ width: 200, height: 200 }}
    maxScale={10}  
    max={4}
    cameraConfig = {{ camerPhotoTile: "Photo", cameraVideoTitle: "Video", cameraCancelTitle: "Cancle", maxVideoLen: 0, videoQuality: "480p" }}
  // profile={true}

  />

Keywords

FAQs

Last updated on 19 Jul 2020

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc