numandev1numandev1
1248

React Native Compressor

screenshot of React Native Compressor
react
react-native

Compress Image, Video, and Audio same like Whatsapp

Github

Overview

REACT-NATIVE-COMPRESSOR is a react-native package that allows users to compress images, videos, and audio before uploading, similar to the compression algorithm used in WhatsApp. The package offers the benefit of achieving the same compression quality as WhatsApp without the need to know the compression algorithm, and it is lightweight, adding only around 50 KB to the APK size.

Features

  • Image Compression: Compress images automatically like WhatsApp or manually with specified options.
  • Video Compression: Compress videos automatically like WhatsApp or manually based on user-defined settings.
  • Audio Compression: Offers background uploads and the ability to cancel uploads, making it convenient for managing audio files during uploads.
  • Utility Functions: Includes features for creating video thumbnails, clearing cache, retrieving metadata of images and videos, and fetching real or temporary file paths.

Managed Expo

  1. Add the Compressor plugin to your Expo config (app.json, app.config.json or app.config.js).
  2. Compile the modifications by building a new binary with EAS.

Automatic Linking (for React Native >= 0.60 only)

  • No manual linking required for React Native versions 0.60 or higher.

Manual Installation

iOS

  1. In Xcode, open Podfile and add pod 'react-native-compressor', :path => '../node_modules/react-native-compressor'.
  2. Run pod install inside the ios folder.
  3. Build the project (Cmd+R).

Android

  1. Open android/app/src/main/java/[...]/MainActivity.java.
  2. Add import com.reactnativecompressor.CompressorPackage; to the imports.
  3. Include new CompressorPackage() in the list returned by the getPackages() method.
  4. Update android/settings.gradle and android/app/build.gradle with the provided lines.

Summary

REACT-NATIVE-COMPRESSOR is a powerful package for React Native developers looking to compress images, videos, and audio files before uploading, mimicking the compression quality of WhatsApp. With its lightweight design and comprehensive features, it offers an efficient solution for managing media uploads in mobile applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.