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

@react-native-community/image-editor

Package Overview
Dependencies
Maintainers
0
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-native-community/image-editor

React Native Image Editing native modules for iOS & Android

  • 4.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

@react-native-community/image-editor

Build Status Version MIT License PRs Welcome Lean Core Badge

Image Editor Native module for React Native.

Originally extracted from React Native issue#23313 and maintained by the community.

Getting started

Install

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

Install Pods

npx pod-install

Usage

Start by importing the library:

import ImageEditor from '@react-native-community/image-editor';

Crop image

Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.

If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it.

ImageEditor.cropImage(uri, cropData).then((result) => {
  console.log('Cropped image uri:', result.uri);
});

cropData: ImageCropData

NameTypeDescription
offset{ x: number, y: number }The top-left corner of the cropped image, specified in the original image's coordinate space
size{ width: number, height: number }Size (dimensions) of the cropped image
displaySize
(optional)
{ width: number, height: number }Size to which you want to scale the cropped image
resizeMode
(optional)
'contain' | 'cover' | 'stretch' | 'center'Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover', Web - no support)
Default value: 'cover'
quality
(optional)
numberA value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality)
Default value: 0.9
format
(optional)
'jpeg' | 'png' | 'webp'The format of the resulting image.
Default value: based on the provided image;
if value determination is not possible, 'jpeg' will be used as a fallback.
'webp' isn't supported by iOS.
includeBase64
(optional)
booleanIndicates if Base64 formatted picture data should also be included in the CropResult.
Default value: false
headers
(optional)
object | HeadersAn object or Headers interface representing the HTTP headers to send along with the request for a remote image.

result: CropResult

NameTypeDescription
uristringThe path to the image file (example: 'file:///data/user/0/.../image.jpg')
WEB: uri is the data URI string (example 'data:image/jpeg;base64,/4AAQ...AQABAA')
pathstringThe URI of the image (example: '/data/user/0/.../image.jpg')
WEB: path is the blob URL (example 'blob:https://example.com/43ff7a16...e46b1')
namestringThe name of the image file. (example: 'image.jpg')
widthnumberThe width of the image in pixels
heightnumberHeight of the image in pixels
sizenumberThe size of the image in bytes
typestringThe MIME type of the image ('image/jpeg', 'image/png', 'image/webp')
base64
(optional)
stringThe base64-encoded image data example: '/9j/4AAQSkZJRgABAQAAAQABAAD'
if you need data URI as the source for an Image element for example, you can use data:${type};base64,${base64}

For more advanced usage check our example app.

Keywords

FAQs

Package last updated on 20 Aug 2024

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