Getting Started

Installation

yarn add @blitzmobileapps/react-native-advanced-image-picker --OR-- npm i @blitzmobileapps/react-native-advanced-image-picker

Automatic Linking enabled for both ios and android, but we need to do a few additional platform specific steps

Android

Add the following permissions in AndroidManifest.xml file

<uses-feature  android:name="android.hardware.camera"/>
<uses-feature  android:name="android.hardware.camera.autofocus"/>
<uses-permission  android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission  android:name="android.permission.RECORD_AUDIO"/>
<uses-permission  android:name="android.permission.FLASHLIGHT"/>
<uses-permission  android:name="android.permission.ACCESS_FINE_LOCATION"  />
<uses-permission  android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission  android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission  android:name="android.permission.CAMERA"/>

Add the following activity in AndroidManifest.xml file inside application tag

<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

Add the following provider in AndroidManifest.xml file inside application tag

<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.blitzapp.animaladoption.android.provider"
android:exported="false"
android:grantUriPermissions="true">
	<meta-data
	android:name="android.support.FILE_PROVIDER_PATHS"
	android:resource="@xml/provider_paths"  />
</provider>

Create a file provider_paths.xml in res/xml. If xml is not available in the res folder then create a folder xml. Add this code in provider_paths.xml

<?xml  version="1.0"  encoding="utf-8"?>

<paths>
	<files-path
	name="share"
	path="external_files"/>
	<cache-path  name="cache"  path="."  />
</paths>

Add the following depandency in app/build.gradle file as dependency implementation 'com.github.yalantis:ucrop:2.2.4-native'

IOS

Add the following line in your project's podfile

'rn-image-picker', :path => '../node_modules/react-native-toast/rn-image-picker.podspec'

Add NSCameraUsageDescription in info.plist

run cd ios in terminal

run pod install in terminal

Example

import {openPicker, open} from  '@blitzmobileapps/react-native-advanced-image-picker'

const options = { 
includeBase64: false, 
selectMultiple: false, 
compressionRatio: 0.001, 
}; 

try { 
	const respsonse = await openPicker(options); 
	const tempImage = respsonse?.uri?.split("."); 
	const type = tempImage[1]; 
	const imageObj = { 
		uri: `${respsonse?.uri}`, 
		type: `image/${type}`, 
		name: `image${Date.now()}.${type}`, 
	};
	
}catch(ex){
	console.log("Image Picker Exception",ex)
}

API Reference

Methods

openPicker()

Opens a dialog where the user can choose between CAMERA and GALLERY.

try { 
	// response can be handled here
	const respsonse = await openPicker(options); 
}catch(ex){
	// errors can be handled in the catch block.
}

openPicker()

Opens directly the CAMERA and GALLERY whatever is passed in options object.

try { 
	// response can be handled here
	const respsonse = await openPicker(options); 
}catch(ex){
	// errors can be handled in the catch block.
}

See Options for further information on options.

Options

| Name | Description
| - | - | | selection|'camera' or 'gallery'.| |mediaType|Only 'photo' can be used for now.| | selectMultiple|multiple images can be selected only when selectMultiple is set to true.| | selectionLimit|number of images to be selected. Only works when selectMultiple is true.| | compressionRatio|0.1 means the lowest and 1 means the original size of image.| | includeBase64|If it is set true then the response will contain base64 and uri both.|