Skip to content

IslamRustamov/react-native-photo-compressor

Repository files navigation

react-native-photo-compressor

React Native Turbo Modules that allow you to compress your photos by given URI and quality parameter

Installation

npm install react-native-photo-compressor

or

yarn add react-native-photo-compressor

Android

Android configuration requires to enable the New Architecture:

  1. Open the android/gradle.properties file
  2. Scroll down to the end of the file and switch the newArchEnabled property from false to true.

iOS

bundle install
cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Usage

import { compressPhoto, compressPhotos, getSizeInBytes, deletePhoto } from 'react-native-photo-compressor';

// ...

const compressedPhoto = await compressPhoto('file://some/photo.png', 50);
const remoteCompressedPhoto = await compressPhoto('http://remote/photo.png', 50);
const namedCompressedPhoto = await compressPhoto('file://some/photo.png', 50, 'myFileName', true);
const compressedPhotos = await compressPhotos(['file://some/photo_1.png', 'file://some/photo_2.png'], 50);

const photoSize = await getSizeInBytes('file://some/photo.png');
await deletePhoto('file://some/photo.png');

API

compressPhoto(uri: string, quality: number, fileName?: string, forceRewrite?: boolean): Promise<string>

Creates a compressed copy of the image at the given uri inside a /RNPhotoCompressorImages directory.
Also supports images from web url. In this case uri should start with "http".

Argument Info
uri string, path to the photo, must contain file:// prefix
quality number, value from 0 to 100 (smaller number -> more compression)
fileName? string, optional name of the compressed photo
forceRewrite? boolean, optional flag to force the file to be overwritten if a file with the given name already exists. Default: false

compressPhotos(photos: string[], quality: number, onProgress?: (progress: number) => void): Promise<string[]>

Creates a compressed copy of the images by uri from a given photos array inside a /RNPhotoCompressorImages directory.
Also supports images from web url. In this case uri should start with "http".

Argument Info
photos string[], paths to the photo, must contain file:// prefix
quality number, value from 0 to 100 (smaller number -> more compression)
rejectAll? boolean, optional flag indicating whether to reject all if compression of one image fails, otherwise rejected images will return null. Default: true
onProgress? (progress: number) => void, optional callback that triggers when the image in the array has completed compression. progress returns the index of elements that have completed compression.

getSizeInBytes(uri: string, size?: SizeType): Promise<number>

Returns the size of the file in bytes at the given uri. SizeType defines the format of the return value and can be either "kb" or "mb"(default: "b").

deletePhoto(uri: string): Promise<void>;

Deletes a compressed image at a given uri.
Note: Only works for files inside a /RNPhotoCompressorImages directory.

Troubleshooting

If you get this error when building iOS:

/Users/user/Desktop/testApp/ios/Pods/../../node_modules/react-native/scripts/codegen/generate-legacy-interop-components.js: Permission denied
  1. Open a terminal, run this command and copy the result
command -v node
  1. Open .xcode.env file in ios directory and replace
export NODE_BINARY=$(command -v node)

to

export NODE_BINARY=~/your/node/path

Work in progress

  • Implement turbo module for Android
  • Implement turbo module for iOS
  • Add more configuration for turbo module (like deleting photos, specific urls and etc.)
  • Refactor Android turbo module

Contributing

If you want to add more functionality to this:

  1. Fork repo
  2. Implement wanted feature
  3. Create a PR into master

Or

  1. Create an issue
  2. Describe the feature you want
  3. Tag author

License

MIT


Made with create-react-native-library