@optisolbusiness/react-native-image-picker

A React Native module that allows you to select a photo/video from the device library or camera, documents from device library.

Installation

npm install @optisolbusiness/react-native-image-picker react-native-permissions react-native-document-picker react-native-image-picker react-native-awesome-alerts

iOS

update your package.json by adding the permissions,

 "reactNativePermissionsIOS": [
    "Camera",
    "PhotoLibrary",
    "Microphone"
  ],

then run npx react-native setup-ios-permissions followed by pod install

Then update your Info.plist with permissions usage descriptions:

<key>NSCameraUsageDescription</key>
<string>Your message to users when the camera is accessed for the first time</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to users when the photo library is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>YOUR TEXT</string>

Android

Add permissions to your app android/app/src/main/AndroidManifest.xml file:

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

Usage

import { CameraPicker, ImagePicker, DocumentPicker } from "@optisolbusiness/react-native-image-picker";

// ...

 <CameraPicker
   selectedTakePicture={handleSelectedTakePicture}
   alertMessage={'Maximum length exceeded'}
   mediaType={'video'}
 />

<ImagePicker
   selectedImage={selectedImage}
   alertMessage={'Maximum length exceeded'}
   maximumSelect={3}
   mediaType={'video'}
 />

<DocumentPicker
   supportedFormat={["pdf"]}
   maximumSelect={3}
   alertMessage={"Maximum length exceeded"}
   cancelMessage={"User Canceled"}
   selectedDocument={selectedDocument}
/>

CameraPicker Props

| Prop | Type | Description | :------------ |:---------------| :-----| | selectedTakePicture | Object | Mandatory. To get response object | | alertMessage | string | Mandatory. To Show alert message | | mediaType | String | Mandatory. 'photo' or 'video' | | formatAsMp4 | Boolean | Mandatory. Converts the selected video to MP4. iOS Only. when mediaType is 'video' |

ImagePicker Props

| Prop | Type | Description | :------------ |:---------------| :-----| | selectedImage | Object | Mandatory. To get response object | | alertMessage | String | Mandatory. To Show alert message | | mediaType | String | Mandatory. 'photo' or 'video' or 'mixed'| | formatAsMp4 | Boolean | Mandatory. Converts the selected video to MP4. iOS Only. when mediaType is 'video' | | maximumSelect | Number | Mandatory. allow any number of files |

DocumentPicker Props

| Prop | Type | Description | :------------ |:---------------| :-----| | selectedDocument | Object | Mandatory. To get response object | | alertMessage | String | Mandatory. To Show alert message | | cancelMessage | String | Mandatory. Show cancel alert message | | maximumSelect | Number | Mandatory. allow any number of files | | supportedFormat | Object of Array | Mandatory. Type of Document |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library