Shobbak / react-native-compressor

The lightweight library for compress image, video, and audio with an awesome experience

Would you like to support me?

---

react-native-compressor

Compress videos, images and audio before upload

react-native-compressor package is a set of functions that allow you compress Image,Audio and Video

If you find this package useful hit the star 🌟

Table of Contents

Open Table of Contents

• Installation
  • For React Native
    • For React Native<0.65
    • For React Native 0.65 or greater
  • Managed Expo
• Usage
  • Image
    • Automatic Image Compression Like Whatsapp
    • Manual Image Compression
    • ImageCompressor API Docs
  • Video
    • Automatic Video Compression Like Whatsapp
    • Manual Video Compression
    • Cancel Video Compression
    • Video Api Docs
  • Audio
  • Background Upload

• Other Utilities
  • Background Upload
  • Get Metadata Of Video
  • Get Real Path
  • Get Temp file Path

Installation

React Native

For React Native<0.65

yarn add react-native-compressor@rnlessthan65

For React Native 0.65 or greater

yarn add react-native-compressor

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

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-compressor and add Compressor.xcodeproj
3. In XCode, in the project navigator, select your project. Add libCompressor.a to your project's Build Phases ➜ Link Binary With Libraries
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

Image

Automatic Image Compression Like Whatsapp

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

const result = await Image.compress('file://path_of_file/image.jpg', {
  compressionMethod: 'auto',
});

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', {
  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',
  {
    compressionMethod: 'auto',
  },
  (progress) => {
    if (backgroundMode) {
      console.log('Compression Progress: ', progress);
    } else {
      setCompressingProgress(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',
  {},
  (progress) => {
    if (backgroundMode) {
      console.log('Compression Progress: ', progress);
    } else {
      setCompressingProgress(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.mp3',
  { quality: 'medium' }
);

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

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: "manual")

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

• 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 file format, can be specified when output is PNG but will be ignored.

• input: InputType (default: uri)

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

• output: OutputType (default: jpg)

  Can be either jpg or png, defines the output image format.

• returnableOutputType: ReturnableOutputType (default: uri)

  Can be either uri or base64, defines the Returnable output image format.

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

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.

• 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: string

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

• minimumFileSizeForCompress: number (default: 16)

  16 means 16mb. default our package do not compress under 16mb video file. minimumFileSizeForCompress will allow us to change this 16mb offset. fixed #26

• 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

Audio

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

audioCompresssionType

• quality: qualityType (default: medium)

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

Note: Audio compression will be add soon

Background Upload

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

• FileSystemUploadOptions

type FileSystemUploadOptions = (
  | {
      uploadType?: FileSystemUploadType.BINARY_CONTENT,
    }
  | {
      uploadType: FileSystemUploadType.MULTIPART,
      fieldName?: string,
      mimeType?: string,
      parameters?: Record<string, string>,
    }
) & {
  headers?: Record<string, string>,
  httpMethod?: FileSystemAcceptedUploadHttpMethod,
  sessionType?: FileSystemSessionType,
};

Get Metadata Of Video

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

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

const metaData = await getVideoMetaData(filePath);

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

• getVideoMetaData(path: string)

Get Real Path

if you want to convert

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

the you can you getRealPath function like this

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

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

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

Get Temp file Path

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

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

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

• generateFilePath(fileextension: string)

Contributing

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

License

MIT