Gathering detailed insights and metrics for @xtayaitak/react-native-photo-manipulator
Gathering detailed insights and metrics for @xtayaitak/react-native-photo-manipulator
React Native Image Processing API to edit photo programmatically for Android and iOS. It features print text, overlay on another image (add watermark), resize, crop, flip, rotate and optimize image size then convert file format to jpeg or png
Installations
npm install @xtayaitak/react-native-photo-manipulatorDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Node Version
20.16.0
NPM Version
10.8.1
Releases
35
Languages
9
TypeScript
Objective-C
Kotlin
Java
Swift
Objective-C++
JavaScript
Ruby
C
TypeScript (53.03%)
Objective-C (15.53%)
Kotlin (14.94%)
Java (4.33%)
Swift (3.8%)
Objective-C++ (3.64%)
JavaScript (2.45%)
Ruby (2.18%)
C (0.1%)
Developer
guhungry
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
370 Stars
666 Commits
38 Forks
4 Watchers
12 Branches
3 Contributors
Updated on Jun 15, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.1
Package Id
@xtayaitak/react-native-photo-manipulator@3.0.1
Unpacked Size
148.74 kB
Size
28.47 kB
File Count
81
NPM Version
10.8.1
Node Version
20.16.0
Published on
Oct 31, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
21
@commitlint/config-conventional@evilmartians/lefthook@react-native/eslint-config@release-it/conventional-changelog@types/color-rgba@types/jest@types/reactcommitlintdel-clieslinteslint-config-prettiereslint-plugin-prettierjestjest-extendedprettierreactreact-nativereact-native-builder-bobrelease-itturbotypescript
React Native Photo Manipulator
React Native Image Processing API to edit photo programmatically for Android and iOS.
Platform Supported
| Framework | Android | iOS |
|---|---|---|
| React Native | ✔️ | ✔️ |
| Expo with development build | ✔️ | ✔️ |
| Expo Go | ❌ | ❌ |
Getting started
For react native 0.60 and above
1$ yarn add react-native-photo-manipulator
(or)
1$ npm install react-native-photo-manipulator
For react native 0.59 and below
Please read Get Started Guide
For Expo with development build
1$ yarn expo install react-native-photo-manipulator
(or)
1$ npx expo install react-native-photo-manipulator
Usage
Import library with
1import RNPhotoManipulator from 'react-native-photo-manipulator';
API
- Methods:
- Types:
Method
Crop and resize
Crop image with cropRegion and resize to targetSize if specified
Signature
1static crop(image: ImageSource, cropRegion: Rect, targetSize?: Size) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The image |
cropRegion | Rect | Yes | The region of image to be cropped |
targetSize | Size | No | The target size of result image |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const cropRegion = { x: 5, y: 30, height: 400, width: 250 }; 3const targetSize = { height: 200, width: 150 }; 4 5RNPhotoManipulator.crop(image, cropRegion, targetSize).then(path => { 6 console.log(`Result image path: ${path}`); 7});
Optimize
Save result image with specified quality between 0 - 100 in jpeg format
Signature
1static optimize(image: ImageSource, quality: number) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The image |
quality | number | Yes | The quality of result image between 0 - 100 |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const quality = 90; 3 4RNPhotoManipulator.optimize(image, 90).then(path => { 5 console.log(`Result image path: ${path}`); 6});
Flip Image
Flip image horizontally, vertically or both
Signature
1static flipImage(image: ImageSource, mode: FlipMode) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The background image |
mode | FlipMode | Yes | Flip mode Horizontal, Vertical or Both |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const mode = FlipMode.Vertical; 3 4RNPhotoManipulator.flipImage(image, mode).then(path => { 5 console.log(`Result image path: ${path}`); 6});
Rotate Image
Rotate image 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)
Signature
1static rotateImage(image: ImageSource, mode: RotationMode) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The background image |
mode | RotationMode | Yes | Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise) |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const mode = RotationMode.R90; 3 4RNPhotoManipulator.rotateImage(image, mode).then(path => { 5 console.log(`Result image path: ${path}`); 6});
Overlay Image
Overlay image on top of background image
Signature
1static overlayImage(image: ImageSource, overlay: ImageSource, position: Point) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The background image |
overlay | ImageSource | Yes | The overlay image |
position | Point | Yes | The position of overlay image in background image |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const overlay = "https://www.iconfinder.com/icons/1174949/download/png/128"; 3const position = { x: 5, y: 20 }; 4 5RNPhotoManipulator.overlayImage(image, overlay, position).then(path => { 6 console.log(`Result image path: ${path}`); 7});
Print Text
Print texts into image
Signature
1static printText(image: ImageSource, texts: TextOptions[]) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The image |
texts | TextOptions[] | Yes | The list of text operations |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const texts = [ 3 { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" }, 4 { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#FFFFFF", thickness: 3 } 5]; 6 7RNPhotoManipulator.printText(image, texts).then(path => { 8 console.log(`Result image path: ${path}`); 9});
Batch
Crop, resize and do operations (overlay and printText) on image
Signature
1static batch(image: ImageSource, operations: PhotoBatchOperations[], cropRegion: Rect, targetSize?: Size, quality?: number) => Promise<string>
| Parameter | Type | Required | Description |
|---|---|---|---|
image | ImageSource | Yes | The image |
operations | PhotoBatchOperations[] | Yes | The list of operations |
cropRegion | Rect | Yes | The region of image to be cropped |
targetSize | Size | No | The target size of result image |
quality | number | No | The quality of result image between 0 - 100 |
mimeType | 'image/jpeg', 'image/png' | No | Output file format |
Returns
Promise with image path in cache directory
Example
1const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true"; 2const cropRegion = { x: 5, y: 30, height: 400, width: 250 }; 3const targetSize = { height: 200, width: 150 }; 4const operations = [ 5 { operation: "text", options: { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" } }, 6 { operation: "overlay", overlay: "https://www.iconfinder.com/icons/1174949/download/png/128", position: { x: 5, y: 20 } }, 7]; 8const quality = 90; 9 10RNPhotoManipulator.batch(image, operations, cropRegion, targetSize, quality).then(path => { 11 console.log(`Result image path: ${path}`); 12});
Types
ImageSource
Image resource can be url or require()
| Type | Description |
|---|---|
| number | Image from require('path/to/image') |
| string | Image from url supports (file://, http://, https:// and ftp://) or base64 encoded (data:image/png;base64,iVBORw...) |
PhotoBatchOperations
Represent overlay image, print text or flip operation
PhotoBatchOverlay
Overlay image batch operation
| Property | Type | Description |
|---|---|---|
operation | "overlay" | |
overlay | ImageSource | The overlay image |
position | Point | he position of overlay image in background image |
PhotoBatchPrintText
Print text batch operation
| Property | Type | Description |
|---|---|---|
operation | "text" | |
options | TextOptions | The text attributes |
PhotoBatchFlip
Flip image batch operation
| Property | Type | Description |
|---|---|---|
operation | "flip" | |
mode | FlipMode | Flip mode Vertical, Horizontal or Both |
PhotoBatchRotate
Rotate image batch operation
| Property | Type | Description |
|---|---|---|
operation | "rotate" | |
mode | RotationMode | Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise) |
FlipMode
Enum represent flip Mode
| Enum | Description |
|---|---|
| Horizontal | Flip horizontal (y-axis) |
| Vertical | Flip vertical (x-asis) |
| Both | Flip vertical and horizontal |
RotationMode
Enum represent rotation Mode
| Enum | Description |
|---|---|
| R90 | Rotate 90° (90° Clockwise) |
| R180 | Rotate 180° (Half Rotation) |
| R270 | Rotate 270° (90° Counterclockwise) |
Point
Represent position (x, y) from top-left of image
| Property | Type | Description |
|---|---|---|
x | number | The x-axis coordinate from top-left |
y | number | The y-axis coordinate from top-left |
Rect
Represent area of region
| Property | Type | Description |
|---|---|---|
x | number | The x-axis coordinate from top-left |
y | number | The y-axis coordinate from top-left |
width | number | The width of the region |
height | number | The height of the region |
Size
Represent size (width, height) of region or image
| Property | Type | Description |
|---|---|---|
width | number | The width of the region |
height | number | The height of the region |
TextAlign
Enum represent text align
| Enum | Description |
|---|---|
| START | Align text to the start of the line (e.g., left-aligned text in LTR, right-aligned text in RTL) |
| CENTER | Align text to the center of the line |
| END | Align text to the end of the line (e.g., right-aligned text in LTR, left-aligned text in RTL) |
TextDirection
Enum represent text direction, this will affect coordinate and alignment
| Enum | Description |
|---|---|
| LTR | Left-to-Right text direction (e.g., English, Spanish) [Top-Left, Right] |
| RTL | Right-to-Left text direction (e.g., Arabic, Hebrew) [Top-Right, Right] |
TextOptions
Represent attributes of text such as text, color, size, and etc.
| Property | Type | Required | Description |
|---|---|---|---|
position | Point | Yes | The position of the text in background image |
text | string | Yes | The value of the text |
textSize | number | Yes | The size of the text |
fontName | string | No | The font name that can resolve by React Native iOS: Use "PostScript name" Android: Use filename |
color | string | No | The color of the text |
thickness | number | No | The thickness (border width) of the region |
rotation | number | No | The rotation of text in degrees |
shadowRadius | number | No | The shadow radius |
shadowOffset | Point | No | The shadow offset |
shadowColor | string | No | The color of the shadow |
direction | TextDirection | No | The direction of the text, default to TextDirection.LTR |
align | TextAlign | No | The direction of the text, default to TextAlign.START |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (19) are checked with a SAST tool
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'master'
- Info: 'force pushes' disabled on branch 'master'
- Info: 'branch protection settings apply to administrators' is required to merge on branch 'master'
- Warn: could not determine whether codeowners review is allowed
- Warn: no status checks found to merge onto branch 'master'
- Warn: PRs are not required to make changes on branch 'master'; or we don't have data to detect it.If you think it might be the latter, make sure to run Scorecard with a PAT or use Repo Rules (that are always public) instead of Branch Protection settings
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-x4c5-c7rf-jjgv
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7
Reason
Found 2/16 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:38
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql.yml:37
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/npm-publish.yml:12
- Warn: no topLevel permission defined: .github/workflows/codeql.yml:1
- Warn: no topLevel permission defined: .github/workflows/npm-publish.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-and-rebuild.yml:1
- Info: no jobLevel write permissions found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/codeql.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/codeql.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/codeql.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/codeql.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/codeql.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/npm-publish.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/npm-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:128: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:141: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:162: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:168: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:173: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:191: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:220: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-and-rebuild.yml:224: update your workflow using https://app.stepsecurity.io/secureworkflow/guhungry/react-native-photo-manipulator/test-and-rebuild.yml/master?enable=pin
- Info: 0 out of 18 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 7 third-party GitHubAction dependencies pinned
Score
3.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More