$3

---

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

$3

#### For React Native<0.65

``sh
yarn add react-native-compressor@rnlessthan65
`

#### For React Native 0.65 or greater

`sh
yarn add react-native-compressor
`

$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, 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

$3

##### Automatic Image Compression Like Whatsapp

`js
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

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

const result = await Image.compress('file://path_of_file/image.jpg', {
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',
{
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

`js
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

`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.mp3',
{ quality: 'medium' }
);
`

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

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

- ###### cancelCompression(cancellationId: string): void
we can get cancellationId from getCancellationId which is the callback method of compress method options

$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.

- ###### 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

$3

- ###### 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

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

$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": "6",
"extension": "mp4",
"height": "1080",
"size": "16940.0",
"width": "1920"
}
`

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

$3

if you want to convert

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

the you can you 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)`

Contributing

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

License

MIT