Currently image capture works like this:
-> means bridge call
- JS -> Native:
takePhoto invocation
- Native takes photo
- Native writes photo (
UIImage/Bitmap) to a file (🐢 slow!)
- Native -> JS:
takePhoto promise resolver with file path, goes over bridge (🐢 slow!)
- JS uses that path to mount an
<Image>/<FastImage>
- JS -> Native:
<Image>/<FastImage> wants to load photo from file again (🐢 slow!)
With the upcoming React Native Re-Architecture this will change. Instead, I want to achieve the following:
=> means direct C++ function invocation, no bridge
- JS => Native:
takePhoto invocation
- Native takes photo
- Native creates a thin wrapper
jsi::HostObject which contains the UIImage/Bitmap object (🐇 fast!)
- Native => JS:
takePhoto promise resolver with jsi::HostObject ("image") (🐇 fast!)
- JS keeps that image object in memory and mounts an
<Image>/<FastImage>
- JS => Native:
<Image>/<FastImage> simply sets the already in-memory image to display (🐇 fast!)
This will provide huge performance improvements since 1. the entire async Bridge calls are gone, and 2. because the File IO is completely gone.
I'm estimating at least 200ms of faster capture. (measured File I/O quite a while ago)
To display my jsi::HostObject image, I either have to create a custom image component, or maybe React Native's Core Image component will support this out of the box.
We'll see.
Currently image capture works like this:
takePhotoinvocationUIImage/Bitmap) to a file (🐢 slow!)takePhotopromise resolver with file path, goes over bridge (🐢 slow!)<Image>/<FastImage><Image>/<FastImage>wants to load photo from file again (🐢 slow!)With the upcoming React Native Re-Architecture this will change. Instead, I want to achieve the following:
takePhotoinvocationjsi::HostObjectwhich contains theUIImage/Bitmapobject (🐇 fast!)takePhotopromise resolver withjsi::HostObject("image") (🐇 fast!)<Image>/<FastImage><Image>/<FastImage>simply sets the already in-memory image to display (🐇 fast!)This will provide huge performance improvements since 1. the entire async Bridge calls are gone, and 2. because the File IO is completely gone.
I'm estimating at least 200ms of faster capture. (measured File I/O quite a while ago)
To display my
jsi::HostObjectimage, I either have to create a custom image component, or maybe React Native's Core Image component will support this out of the box.We'll see.