Gathering detailed insights and metrics for @oguzhnatly/react-native-image-manipulator
Gathering detailed insights and metrics for @oguzhnatly/react-native-image-manipulator
🚀 React Native Typed Image Manipulator for Crop, Rotate, Flip, and Resize images without Expo and Unimodules. Based on Expo's ImageManipulator - https://docs.expo.io/versions/latest/sdk/imagemanipulator
Installations
npm install @oguzhnatly/react-native-image-manipulatorDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.17.0
NPM Version
6.14.13
Score
72.7
Supply Chain
99.3
Quality
75.4
Maintenance
100
Vulnerability
100
License
Languages
7
Java
Objective-C
TypeScript
Ruby
Kotlin
JavaScript
Objective-C++
Java (37.34%)
Objective-C (31.27%)
TypeScript (7.83%)
Ruby (7.54%)
Kotlin (6.95%)
JavaScript (4.59%)
Objective-C++ (4.49%)
Developer
Download Statistics
Total Downloads
60,311
Last Day
1
Last Week
146
Last Month
864
Last Year
17,293
GitHub Statistics
MIT License
15 Stars
50 Commits
8 Forks
1 Watchers
4 Branches
1 Contributors
Updated on Mar 05, 2024
Bundle Size
279.00 B
Minified
212.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
@oguzhnatly/react-native-image-manipulator@1.0.5
Unpacked Size
407.52 kB
Size
185.57 kB
File Count
73
NPM Version
6.14.13
Node Version
14.17.0
Total Downloads
Cumulative downloads
Total Downloads
60,311
Last Day
-90.9%
1
Compared to previous day
Last Week
-40.2%
146
Compared to previous week
Last Month
5.9%
864
Compared to previous month
Last Year
-53.2%
17,293
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
Getting started
$ npm install @oguzhnatly/react-native-image-manipulator --save
OR
$ yarn add @oguzhnatly/react-native-image-manipulator
Pod installation
$ cd ios && pod install
Mostly automatic installation
$ react-native link @oguzhnatly/react-native-image-manipulator
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜@oguzhnatly➜react-native-image-manipulatorand addRNImageManipulator.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNImageManipulator.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.oguzhnatly.rnimagemanipulator.RNImageManipulatorPackage;to the imports at the top of the file - Add
new RNImageManipulatorPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-image-manipulator' project(':react-native-image-manipulator').projectDir = new File(rootProject.projectDir, '../node_modules/@oguzhnatly/react-native-image-manipulator/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-image-manipulator')
RNImageManipulator.manipulate(uri, actions, saveOptions)
Manipulate the image provided via uri. Available modifications are rotating, flipping (mirroring), resizing and cropping. Each invocation results in a new file. With one invocation you can provide a set of actions to perform over the image. Overwriting the source file would not have an effect in displaying the result as images are cached.
Arguments
-
uri (string) -- URI of the file to manipulate. Should be in the app's scope.
-
actions (array) --
An array of objects representing manipulation options. Each object should have one of the following keys:
- resize (object) -- An object of shape
{ width, height }. Values correspond to the result image dimensions. If you specify only one value, the other will be set automatically to preserve image ratio. - rotate (number) -- Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative.
- flip (object) -- An object of shape
{ vertical, horizontal }. Having a field set to true, flips the image in specified axis. - crop (object) -- An object of shape
{ originX, originY, width, height }. Fields specify top-left corner and dimensions of a crop rectangle.
- resize (object) -- An object of shape
-
saveOptions (object) -- A map defining how modified image should be saved:
- compress (number) -- A value in range 0 - 1 specifying compression level of the result image. 1 means no compression and 0 the highest compression.
- format (string) -- Either
'jpeg'or'png'. Specifies what type of compression should be used and what is the result file extension. PNG compression is lossless but slower, JPEG is faster but the image has visible artifacts. Defaults to'jpeg'. - base64 (boolean) -- Whether to also include the image data in Base64 format.
Returns
Returns { uri, width, height } where uri is a URI to the modified image (useable as the source for an Image/Video element), width, height specify the dimensions of the image. It can contain also base64 - it is included if the base64 saveOption was truthy, and is a string containing the JPEG/PNG (depending on format) data of the image in Base64--prepend that with 'data:image/xxx;base64,' to get a data URI, which you can use as the source for an Image element for example (where xxx is 'jpeg' or 'png').
Basic Example
This will first rotate the image 90 degrees clockwise, then flip the rotated image vertically and save it as a PNG.
1import React from "react"; 2import { Button, TouchableOpacity, Text, View, Image } from "react-native"; 3import RNImageManipulator from "@oguzhnatly/react-native-image-manipulator"; 4 5import Colors from "../constants/Colors"; 6 7export default class ImageManipulatorSample extends React.Component { 8 state = { 9 ready: false, 10 image: null 11 }; 12 13 componentWillMount() { 14 (async () => { 15 const image = Asset.fromModule(require("../path/to/image.jpg")); 16 await image.downloadAsync(); 17 this.setState({ 18 ready: true, 19 image 20 }); 21 })(); 22 } 23 24 render() { 25 return ( 26 <View style={{ flex: 1 }}> 27 <View style={{ padding: 10 }}> 28 <Button onPress={this._rotate90andFlip} /> 29 {this.state.ready && this._renderImage()} 30 </View> 31 </View> 32 ); 33 } 34 35 _rotate90andFlip = async () => { 36 const manipResult = await RNImageManipulator.manipulate( 37 this.state.image.localUri || this.state.image.uri, 38 [{ rotate: 90 }, { flip: { vertical: true } }], 39 { format: "png" } 40 ); 41 this.setState({ image: manipResult }); 42 }; 43 44 _renderImage = () => { 45 return ( 46 <View 47 style={{ 48 marginVertical: 10, 49 alignItems: "center", 50 justifyContent: "center" 51 }} 52 > 53 <Image 54 source={{ uri: this.state.image.localUri || this.state.image.uri }} 55 style={{ width: 300, height: 300, resizeMode: "contain" }} 56 /> 57 </View> 58 ); 59 }; 60}
No vulnerabilities found.
No security vulnerabilities found.