react-native-image-tools-wm

A collection of image processing tools for React Native

Getting started

$ npm install react-native-image-tools-wm --save

Automatic installation

$ react-native link react-native-image-tools-wm

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-image-tools-wm and add RNImageTools.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNImageTools.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

iOS CocoaPods

1. Add pod 'RNImageTools', :path => '../node_modules/react-native-image-tools-wm' to your ios/Podfile
2. Run pod install while in ios directory

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import net.wowmaking.RNImageToolsPackage; to the imports at the top of the file
• Add new RNImageToolsPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-image-tools-wm'
   project(':react-native-image-tools-wm').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-image-tools-wm/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':react-native-image-tools-wm')
   

Usage

import RNImageTools from 'react-native-image-tools-wm';

See examples in the API section.

API

mask(image, maskImage)

Parameter(s)

• image: String - path to image
• maskImage: String - path to mask image
• options: Object
  • trimTransparency: Boolean

Returns Promise of

• maskedImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.mask(image, maskImage, {
  trimTransparency: true
}).then(({ uri, width, height }) => {
    // Sync with your app state
}).catch(console.error);

transform(image, translateX, translateY, scale, rotate)

Parameter(s)

• image: String - path to image
• translateX: Number
• translateY: Number
• scale: Number
• rotate: Number - in degrees

Returns Promise of

• transformedImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.transform(image, 10, -10, 1.25, 45)
  .then(({ uri, width, height }) => {
      // Sync with your app state
  })
  .catch(console.error);

resize(image, width, height)

Parameter(s)

• image: String - path to image
• width: Number
• height: Number - in degrees

Returns Promise of

• resizedImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.resize(image, 500, 500)
  .then(({ uri, width, height }) => {
      // Sync with your app state
  })
  .catch(console.error);

crop(image, x, y, width, height)

Parameter(s)

• image: String - path to image
• x: Number - top offset
• y: Number - left offset
• width: Number
• height: Number

Returns Promise of

• croppedImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.crop(image, 100, 100, 500, 500)
  .then(({ uri, width, height }) => {
      // Sync with your app state
  })
  .catch(console.error);

createMaskFromShape(options)

Creates a bitmap with white background and draws a black shape from provided points. It's intended usage is to generate mask images on the fly.

Parameter(s)

• options: Object
  • points: Array of points
    • point: Object
      • x: Number
      • y: Number
  • width: Number
  • height: Number
  • inverted: Boolean

Returns Promise of

• maskImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.createMaskFromShape({
  points: [
    { x: 20, y: 20 },
    { x: 200, y: 200 },
    { x: 200, y: 20 },
    { x: 20, y: 20 },
  ],
  width: 500,
  height: 500,
  inverted: false,
}).then(({ uri, width, height }) => {
  // Sync with your app state
}).catch(console.error);

merge(images)

Parameter(s)

• images: Array
  • uri: String - path to image

Returns Promise of

• mergedImage: Object
  • uri: String
  • width: Number
  • height: Number

RNImageTools.merge(
    [
        image1,
        image2,
        image3,
    ]
).then(({ uri, width, height }) => {
  // Sync with your app state
}).catch(console.error);