React-native-photo-compressor NPM

react-native-photo-compressor

React Native Turbo Modules that allow you to compress your photos by given URI and quality parameter

Installation

npm install react-native-photo-compressor

yarn add react-native-photo-compressor

Android

Android configuration requires to enable the New Architecture:

Open the android/gradle.properties file
Scroll down to the end of the file and switch the newArchEnabled property from false to true.

iOS

bundle install
cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Usage

import { compressPhoto, compressPhotos, getSizeInBytes, deletePhoto } from 'react-native-photo-compressor';

// ...

const compressedPhoto = await compressPhoto('file://some/photo.png', 50);
const remoteCompressedPhoto = await compressPhoto('http://remote/photo.png', 50);
const namedCompressedPhoto = await compressPhoto('file://some/photo.png', 50, 'myFileName', true);
const compressedPhotos = await compressPhotos(['file://some/photo_1.png', 'file://some/photo_2.png'], 50);

const photoSize = await getSizeInBytes('file://some/photo.png');
await deletePhoto('file://some/photo.png');

API

`compressPhoto(uri: string, quality: number, fileName?: string, forceRewrite?: boolean): Promise<string>`

Creates a compressed copy of the image at the given uri inside a /RNPhotoCompressorImages directory. Also supports images from web url. In this case uri should start with "http".

Argument	Info
uri	string, path to the photo, must contain file:// prefix
quality	number, value from 0 to 100 (smaller number -> more compression)
fileName?	string, optional name of the compressed photo
forceRewrite?	boolean, optional flag to force the file to be overwritten if a file with the given name already exists. Default: `false`

`compressPhotos(photos: string[], quality: number, onProgress?: (progress: number) => void): Promise<string[]>`

Creates a compressed copy of the images by uri from a given photos array inside a /RNPhotoCompressorImages directory. Also supports images from web url. In this case uri should start with "http".

Argument	Info
photos	string[], paths to the photo, must contain file:// prefix
quality	number, value from 0 to 100 (smaller number -> more compression)
rejectAll?	boolean, optional flag indicating whether to reject all if compression of one image fails, otherwise rejected images will return null. Default: `true`
onProgress?	(progress: number) => void, optional callback that triggers when the image in the array has completed compression. `progress` returns the index of elements that have completed compression.

`getSizeInBytes(uri: string, size?: SizeType): Promise<number>`

Returns the size of the file in bytes at the given uri. SizeType defines the format of the return value and can be either "kb" or "mb"(default: "b").

`deletePhoto(uri: string): Promise<void>;`

Deletes a compressed image at a given uri. Note: Only works for files inside a /RNPhotoCompressorImages directory.

Troubleshooting

If you get this error when building iOS:

/Users/user/Desktop/testApp/ios/Pods/../../node_modules/react-native/scripts/codegen/generate-legacy-interop-components.js: Permission denied

Open a terminal, run this command and copy the result

command -v node

Open .xcode.env file in ios directory and replace

export NODE_BINARY=$(command -v node)

export NODE_BINARY=~/your/node/path

Work in progress

Implement turbo module for Android
Implement turbo module for iOS
Add more configuration for turbo module (like deleting photos, specific urls and etc.)
Refactor Android turbo module