Repository files navigation

REACT-NATIVE-COMPRESSOR is a react-native package, which helps us to CompressImage,Video, andAudio before uploading, same likeWhatsapp without knowing the compressionalgorithm

We should usereact-native-compressor instead ofFFmpeg becausereact-native-compressor gives you same compression ofWhatsapp (Image, Video, and Audio) without knowing the algorithm of compression + it is lightweight only increase50 KB Size Size in APK whileFFmpeg increase ~>9 MB Size inAPK, and we have to give manual image/video/Audo size and quality as well as

If you find this package useful hit the star 🌟

yarn add react-native-compressor

you can give feedback onDiscord channel

expo install react-native-compressor

Add the Compressor plugin to your Expo config (app.json,app.config.json orapp.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 is supported for bothAndroid andIOS

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

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

1. Open upandroid/app/src/main/java/[...]/MainActivity.java

• Addimport com.reactnativecompressor.CompressorPackage; to the imports at the top of the file
• Addnew CompressorPackage() to the list returned by thegetPackages() method

2. Append the following lines toandroid/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 inandroid/app/build.gradle:

     compile project(':react-native-compressor')

import{Image}from'react-native-compressor';constresult=awaitImage.compress('file://path_of_file/image.jpg');// ORconstresult=awaitImage.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

import{Image}from'react-native-compressor';constresult=awaitImage.compress('file://path_of_file/image.jpg',{compressionMethod:'manual',maxWidth:1000,quality:0.8,});

import{Video}from'react-native-compressor';constresult=awaitVideo.compress('file://path_of_file/BigBuckBunny.mp4',{},(progress)=>{console.log('Compression Progress: ',progress);});//ORconstresult=awaitVideo.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

import{Video}from'react-native-compressor';constresult=awaitVideo.compress('file://path_of_file/BigBuckBunny.mp4',{compressionMethod:'manual',},(progress)=>{console.log('Compression Progress: ',progress);});

import{Video}from'react-native-compressor';letcancellationVideoId='';constresult=awaitVideo.compress('file://path_of_file/BigBuckBunny.mp4',{compressionMethod:'auto',// getCancellationId for get video id which we can use for cancel compressiongetCancellationId:(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 compressionVideo.cancelCompression(cancellationVideoId);

import{Audio}from'react-native-compressor';constresult=awaitAudio.compress('file://path_of_file/file_example_MP3_2MG.wav',// recommended wav file but can be use mp3 file{quality:'medium'});// ORconstresult=awaitAudio.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,});

import{backgroundUpload}from'react-native-compressor';constheaders={};constuploadResult=awaitbackgroundUpload(url,fileUrl,{httpMethod:'PUT', headers},(written,total)=>{console.log(written,total);});//ORconstuploadResult=awaitbackgroundUpload(url,fileUrl,{uploadType:UploadType.MULTIPART,httpMethod:'POST', headers},(written,total)=>{console.log(written,total);});

for cancellation Upload, there is two ways

1. by calling, cancelUpload function
2. by calling abort function

import{cancelUpload,backgroundUpload}from'react-native-compressor';// if we will call without passing any param then it will remove last pushed uploadingcancelUpload()// if you pass true as second param then it will cancel all the uploadingcancelUpload("",true)// if there is multiple files are uploading, and you wanna cancel specific uploading then you pass specific video id like thisletvideoId=''constuploadResult=awaitbackgroundUpload(url,fileUrl,{httpMethod:'PUT',getCancellationId:(cancellationId)=>(videoId=cancellationId),},(written,total)=>{console.log(written,total);});cancelUpload(videoId)

import{backgroundUpload}from'react-native-compressor';constabortSignalRef=useRef(newAbortController());constuploadResult=awaitbackgroundUpload(url,fileUrl,{httpMethod:'PUT'},(written,total)=>{console.log(written,total);},abortSignalRef.current.signal);abortSignalRef.current?.abort();// this will cancel uploading

import{download}from'react-native-compressor';constdownloadFileUrl=awaitdownload(url,(progress)=>{console.log('downloadProgress: ',progress);});

import{createVideoThumbnail,clearCache}from'react-native-compressor';constthumbnail=awaitcreateVideoThumbnail(videoUri);awaitclearCache();// this will clear cache of thumbnails cache directory

• 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, themaxWidth andmaxHeight are used as a boundary.

• compressionMethod: compressionMethod (default: "auto")

  if you want to compress images likewhatsapp then make this propauto. Can be eithermanual orauto, 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 theJPEG andPNG file format, if your input file isJPEG and output file isPNG then compressed size can be increase

• input: InputType (default: uri)

  Can be eitheruri orbase64, defines the contentents of thevalue parameter.

• output: OutputType (default: jpg)

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

• disablePngTransparency: boolean (default: false)

  when user addoutput:'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 likedisablePngTransparency:true, it will convert transparent background to white

• returnableOutputType: ReturnableOutputType (default: uri)

  Can be eitheruri orbase64, defines the Returnable output image format.

if you wanna get image metadata (exif) thenread this

• compress(url: string, options?: videoCompresssionType , onProgress?: (progress: number)): Promise<string>

• cancelCompression(cancellationId: string): void

  we can get cancellationId fromgetCancellationId 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 callactivateBackgroundTask method, then after video compression, you should calldeactivateBackgroundTask for disable background task mode.

• getCancellationId: function

  getCancellationId is a callback function that gives us compress video id, which can be used inVideo.cancelCompression method to cancel the compression

• compressionMethod: compressionMethod (default: "manual")

  if you want to compress videos likewhatsapp then make this propauto. Can be eithermanual orauto, 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 tominimumFileSizeForCompress ref#26

if you wanna get video metadata thenread this

• compress(url: string, options?: audioCompresssionType): Promise<string>

  Android: recommended to usewav file as we convert mp3 to wav then apply bitrate

• quality?: qualityType (default: medium)

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

• bitrate?: number Range [64000-320000]

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

• samplerate?: number Range [44100 - 192000]

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

• channels?: number Typically 1 or 2

  we can control channels of audio through channels, Typically 1 or 2

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

• UploaderOptions

exportenumUploadType{BINARY_CONTENT=0,MULTIPART=1,}exportenumUploaderHttpMethod{POST='POST',PUT='PUT',PATCH='PATCH',}exportdeclaretypeHTTPResponse={status:number;  headers:Record<string,string>;  body:string;};exportdeclaretypeHttpMethod='POST'|'PUT'|'PATCH';exportdeclaretypeUploaderOptions=(|{uploadType?:UploadType.BINARY_CONTENT;mimeType?:string;}|{uploadType:UploadType.MULTIPART;fieldName?:string;mimeType?:string;parameters?:Record<string, string>;})&{headers?:Record<string,string>;httpMethod?:UploaderHttpMethod;getCancellationId?:(cancellationId:string)=>void;};

Note: some of the uploader code is borrowed fromExpoI tested file uploader on this backendNodejs-File-Uploader

for cancellation Upload, there is two ways, you can use one of it

• cancelUpload: ( uuid?: string, shouldCancelAll?: boolean) => void

  1. If we call without passing any param then it will remove the last pushed uploading
  2. If you pass true as the second param then it will cancel all the uploading
  3. if there is multiple files are uploading, and you wanna cancel specific uploading then you pass a specific video ID like this

• we can useAbortController in backgroundUploadUsage

  const abortSignalRef = useRef(new AbortController());

  abortSignalRef.current?.abort();

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

• 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

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

import{getVideoMetaData}from'react-native-compressor';constmetaData=awaitgetVideoMetaData(filePath);

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

• getVideoMetaData(path: string)

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

import{getImageMetaData}from'react-native-compressor';constmetaData=awaitgetImageMetaData(filePath);

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

• getImageMetaData(path: string)

if you want to convert

• content:// tofile:/// for android
• ph:// tofile:/// for IOS

then you can callgetRealPath function like this

import{getRealPath}from'react-native-compressor';constrealPath=awaitgetRealPath(fileUri,'video');//   file://file_path.extension

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

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

import{generateFilePath}from'react-native-compressor';constrandomFilePathForSaveFile=awaitgenerateFilePath('mp4');//   file://file_path.mp4

• generateFilePath(fileextension: string)

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

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

MIT