REACT-NATIVE-COMPRESSOR is a react-native package, which help us to Compress Image
, Video
, and Audio
same like Whatsapp without knowing compression algorithm
🗜️Compress Image, Video, and Audio same like Whatsapp
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?
Table of Contents
Open Table of Contents
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
- In XCode, in the project navigator, right click
Libraries
➜ Add Files to [your project's name]
- Go to
node_modules
➜ react-native-compressor
and add Compressor.xcodeproj
- In XCode, in the project navigator, select your project. Add
libCompressor.a
to your project's Build Phases
➜ Link Binary With Libraries
- 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', {
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: (cancellationId) =>
(cancellationVideoId = cancellationId),
},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);
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
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
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 androidph://
to file:///
for IOS
then you can call getRealPath
function like this
import { getRealPath } from 'react-native-compressor';
const realPath = await getRealPath(fileUri, 'video');
-
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');
-
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