</div>

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

<div align="center"> <h4>Auto/Manual Compression | Background Upload | Download File | Create Video Thumbnail</h4> </div> <br/> <div align="center"> <pre> <img height="90" src="/media/whatsapp_logo.png"/> <img height="90" src="/media/compress_media.png"/> </pre> <h2 align="center">🗜️Compress Image, Video, and Audio same like Whatsapp</h2> </div>

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 🌟

Would you like to support me?

See the Benchmarks

<details> <summary>Open Table of Contents</summary>

Installation
- For React Native
- Managed Expo
Usage

Other Utilities
</details>

Installation

yarn add react-native-compressor

New Architecture (Turbo Module) Supported

you can give feedback on Discord channel

Managed Expo

expo install react-native-compressor

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

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

Automatic linking (for React Native >= 0.60 only)

Automatic linking is supported for both Android and IOS

Linking (for React Native <= 0.59 only)

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

react-native link react-native-compressor

Manual installation

iOS

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

Android

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

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')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-compressor')
```

Usage

Image

Automatic Image Compression Like Whatsapp

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

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

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

Video

Automatic Video Compression Like Whatsapp

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

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

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);

Audio

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,
  }
);

Background Upload

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);
  }
);

Cancel Background Upload

for cancellation Upload, there is two ways

by calling, cancelUpload function
by calling abort function

cancelUpload (support single and all)

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

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

Download File

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

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

Video Thumbnail

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

const thumbnail = await createVideoThumbnail(videoUri);

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

API

Image

ImageCompressor

compress(value: string, options?: CompressorOptions): Promise<string>

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.

CompressorOptions

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<string>
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<any>

if you wanna compress video while app is in backgroup then you should call this method before compression
deactivateBackgroundTask(): Promise<any>

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

videoCompresssionType

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