Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-compressor

Package Overview
Dependencies
Maintainers
2
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-compressor

This library compress image, video and audio

  • 0.5.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
37K
increased by13.81%
Maintainers
2
Weekly downloads
 
Created
Source

Would you like to support me?

Buy Me A Coffee


react-native-compressor

alt text

Compress videos, images and audio before upload

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

Installation

React Native

For React Native<0.65
yarn add react-native-compressor@0.5.9

Using Npm

npm install react-native-compressor --save

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"]
}

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-compressor and add Compressor.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libCompressor.a to your project's Build PhasesLink 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
  1. 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')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-compressor')
    

Usage

Image

For Like Whatsapp Image Compression
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

For manual Compression
import { Image } from 'react-native-compressor';

const result = await Image.compress('file://path_of_file/image.jpg', {
  maxWidth: 1000,
  quality: 0.8,
});

Video

For Like Whatsapp Video Compression
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

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

Audio

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

const result = await Audio.compress(
  'file://path_of_file/file_example_MP3_2MG.mp3',
  { quality: 'medium' }
);

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>

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

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

Contributing

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

License

MIT

Keywords

FAQs

Package last updated on 17 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc