REACT-NATIVE-COMPRESSOR is a react-native package, which helps us to Compress Image, Video, and Audio before uploading, same like Whatsapp without knowing the compression algorithm

#### Why should we use react-native-compress over FFmpeg?

We should use react-native-compressor instead of FFmpeg because react-native-compressor gives you same compression of Whatsapp (Image, Video, and Audio) without knowing the algorithm of compression + it is lightweight only increase 50 KB Size Size in APK while FFmpeg increase ~> 9 MB Size in APK, and we have to give manual image/video/Audo size and quality as well as

If you find this package useful hit the star 🌟

$3

---

#### See the Benchmarks

Table of Contents

Installation

``sh
yarn add react-native-compressor
`

$3

you can give feedback on Discord channel

$3

`
expo install react-native-compressor
`

Add the Compressor plugin to your Expo config (app.json, app.config.json or app.config.js):

`json
{
"name": "my app",
"plugins": ["react-native-compressor"]
}
`

Finally, compile the mods:

`
expo prebuild
`

To apply the changes, build a new binary with EAS:

`
eas build
`

$3

Automatic linking is supported for both Android and IOS

$3

Note: If you are using react-native version 0.60 or higher you don't need to link this package.

`sh
react-native link react-native-compressor
`

$3

#### iOS

1. In XCode, open Podfile
2. paste this line pod 'react-native-compressor', :path => '../node_modules/react-native-compressor' into Podfile
3. run this command inside ios folder pod install
4. Run your project (Cmd+R)<

#### Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

- Add import com.reactnativecompressor.CompressorPackage; to the imports at the top of the file
- Add new CompressorPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:
`
include ':react-native-compressor'
project(':react-native-compressor').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-compressor/android')
`
3. Insert the following lines inside the dependencies block in android/app/build.gradle:
`
compile project(':react-native-compressor')
`

Usage

$3

##### Automatic Image Compression Like Whatsapp

`js
import { Image } from 'react-native-compressor';

const result = await Image.compress('file://path_of_file/image.jpg');
// OR
const result = await Image.compress('https://path_of_file/image.jpg', {
progressDivider: 10,
downloadProgress: (progress) => {
console.log('downloadProgress: ', progress);
},
});
`

Here is this package comparison of images compression with WhatsApp

##### Manual Image Compression

`js
import { Image } from 'react-native-compressor';

const result = await Image.compress('file://path_of_file/image.jpg', {
compressionMethod: 'manual',
maxWidth: 1000,
quality: 0.8,
});
`

$3

##### Automatic Video Compression Like Whatsapp

`js
import { Video } from 'react-native-compressor';

const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{},
(progress) => {
console.log('Compression Progress: ', progress);
}
);

//OR

const result = await Video.compress(
'https://example.com/video.mp4',
{
progressDivider: 10,
downloadProgress: (progress) => {
console.log('downloadProgress: ', progress);
},
},
(progress) => {
console.log('Compression Progress: ', progress);
}
);
`

Here is this package comparison of video compression with WhatsApp

##### Manual Video Compression

`js
import { Video } from 'react-native-compressor';

const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{
compressionMethod: 'manual',
},
(progress) => {
console.log('Compression Progress: ', progress);
}
);
`

##### Cancel Video Compression

`js
import { Video } from 'react-native-compressor';

let cancellationVideoId = '';

const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{
compressionMethod: 'auto',
// getCancellationId for get video id which we can use for cancel compression
getCancellationId: (cancellationId) =>
(cancellationVideoId = cancellationId),
},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);

// we can cancel video compression by calling cancelCompression with cancel video id which we can get from getCancellationId function while compression
Video.cancelCompression(cancellationVideoId);
`

$3

`js
import { Audio } from 'react-native-compressor';

const result = await Audio.compress(
'file://path_of_file/file_example_MP3_2MG.wav', // recommended wav file but can be use mp3 file
{ quality: 'medium' }
);

// OR

const result = await Audio.compress(
'file://path_of_file/file_example_MP3_2MG.wav', // recommended wav file but can be use mp3 file
{
bitrate: 64000,
samplerate: 44100,
channels: 1,
}
);
`

$3

`js
import { backgroundUpload } from 'react-native-compressor';

const headers = {};

const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT', headers },
(written, total) => {
console.log(written, total);
}
);

//OR

const uploadResult = await backgroundUpload(
url,
fileUrl,
{ uploadType: UploadType.MULTIPART, httpMethod: 'POST', headers },
(written, total) => {
console.log(written, total);
}
);
`

$3

##### cancelUpload (support single and all)
`js
import { cancelUpload, backgroundUpload } from 'react-native-compressor';

// if we will call without passing any param then it will remove last pushed uploading
cancelUpload()

// if you pass true as second param then it will cancel all the uploading
cancelUpload("",true)

// if there is multiple files are uploading, and you wanna cancel specific uploading then you pass specific video id like this
let videoId=''
const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT', getCancellationId: (cancellationId) =>(videoId = cancellationId), },
(written, total) => {
console.log(written, total);
}
);
cancelUpload(videoId)
`

##### cancel by calling abort
`js
import { backgroundUpload } from 'react-native-compressor';

const abortSignalRef = useRef(new AbortController());

const uploadResult = await backgroundUpload(
url,
fileUrl,
{ httpMethod: 'PUT' },
(written, total) => {
console.log(written, total);
},
abortSignalRef.current.signal
);

abortSignalRef.current?.abort(); // this will cancel uploading
`

$3

`js
import { download } from 'react-native-compressor';

const downloadFileUrl = await download(url, (progress) => {
console.log('downloadProgress: ', progress);
});
`

$3

`js
import { createVideoThumbnail, clearCache } from 'react-native-compressor';

const thumbnail = await createVideoThumbnail(videoUri);

await clearCache(); // this will clear cache of thumbnails cache directory
`

API

Image

$3

- ###### compress(value: string, options?: CompressorOptions): Promise

Compresses the input file URI or base-64 string with the specified options. Promise returns a string after compression has completed. Resizing will always keep the original aspect ratio of the image, the maxWidth and maxHeight are used as a boundary.

$3

- ###### compressionMethod: compressionMethod (default: "auto")

if you want to compress images like whatsapp then make this prop auto. Can be either manual or auto, defines the Compression Method.

- ##### downloadProgress?: (progress: number) => void;

it is callback, only trigger when we pass image url from server

- ##### progressDivider?: number (default: 0)

we uses it when we use downloadProgress

- ###### maxWidth: number (default: 1280)

The maximum width boundary used as the main boundary in resizing a landscape image.

- ###### maxHeight: number (default: 1280)

The maximum height boundary used as the main boundary in resizing a portrait image.

- ###### quality: number (default: 0.8)

The quality modifier for the JPEG and PNG file format, if your input file is JPEG and output file is PNG then compressed size can be increase

- ###### input: InputType (default: uri)

Can be either uri or base64, defines the contentents of the value parameter.

- ###### output: OutputType (default: jpg)

The quality modifier for the JPEG file format, can be specified when output is PNG but will be ignored. if you wanna apply quality modifier then you can enable disablePngTransparency:true,
Note: if you png image have no transparent background then enable disablePngTransparency:true modifier is recommended

- ###### disablePngTransparency: boolean (default: false)

when user add output:'png' then by default compressed image will have transparent background, and quality will be ignored, if you wanna apply quality then you have to disablePngTransparency like disablePngTransparency:true, it will convert transparent background to white

- ###### returnableOutputType: ReturnableOutputType (default: uri)
Can be either uri or base64, defines the Returnable output image format.

if you wanna get image metadata (exif) then read this

Video

- ###### compress(url: string, options?: videoCompresssionType , onProgress?: (progress: number)): Promise

- ###### cancelCompression(cancellationId: string): void

we can get cancellationId from getCancellationId which is the callback method of compress method options

- ###### activateBackgroundTask(onExpired?: (data: any) => void): Promise
if you wanna compress video while app is in backgroup then you should call this method before compression
- ###### deactivateBackgroundTask(): Promise
if you call activateBackgroundTask method, then after video compression, you should call deactivateBackgroundTask for disable background task mode.

- ###### getCancellationId: function
getCancellationId is a callback function that gives us compress video id, which can be used in Video.cancelCompression method to cancel the compression

$3

- ###### compressionMethod: compressionMethod (default: "manual")

if you want to compress videos like whatsapp then make this prop auto. Can be either manual or auto, defines the Compression Method.

- ##### downloadProgress?: (progress: number) => void;

it is callback, only trigger when we pass image url from server

- ##### progressDivider?: number (default: 0)

we uses it when we use downloadProgress/onProgress

- ###### maxSize: number (default: 640)

The maximum size can be height in case of portrait video or can be width in case of landscape video.

- ###### bitrate: number

bitrate of video which reduce or increase video size. if compressionMethod will auto then this prop will not work

- ###### minimumFileSizeForCompress: number (default: 0)

previously default was 16 but now it is 0 by default. 0 mean 0mb. This is an offset, which you can set for minimumFileSizeForCompress will allow this package to dont compress less than or equal to minimumFileSizeForCompress ref #26

if you wanna get video metadata then read this

Audio

- ###### compress(url: string, options?: audioCompresssionType): Promise
Android: recommended to use wav file as we convert mp3 to wav then apply bitrate

$3

- ###### quality?: qualityType (default: medium)

we can also control bitrate through quality. qualityType can be low | medium | high

- ###### bitrate?: number Range [64000-320000]

we can control bitrate of audio through bitrate, it should be in the range of 64000-320000

- ###### samplerate?: number Range [44100 - 192000]

we can control samplerate of audio through samplerate, it should be in the range of 44100 - 192000

- ###### channels?: number Typically 1 or 2
we can control channels of audio through channels, Typically 1 or 2

Background Upload

- ###### backgroundUpload: (url: string, fileUrl: string, options: UploaderOptions, onProgress?: ((writtem: number, total: number) => void) | undefined) => Promise< any >

- ###### UploaderOptions

`js
export enum UploadType {
BINARY_CONTENT = 0,
MULTIPART = 1,
}

export enum UploaderHttpMethod {
POST = 'POST',
PUT = 'PUT',
PATCH = 'PATCH',
}

export declare type HTTPResponse = {
status: number;
headers: Record;
body: string;
};

export declare type HttpMethod = 'POST' | 'PUT' | 'PATCH';

export declare type UploaderOptions = (
| {
uploadType?: UploadType.BINARY_CONTENT;
mimeType?: string;
}
| {
uploadType: UploadType.MULTIPART;
fieldName?: string;
mimeType?: string;
parameters?: Record;
}
) & {
headers?: Record;
httpMethod?: UploaderHttpMethod;
getCancellationId?: (cancellationId: string) => void;
};
`

Note: some of the uploader code is borrowed from Expo
I tested file uploader on this backend Nodejs-File-Uploader

$3

- ##### we can use AbortController in backgroundUpload Usage
const abortSignalRef = useRef(new AbortController());

abortSignalRef.current?.abort();

$3

- ##### download: ( fileUrl: string, downloadProgress?: (progress: number) => void, progressDivider?: number ) => Promise< string >

$3

- #### createVideoThumbnail( fileUrl: string, options: {header:Object} ): Promise<{ path: string;size: number; mime: string; width: number; height: number; }>

it will save the thumbnail of the video into the cache directory and return the thumbnail URI which you can display

- #### clearCache(cacheDir?: string): Promise< string >

it will clear the cache that was created from createVideoThumbnail, in future this clear cache will be totally customized

$3

if you want to get metadata of video than you can use this function

`js
import { getVideoMetaData } from 'react-native-compressor';

const metaData = await getVideoMetaData(filePath);
`

`
{
"duration": 20.11,
"extension": "mp4",
"height": 1080,
"size": 16940.0,
"width": 1920
}
`

- ###### getVideoMetaData(path: string)

$3

if you want to get metadata of video than you can use this function

`js
import { getImageMetaData } from 'react-native-compressor';

const metaData = await getImageMetaData(filePath);
`

`
{
"ImageWidth": 4032,
"ImageHeight": 3024,
"Orientation": 3,
"size": 4127057,
"extension": "jpg",
"exif":{...}
}
`

- ###### getImageMetaData(path: string)

$3

if you want to convert

- content:// to file:/// for android
- ph:// to file:/// for IOS

then you can call getRealPath function like this

`js
import { getRealPath } from 'react-native-compressor';

const realPath = await getRealPath(fileUri, 'video'); // file://file_path.extension
`

- ###### getRealPath(path: string, type: string = 'video'|'image')

$3

if you wanna make random file path in cache folder then you can use this method like this

`js
import { generateFilePath } from 'react-native-compressor';

const randomFilePathForSaveFile = await generateFilePath('mp4'); // file://file_path.mp4
`

- ##### generateFilePath(fileextension: string)`

Benchmark

Whatsapp: compresses Images,Videos and Audios in every effect way

Contributing

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

License

MIT