react-native-photo-compressor

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

Installation

1npm install react-native-photo-compressor

or

1yarn 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

1import { compressPhoto, compressPhotos, getSizeInBytes, deletePhoto } from 'react-native-photo-compressor';
2
3// ...
4
5const compressedPhoto = await compressPhoto('file://some/photo.png', 50);
6const remoteCompressedPhoto = await compressPhoto('http://remote/photo.png', 50);
7const namedCompressedPhoto = await compressPhoto('file://some/photo.png', 50, 'myFileName', true);
8const compressedPhotos = await compressPhotos(['file://some/photo_1.png', 'file://some/photo_2.png'], 50);
9
10const photoSize = await getSizeInBytes('file://some/photo.png');
11await 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

2. 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