🖼️ A writeable in-memory Image JSI Host Object
🏗️ This library is work in progress! 🏗️
A writeable in-memory Image JSI Host Object.
JSI-Image is a modern library that provides Image primitives for the native iOS and Android Platforms, neatly packaged together in one single fast JavaScript API.
There are 3 ways to create a JSI-Image instance:
takePhoto(...)
function.Traditionally, Images in React Native could not be handled efficiently. To demonstrate this, let's take a look at how a Camera library might take a photo:
takePhoto(...)
is called.UIImage
instance (photo) in-memory.UIImage
instance to the file. (slow! 🐌)<FastImage>
component.<FastImage>
component has to load the image from file. (slow! 🐌)<FastImage>
component then displays the UIImage
from the file.With JSI-Image, all the unnecessary slow file operations can be skipped, since the Image can be passed around in-memory.
takePhoto(...)
is called.UIImage
instance (photo) in-memory.UIImage
instance to the caller (JS) (fast! 🔥)Image
instance to a <FastImage>
component.<FastImage>
component then displays the already in-memory UIImage
instance. (fast! 🔥)[log] Successfully took photo in 312ms!
[log] Successfully took photo in 95ms!
JSI-Image improved capture speed (takePhoto(...)
) by more than 3x!
These improvements are even greater at more complicated image processing, such as rotating an image, applying image filters, resizing images, etc.
yarn add react-native-jsi-image
cd ios && pod install
import { loadImageFromUrl } from "react-native-jsi-image"
const image = await loadImageFromUrl('https://...')
console.log(`Successfully loaded ${image.width} x ${image.height} image!`)
import { loadImageFromFile } from "react-native-jsi-image"
const image = await loadImageFromFile('file:///Users/Marc/image.png')
console.log(`Successfully loaded ${image.width} x ${image.height} image!`)
const image = ...
const size = image.width * image.height
const realSize = size * image.scale
const orientation = image.orientation
for (const pixel of image.data) {
console.log(`Pixel: ${pixel}`)
}
const image = ...
console.log(image.isFlipped) // false
const flipped = image.flip()
console.log(flipped.isFlipped) // true
if (image.orientation === "up") {
// rotates image in-memory
image.orientation = "right"
}
let image = ...
image = rotateImageCorrectly(image)
await image.save('file:///tmp/temp-image.png') // or .jpg
To use JSI-Image in your native library, your functions must be JSI functions.
Image
ParameterIn your JSI Module:
#include <JsiImage/ImageHostObject.h>
// ...
jsi::Value myFunction(jsi::Runtime& runtime,
jsi::Value& thisArg,
jsi::Value* arguments,
size_t count) {
auto imageHostObject = arguments[0].asObject(runtime).asHostObject<ImageHostObject>(runtime);
auto uiImage = imageHostObject->image;
// use uiImage here
}
In your TypeScript declaration:
import { Image } from 'react-native-jsi-image'
export function myFunction(image: Image): void
Image
from your native moduleIn your JSI Module:
#include <JsiImage/ImageHostObject.h>
// ...
jsi::Value myFunction(jsi::Runtime& runtime,
jsi::Value& thisArg,
jsi::Value* arguments,
size_t count) {
UIImage* image = // ...
auto instance = std::make_shared<ImageHostObject>(image, promiseVendor);
return jsi::Object::createFromHostObject(runtime, instance);
}
In your TypeScript declaration:
import { Image } from 'react-native-jsi-image'
export function myFunction(): Image
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT