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
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 addCompressor.xcodeproj
- In XCode, in the project navigator, select your project. Add
libCompressor.a
to your project'sBuild 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 thegetPackages()
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 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
andmaxHeight
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 eithermanual
orauto
, 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 isPNG
but will be ignored. -
input: InputType
(default: uri)Can be either
uri
orbase64
, defines the contentents of thevalue
parameter. -
output: OutputType
(default: jpg)Can be either
jpg
orpng
, defines the output image format. -
returnableOutputType: ReturnableOutputType
(default: uri)Can be either
uri
orbase64
, 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 eithermanual
orauto
, 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 inVideo.cancelCompression
method to cancel the compression
Audio
-
compress(url: string, options?: audioCompresssionType): Promise<string>
audioCompresssionType
-
we can also control bitrate through quality. qualityType can bequality: qualityType
(default: medium)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://
tofile:///
for android -
ph://
tofile:///
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