{"id":18332003,"url":"https://github.com/mrousavy/react-native-jsi-image","last_synced_at":"2025-04-09T18:16:32.949Z","repository":{"id":44404127,"uuid":"444339854","full_name":"mrousavy/react-native-jsi-image","owner":"mrousavy","description":"🖼️ A writeable in-memory Image JSI Host Object","archived":false,"fork":false,"pushed_at":"2022-01-04T11:45:26.000Z","size":563,"stargazers_count":289,"open_issues_count":6,"forks_count":4,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-09T18:16:28.610Z","etag":null,"topics":["image","jsi","library","native","performance","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrousavy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-04T08:22:00.000Z","updated_at":"2025-04-08T04:19:34.000Z","dependencies_parsed_at":"2022-07-15T06:30:43.040Z","dependency_job_id":null,"html_url":"https://github.com/mrousavy/react-native-jsi-image","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-jsi-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-jsi-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-jsi-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-jsi-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrousavy","download_url":"https://codeload.github.com/mrousavy/react-native-jsi-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085323,"owners_count":21045139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","jsi","library","native","performance","react","react-native"],"created_at":"2024-11-05T19:36:50.751Z","updated_at":"2025-04-09T18:16:32.928Z","avatar_url":"https://github.com/mrousavy.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🖼️ react-native-jsi-image\n\n**🏗️ This library is work in progress! 🏗️**\n\n**A writeable in-memory Image JSI Host Object.**\n\nJSI-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.\n\nThere are 3 ways to create a JSI-Image instance:\n\n* Load from a file\n* Load from a Web-URL\n* Returned by another library, such as [VisionCamera](https://github.com/mrousavy/react-native-vision-camera)'s `takePhoto(...)` function.\n\n## Why\n\nTraditionally, 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:\n\n1. [js] User taps capture button, `takePhoto(...)` is called.\n2. [native] Camera takes a photo. The library now has `UIImage` instance (photo) in-memory.\n3. [native] Library creates a new file on disk. (**slow!** 🐌)\n4. [native] Library writes the `UIImage` instance to the file. (**slow!** 🐌)\n5. [native] Library returns the path to the file to the caller (JS)\n6. [js] App now navigates to the \"captured media\" screen to display the media.\n7. [js] App passes the file path to a `\u003cFastImage\u003e` component.\n8. [native] `\u003cFastImage\u003e` component has to load the image from file. (**slow!** 🐌)\n9. [native] `\u003cFastImage\u003e` component then displays the `UIImage` from the file.\n\nWith JSI-Image, all the unnecessary slow file operations can be skipped, since the Image can be passed around in-memory.\n\n1. [js] User taps capture button, `takePhoto(...)` is called.\n2. [native] Camera takes a photo. The library now has `UIImage` instance (photo) in-memory.\n5. [native] Library returns the `UIImage` instance to the caller (JS) (**fast!** 🔥)\n6. [js] App now navigates to the \"captured media\" screen to display the media.\n7. [js] App passes the in-memory `Image` instance to a `\u003cFastImage\u003e` component.\n8. [native] `\u003cFastImage\u003e` component then displays the already in-memory `UIImage` instance. (**fast!** 🔥)\n\n## Benchmarks\n\n### Without JSI-Image\n\n```\n[log] Successfully took photo in 312ms!\n```\n\n### With JSI-Image\n\n```\n[log] Successfully took photo in 95ms!\n```\n\nJSI-Image improved capture speed (`takePhoto(...)`) by more than **3x**!\n\nThese improvements are even greater at more complicated image processing, such as rotating an image, applying image filters, resizing images, etc.\n\n## Installation\n\n```sh\nyarn add react-native-jsi-image\ncd ios \u0026\u0026 pod install\n```\n\n## Usage\n\n### Load from URL\n\n```ts\nimport { loadImageFromUrl } from \"react-native-jsi-image\"\n\nconst image = await loadImageFromUrl('https://...')\nconsole.log(`Successfully loaded ${image.width} x ${image.height} image!`)\n```\n\n### Load from File\n\n```ts\nimport { loadImageFromFile } from \"react-native-jsi-image\"\n\nconst image = await loadImageFromFile('file:///Users/Marc/image.png')\nconsole.log(`Successfully loaded ${image.width} x ${image.height} image!`)\n```\n\n### Inspect Image\n\n```ts\nconst image = ...\nconst size = image.width * image.height\nconst realSize = size * image.scale\nconst orientation = image.orientation\n\nfor (const pixel of image.data) {\n  console.log(`Pixel: ${pixel}`)\n}\n```\n\n### Rotate/Flip Image\n\n```ts\nconst image = ...\nconsole.log(image.isFlipped) // false\nconst flipped = image.flip()\nconsole.log(flipped.isFlipped) // true\n\nif (image.orientation === \"up\") {\n  // rotates image in-memory\n  image.orientation = \"right\"\n}\n```\n\n### Save modified Image to File\n\n```ts\nlet image = ...\nimage = rotateImageCorrectly(image)\nawait image.save('file:///tmp/temp-image.png') // or .jpg\n```\n\n### For Library Developers\n\nTo use JSI-Image in your native library, your functions must be JSI functions.\n\n#### Accept `Image` Parameter\n\nIn your JSI Module:\n\n```cpp\n#include \u003cJsiImage/ImageHostObject.h\u003e\n\n// ...\n\njsi::Value myFunction(jsi::Runtime\u0026 runtime,\n                      jsi::Value\u0026 thisArg,\n                      jsi::Value* arguments,\n                      size_t count) {\n  auto imageHostObject = arguments[0].asObject(runtime).asHostObject\u003cImageHostObject\u003e(runtime);\n  auto uiImage = imageHostObject-\u003eimage;\n  // use uiImage here\n}\n```\n\nIn your TypeScript declaration:\n\n```ts\nimport { Image } from 'react-native-jsi-image'\n\nexport function myFunction(image: Image): void\n```\n\n#### Return `Image` from your native module\n\nIn your JSI Module:\n\n```cpp\n#include \u003cJsiImage/ImageHostObject.h\u003e\n\n// ...\n\njsi::Value myFunction(jsi::Runtime\u0026 runtime,\n                      jsi::Value\u0026 thisArg,\n                      jsi::Value* arguments,\n                      size_t count) {\n  UIImage* image = // ...\n\n  auto instance = std::make_shared\u003cImageHostObject\u003e(image, promiseVendor);\n  return jsi::Object::createFromHostObject(runtime, instance);\n}\n```\n\nIn your TypeScript declaration:\n\n```ts\nimport { Image } from 'react-native-jsi-image'\n\nexport function myFunction(): Image\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Freact-native-jsi-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrousavy%2Freact-native-jsi-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Freact-native-jsi-image/lists"}