diff --git a/docs/docs/video.md b/docs/docs/video.md
new file mode 100644
index 0000000000..fe4f9baabe
--- /dev/null
+++ b/docs/docs/video.md
@@ -0,0 +1,96 @@
+---
+id: video
+title: Video
+sidebar_label: Video
+slug: /video
+---
+
+React Native Skia provides a way to load video frames as images, enabling rich multimedia experiences within your applications.
+A video frame can be used anywhere a Skia image is accepted: `Image`, `ImageShader`, and `Atlas`.
+
+## Requirements
+
+- **Android:** API level 26 or higher.
+- **Video URL:** Must be a local path. We recommend using it in combination with [expo-asset](https://docs.expo.dev/versions/latest/sdk/asset/) to download the video.
+- **Animated Playback:** Available only via [Reanimated 3](/docs/animations/animations) and above.
+- **Sound Playback:** Coming soon. In the meantime, audio can be played using [expo-av](https://docs.expo.dev/versions/latest/sdk/av/).
+
+## Example
+
+Here is an example of how to use the video support in React Native Skia. This example demonstrates how to load and display video frames within a canvas, applying a color matrix for visual effects. Tapping the screen will pause and play the video.
+
+```tsx twoslash
+import React from "react";
+import {
+  Canvas,
+  ColorMatrix,
+  Fill,
+  ImageShader,
+  useVideo
+} from "@shopify/react-native-skia";
+import { Pressable, useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+interface VideoExampleProps {
+    localVideoFile: string;
+}
+
+// The URL needs to be a local path, we usually use expo-asset for that.
+export const VideoExample = ({ localVideoFile }: VideoExampleProps) => {
+  const paused = useSharedValue(false);
+  const { width, height } = useWindowDimensions();
+  const video = useVideo(
+    require(localVideoFile),
+    {
+      paused,
+    }
+  );
+  return (
+    <Pressable
+      style={{ flex: 1 }}
+      onPress={() => (paused.value = !paused.value)}
+    >
+      <Canvas style={{ flex: 1 }}>
+        <Fill>
+          <ImageShader
+            image={video}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+          <ColorMatrix
+            matrix={[
+              0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,
+              0, 0, 1, 0,
+            ]}
+          />
+        </Fill>
+      </Canvas>
+    </Pressable>
+  );
+};
+```
+
+## Using expo-asset
+
+Below is an example where we use [expo-asset](https://docs.expo.dev/versions/latest/sdk/asset/) to load the video.
+
+```tsx twoslash
+import { useVideo } from "@shopify/react-native-skia";
+import { useAssets } from "expo-asset";
+
+// Example usage:
+// const video = useVideoFromAsset(require("./BigBuckBunny.mp4"));
+export const useVideoFromAsset = (
+  mod: number,
+  options?: Parameters<typeof useVideo>[1]
+) => {
+  const [assets, error] = useAssets([mod]);
+  if (error) {
+    throw error;
+  }
+  return useVideo(assets ? assets[0].localUri : null, options);
+};
+```
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 73b42014a5..f039f15d0f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,6 +23,7 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus-preset-shiki-twoslash": "1.1.41",
+    "expo-asset": "^10.0.6",
     "file-loader": "^6.2.0",
     "its-fine": "^1.0.8",
     "prism-react-renderer": "^1.2.1",
diff --git a/docs/sidebars.js b/docs/sidebars.js
index a24c18af56..52f464f48c 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -63,6 +63,11 @@ const sidebars = {
       label: "Images",
       items: ["image", "animated-images", "image-svg", "snapshotviews"],
     },
+    {
+      type: "doc",
+      label: "Video",
+      id: "video",
+    },
     {
       collapsed: true,
       type: "category",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 00af06df03..07321c81b7 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -159,6 +159,13 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
+"@babel/code-frame@~7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.3", "@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
@@ -397,6 +404,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz#918b1a7fa23056603506370089bd990d8720db62"
+  integrity sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==
+
 "@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
@@ -420,6 +432,16 @@
     "@babel/traverse" "^7.23.9"
     "@babel/types" "^7.23.9"
 
+"@babel/highlight@^7.10.4":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.5.tgz#bc0613f98e1dd0720e99b2a9ee3760194a704b6e"
+  integrity sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.5"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/highlight@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
@@ -1845,6 +1867,72 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@expo/config-plugins@~8.0.0":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-8.0.4.tgz#1e781cd971fab27409ed2f8d621db6d29cce3036"
+  integrity sha512-Hi+xuyNWE2LT4LVbGttHJgl9brnsdWAhEB42gWKb5+8ae86Nr/KwUBQJsJppirBYTeLjj5ZlY0glYnAkDa2jqw==
+  dependencies:
+    "@expo/config-types" "^51.0.0-unreleased"
+    "@expo/json-file" "~8.3.0"
+    "@expo/plist" "^0.1.0"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.5.4"
+    slash "^3.0.0"
+    slugify "^1.6.6"
+    xcode "^3.0.1"
+    xml2js "0.6.0"
+
+"@expo/config-types@^51.0.0-unreleased":
+  version "51.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-51.0.0.tgz#f5df238cd1237d7e4d9cc8217cdef3383c2a00cf"
+  integrity sha512-acn03/u8mQvBhdTQtA7CNhevMltUhbSrpI01FYBJwpVntufkU++ncQujWKlgY/OwIajcfygk1AY4xcNZ5ImkRA==
+
+"@expo/config@~9.0.0-beta.0":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-9.0.2.tgz#112b93436dbca8aa3da73a46329e5b58fdd435d2"
+  integrity sha512-BKQ4/qBf3OLT8hHp5kjObk2vxwoRQ1yYQBbG/OM9Jdz32yYtrU8opTbKRAxfZEWH5i3ZHdLrPdC1rO0I6WxtTw==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    "@expo/config-plugins" "~8.0.0"
+    "@expo/config-types" "^51.0.0-unreleased"
+    "@expo/json-file" "^8.3.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    require-from-string "^2.0.2"
+    resolve-from "^5.0.0"
+    semver "^7.6.0"
+    slugify "^1.3.4"
+    sucrase "3.34.0"
+
+"@expo/json-file@^8.3.0", "@expo/json-file@~8.3.0":
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.3.3.tgz#7926e3592f76030ce63d6b1308ac8f5d4d9341f4"
+  integrity sha512-eZ5dld9AD0PrVRiIWpRkm5aIoWBw3kAyd8VkuWEy92sEthBKDDDHAnK2a0dw0Eil6j7rK7lS/Qaq/Zzngv2h5A==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    json5 "^2.2.2"
+    write-file-atomic "^2.3.0"
+
+"@expo/plist@^0.1.0":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.1.3.tgz#b4fbee2c4f7a88512a4853d85319f4d95713c529"
+  integrity sha512-GW/7hVlAylYg1tUrEASclw1MMk9FP4ZwyFAY/SUTJIhPDQHtfOlXREyWV3hhrHdX/K+pS73GNgdfT6E/e+kBbg==
+  dependencies:
+    "@xmldom/xmldom" "~0.7.7"
+    base64-js "^1.2.3"
+    xmlbuilder "^14.0.0"
+
+"@expo/sdk-runtime-versions@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/sdk-runtime-versions/-/sdk-runtime-versions-1.0.0.tgz#d7ebd21b19f1c6b0395e50d78da4416941c57f7c"
+  integrity sha512-Doz2bfiPndXYFPMRwPyGa1k5QaKDVpY806UJj570epIiMzWaYyCtobasyfC++qfIXVb5Ocy7r3tP9d62hAQ7IQ==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -2252,6 +2340,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.72.0.tgz#c82a76a1d86ec0c3907be76f7faf97a32bbed05d"
   integrity sha512-Im93xRJuHHxb1wniGhBMsxLwcfzdYreSZVQGDoMJgkd6+Iky61LInGEHnQCTN0fKNYF1Dvcofb4uMmE1RQHXHQ==
 
+"@react-native/assets-registry@~0.74.83":
+  version "0.74.83"
+  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.74.83.tgz#c1815dc10f9e1075e0d03b4c8a9619145969522e"
+  integrity sha512-2vkLMVnp+YTZYTNSDIBZojSsjz8sl5PscP3j4GcV6idD8V978SZfwFlk8K0ti0BzRs11mzL0Pj17km597S/eTQ==
+
 "@react-native/codegen@^0.72.8":
   version "0.72.8"
   resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.72.8.tgz#0593f628e1310f430450a9479fbb4be35e7b63d6"
@@ -2290,9 +2383,7 @@
 
 "@shopify/react-native-skia@link:../package":
   version "0.0.0"
-  dependencies:
-    canvaskit-wasm "0.39.1"
-    react-reconciler "0.27.0"
+  uid ""
 
 "@sideway/address@^4.1.5":
   version "4.1.5"
@@ -3190,6 +3281,16 @@
   resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
   integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
 
+"@xmldom/xmldom@^0.8.8":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
+"@xmldom/xmldom@~0.7.7":
+  version "0.7.13"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.13.tgz#ff34942667a4e19a9f4a0996a76814daac364cf3"
+  integrity sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -3379,6 +3480,11 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -3677,7 +3783,7 @@ base16@^1.0.0:
   resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
   integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==
 
-base64-js@^1.1.2, base64-js@^1.3.1:
+base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -3687,6 +3793,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+big-integer@1.6.x:
+  version "1.6.52"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
+  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -3765,6 +3876,20 @@ boxen@^6.2.1:
     widest-line "^4.0.1"
     wrap-ansi "^8.0.1"
 
+bplist-creator@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.1.0.tgz#018a2d1b587f769e379ef5519103730f8963ba1e"
+  integrity sha512-sXaHZicyEEmY86WyueLTQesbeoH/mquvarJaQNbjuOQO+7gbFcDEWqKmcWA4cOTLzFlfgvkiVxolk1k5bBIpmg==
+  dependencies:
+    stream-buffers "2.2.x"
+
+bplist-parser@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.3.1.tgz#e1c90b2ca2a9f9474cc72f6862bbf3fee8341fd1"
+  integrity sha512-PyJxiNtA5T2PlLIeBot4lbp7rj4OadzjnMZD/G5zuBNt8ei/yCU7+wW0h2bag9vr8c+/WuRWmSxbqAl9hL1rBA==
+  dependencies:
+    big-integer "1.6.x"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3797,6 +3922,24 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -4168,6 +4311,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -5401,6 +5549,23 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+expo-asset@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-10.0.6.tgz#0894c4e824ce90e130852e6eecaba386e9f2e5aa"
+  integrity sha512-waP73/ccn/HZNNcGM4/s3X3icKjSSbEQ9mwc6tX34oYNg+XE5WdwOuZ9wgVVFrU7wZMitq22lQXd2/O0db8bxg==
+  dependencies:
+    "@react-native/assets-registry" "~0.74.83"
+    expo-constants "~16.0.0"
+    invariant "^2.2.4"
+    md5-file "^3.2.3"
+
+expo-constants@~16.0.0:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-16.0.1.tgz#1285e29c85513c6e88e118289e2baab72596d3f7"
+  integrity sha512-s6aTHtglp926EsugWtxN7KnpSsE9FCEjb7CgEjQQ78Gpu4btj4wB+IXot2tlqNwqv+x7xFe5veoPGfJDGF/kVg==
+  dependencies:
+    "@expo/config" "~9.0.0-beta.0"
+
 express@^4.17.3:
   version "4.19.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
@@ -5639,7 +5804,7 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-find-up@^5.0.0:
+find-up@^5.0.0, find-up@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
@@ -5856,6 +6021,11 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+getenv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/getenv/-/getenv-1.0.0.tgz#874f2e7544fbca53c7a4738f37de8605c3fcfc31"
+  integrity sha512-7yetJWqbS9sbn0vIfliPsFgoXMKn/YMF+Wuiog97x+urnSRRRZ7xB+uVkwGKzRgq9CDFfMQnE9ruL5DHv9c6Xg==
+
 github-slugger@^1.4.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.5.0.tgz#17891bbc73232051474d68bd867a34625c955f7d"
@@ -5880,6 +6050,18 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -7094,7 +7276,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.3:
+json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -7365,6 +7547,13 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+md5-file@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-3.2.3.tgz#f9bceb941eca2214a4c0727f5e700314e770f06f"
+  integrity sha512-3Tkp1piAHaworfcCgH0jKbTvj1jWWFgbvh2cXaNCgHwyTCBxxvD1Y04rmfpvdPm1P4oXMOpm6+2H7sr7v9v8Fw==
+  dependencies:
+    buffer-alloc "^1.1.0"
+
 mdast-squeeze-paragraphs@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz#7c4c114679c3bee27ef10b58e2e015be79f1ef97"
@@ -7873,6 +8062,15 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -8008,7 +8206,7 @@ ob1@0.76.8:
   resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.76.8.tgz#ac4c459465b1c0e2c29aaa527e09fc463d3ffec8"
   integrity sha512-dlBkJJV5M/msj9KYA9upc+nUWVwuOFFTbu28X6kZeGwcuW+JxaHSBZ70SYQnk5M+j5JbNLR6yKHmgW4M5E7X5g==
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -8385,7 +8583,7 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pirates@^4.0.6:
+pirates@^4.0.1, pirates@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
@@ -8411,6 +8609,15 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+plist@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/plist/-/plist-3.1.0.tgz#797a516a93e62f5bde55e0b9cc9c967f860893c9"
+  integrity sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==
+  dependencies:
+    "@xmldom/xmldom" "^0.8.8"
+    base64-js "^1.5.1"
+    xmlbuilder "^15.1.1"
+
 postcss-calc@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
@@ -9468,6 +9675,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -9593,7 +9805,7 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@^1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
   integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
@@ -9706,6 +9918,11 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.7, semver@^7.5.2, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.0:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -9885,6 +10102,15 @@ signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+simple-plist@^1.1.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-1.3.1.tgz#16e1d8f62c6c9b691b8383127663d834112fb017"
+  integrity sha512-iMSw5i0XseMnrhtIzRb7XpQEXepa9xhWxGUojHBL43SIpQuDQkh3Wpy67ZbDzZVr6EKxvwVChnVpdl8hEVLDiw==
+  dependencies:
+    bplist-creator "0.1.0"
+    bplist-parser "0.3.1"
+    plist "^3.0.5"
+
 sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -9928,6 +10154,11 @@ slice-ansi@^2.0.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slugify@^1.3.4, slugify@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
+  integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -10047,6 +10278,11 @@ std-env@^3.0.1:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
+stream-buffers@2.2.x:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
+  integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
+
 string-natural-compare@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
@@ -10210,6 +10446,19 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+sucrase@3.34.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 sudo-prompt@^9.0.0:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
@@ -10321,6 +10570,20 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
@@ -10406,6 +10669,11 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
   integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.14.1:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -10842,6 +11110,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -11253,6 +11526,14 @@ ws@^8.13.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
   integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
 
+xcode@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/xcode/-/xcode-3.0.1.tgz#3efb62aac641ab2c702458f9a0302696146aa53c"
+  integrity sha512-kCz5k7J7XbJtjABOvkc5lJmkiDh8VhjVCGNiqdKCscmVpdVUpEAyXv1xmCLkQJ5dsHqx3IPO4XW+NTDhU/fatA==
+  dependencies:
+    simple-plist "^1.1.0"
+    uuid "^7.0.3"
+
 xdg-basedir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
@@ -11265,6 +11546,29 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
+xml2js@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.6.0.tgz#07afc447a97d2bd6507a1f76eeadddb09f7a8282"
+  integrity sha512-eLTh0kA8uHceqesPqSE+VvO1CDDJWMwlQfB6LuN6T8w6MaDJ8Txm8P7s5cHD0miF0V+GGTZrDQfxPZQVsur33w==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
+xmlbuilder@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-14.0.0.tgz#876b5aec4f05ffd5feb97b0a871c855d16fbeb8c"
+  integrity sha512-ts+B2rSe4fIckR6iquDjsKbQFK2NlUk6iG5nf14mDEyldgoc2nEKZ3jZWMPTxGQwVgToSjt6VGIho1H8/fNFTg==
+
+xmlbuilder@^15.1.1:
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz#9dcdce49eea66d8d10b42cae94a79c3c8d0c2ec5"
+  integrity sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==
+
+xmlbuilder@~11.0.0:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
+  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 512c0891e7..c8532d3fdb 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -442,7 +442,7 @@ PODS:
     - React-perflogger (= 0.71.7)
   - RNGestureHandler (2.9.0):
     - React-Core
-  - RNReanimated (3.6.2):
+  - RNReanimated (3.11.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
     - ReactCommon/turbomodule/core
@@ -701,7 +701,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: c5c89f8f543842dd864b63ded1b0bbb9c9445328
   ReactCommon: dbfbe2f7f3c5ce4ce44f43f2fd0d5950d1eb67c5
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
-  RNReanimated: 738543ef6ec0024ea0bc9f4ab3ac99af6f068448
+  RNReanimated: c112febb9548b8e0bcc5abddff308f69913c4270
   RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
   RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
diff --git a/example/jestSetup.mjs b/example/jestSetup.mjs
index 067758ab06..52726852af 100644
--- a/example/jestSetup.mjs
+++ b/example/jestSetup.mjs
@@ -10,6 +10,10 @@ JestUtils.setUpTests();
 global.__reanimatedWorkletInit = () => {};
 global.CanvasKit = await CanvasKitInit({});
 
+jest.mock("expo-asset", () => ({
+  useAssets: () => [[], undefined],
+}));
+
 jest.mock("react-native-reanimated", () => {
   // The mock for `call` immediately calls the callback which is incorrect
   // So we override it with a no-op
diff --git a/example/package.json b/example/package.json
index dfff048074..73054d43b4 100644
--- a/example/package.json
+++ b/example/package.json
@@ -33,7 +33,7 @@
     "react-dom": "18.0.0",
     "react-native": "0.71.7",
     "react-native-gesture-handler": "2.9.0",
-    "react-native-reanimated": "3.6.2",
+    "react-native-reanimated": "3.11.0",
     "react-native-safe-area-context": "4.3.4",
     "react-native-screens": "3.17.0",
     "react-native-svg": "13.8.0",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 4298fe44ae..4fd9c447a9 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -29,6 +29,7 @@ import {
   Stickers,
   FrostedCard,
   SpeedTest,
+  Video,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -61,6 +62,7 @@ const linking: LinkingOptions<StackParamList> = {
       Stickers: "stickers",
       FrostedCard: "frosted-card",
       SpeedTest: "speedtest",
+      Video: "video",
     },
   },
   prefixes: ["rnskia://"],
@@ -194,6 +196,13 @@ const App = () => {
                 header: () => null,
               }}
             />
+            <Stack.Screen
+              name="Video"
+              component={Video}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen
               name="Performance"
               component={PerformanceDrawingTest}
diff --git a/example/src/Examples/Video/Video.tsx b/example/src/Examples/Video/Video.tsx
new file mode 100644
index 0000000000..de90d4d993
--- /dev/null
+++ b/example/src/Examples/Video/Video.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import {
+  Canvas,
+  ColorMatrix,
+  Fill,
+  ImageShader,
+} from "@shopify/react-native-skia";
+import { Pressable, useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+import { useVideoFromAsset } from "../../components/Animations";
+
+export const Video = () => {
+  const paused = useSharedValue(false);
+  const { width, height } = useWindowDimensions();
+  const video = useVideoFromAsset(
+    require("../../Tests/assets/BigBuckBunny.mp4"),
+    {
+      paused,
+      looping: true,
+    }
+  );
+  return (
+    <Pressable
+      style={{ flex: 1 }}
+      onPress={() => (paused.value = !paused.value)}
+    >
+      <Canvas style={{ flex: 1 }}>
+        <Fill>
+          <ImageShader
+            image={video}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+          <ColorMatrix
+            matrix={[
+              0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,
+              0, 0, 1, 0,
+            ]}
+          />
+        </Fill>
+      </Canvas>
+    </Pressable>
+  );
+};
diff --git a/example/src/Examples/Video/index.ts b/example/src/Examples/Video/index.ts
new file mode 100644
index 0000000000..ba5f73c1ad
--- /dev/null
+++ b/example/src/Examples/Video/index.ts
@@ -0,0 +1 @@
+export * from "./Video";
diff --git a/example/src/Examples/index.ts b/example/src/Examples/index.ts
index 9bce87b6d5..024a807cae 100644
--- a/example/src/Examples/index.ts
+++ b/example/src/Examples/index.ts
@@ -23,3 +23,4 @@ export * from "./Transitions";
 export * from "./Stickers";
 export * from "./FrostedCard";
 export * from "./SpeedTest";
+export * from "./Video";
diff --git a/example/src/Home/HomeScreen.tsx b/example/src/Home/HomeScreen.tsx
index 1a7f5bac70..a96f939d12 100644
--- a/example/src/Home/HomeScreen.tsx
+++ b/example/src/Home/HomeScreen.tsx
@@ -103,6 +103,7 @@ export const HomeScreen = () => {
         description="Drawing Performance Test"
         route="Performance"
       />
+      <HomeScreenButton title="📹 Video" description="Video" route="Video" />
       <HomeScreenButton
         title="🔧 E2E Tests"
         description="Run integration tests"
diff --git a/example/src/Tests/assets/BigBuckBunny.mp4 b/example/src/Tests/assets/BigBuckBunny.mp4
new file mode 100644
index 0000000000..ed139d6d50
Binary files /dev/null and b/example/src/Tests/assets/BigBuckBunny.mp4 differ
diff --git a/example/src/Tests/deserialize.ts b/example/src/Tests/deserialize.ts
index bc050a6799..25670fcf4e 100644
--- a/example/src/Tests/deserialize.ts
+++ b/example/src/Tests/deserialize.ts
@@ -28,6 +28,7 @@ export const parseNode = (
 
 export const parseProps = (props: SerializedProps, assets: Assets) => {
   const newProps: SerializedProps = {};
+  newProps.localAssets = assets.localAssets.map((asset: string) => asset);
   Object.keys(props).forEach((key) => {
     const value = parseProp(props[key], assets);
     newProps[key] = value;
diff --git a/example/src/Tests/useAssets.ts b/example/src/Tests/useAssets.ts
index 96e95ec425..13e8038b6d 100644
--- a/example/src/Tests/useAssets.ts
+++ b/example/src/Tests/useAssets.ts
@@ -5,6 +5,7 @@ import {
 } from "@shopify/react-native-skia";
 import { useCallback, useState } from "react";
 import { Platform } from "react-native";
+import { useAssets as useExpoAssets } from "expo-asset";
 
 const SkiaLogo =
   Platform.OS === "web" ? require("./assets/skia_logo.png") : "skia_logo";
@@ -20,6 +21,9 @@ const NotoColorEmojiSrc =
     : require("./assets/NotoColorEmoji.ttf");
 
 export const useAssets = () => {
+  const [expoAssets, expoAssetsError] = useExpoAssets([
+    require("./assets/BigBuckBunny.mp4"),
+  ]);
   const [error, setError] = useState<Error | null>(null);
   const errorHandler = useCallback((e: Error) => setError(e), []);
   const mask = useImage(require("./assets/mask.png"), errorHandler);
@@ -46,7 +50,11 @@ export const useAssets = () => {
   if (error) {
     throw new Error("Failed to load assets: " + error.message);
   }
+  if (expoAssetsError) {
+    throw new Error("Failed to load expo assets: " + expoAssetsError.message);
+  }
   if (
+    !expoAssets ||
     !RobotoMedium ||
     !oslo ||
     !NotoColorEmoji ||
@@ -60,6 +68,7 @@ export const useAssets = () => {
     return null;
   }
   return {
+    localAssets: expoAssets.map((asset) => asset.localUri),
     RobotoMedium,
     NotoColorEmoji,
     NotoSansSCRegular,
diff --git a/example/src/assets/videos/bunny.mp4 b/example/src/assets/videos/bunny.mp4
new file mode 100644
index 0000000000..97cf366007
Binary files /dev/null and b/example/src/assets/videos/bunny.mp4 differ
diff --git a/example/src/components/Animations.tsx b/example/src/components/Animations.tsx
index c80d3c5e51..d5e5d7c1a7 100644
--- a/example/src/components/Animations.tsx
+++ b/example/src/components/Animations.tsx
@@ -1,4 +1,6 @@
 import type { Vector } from "@shopify/react-native-skia";
+import { useVideo } from "@shopify/react-native-skia";
+import { useAssets } from "expo-asset";
 import { useEffect } from "react";
 import {
   Easing,
@@ -8,6 +10,17 @@ import {
   withTiming,
 } from "react-native-reanimated";
 
+export const useVideoFromAsset = (
+  mod: number,
+  options?: Parameters<typeof useVideo>[1]
+) => {
+  const [assets, error] = useAssets([mod]);
+  if (error) {
+    throw error;
+  }
+  return useVideo(assets ? assets[0].localUri : null, options);
+};
+
 export const useLoop = ({ duration }: { duration: number }) => {
   const progress = useSharedValue(0);
   useEffect(() => {
@@ -30,3 +43,15 @@ export const translate = ({
   "worklet";
   return [{ translateX: x }, { translateY: y }];
 };
+
+export const snapPoint = (
+  value: number,
+  velocity: number,
+  points: ReadonlyArray<number>
+): number => {
+  "worklet";
+  const point = value + 0.2 * velocity;
+  const deltas = points.map((p) => Math.abs(point - p));
+  const minDelta = Math.min.apply(null, deltas);
+  return points.filter((p) => Math.abs(point - p) === minDelta)[0];
+};
diff --git a/example/src/types.ts b/example/src/types.ts
index 3c328500ff..08ffe4268e 100644
--- a/example/src/types.ts
+++ b/example/src/types.ts
@@ -25,4 +25,5 @@ export type StackParamList = {
   Stickers: undefined;
   FrostedCard: undefined;
   SpeedTest: undefined;
+  Video: undefined;
 };
diff --git a/example/yarn.lock b/example/yarn.lock
index 34b6f6bf30..53dd8fcb71 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -230,6 +230,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
   integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
 
+"@babel/helper-plugin-utils@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz#a924607dd254a65695e5bd209b98b902b3b2f11a"
+  integrity sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==
+
 "@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
@@ -669,7 +674,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.18.6", "@babel/plugin-transform-arrow-functions@^7.24.1":
+"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.0.0-0", "@babel/plugin-transform-arrow-functions@^7.18.6", "@babel/plugin-transform-arrow-functions@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27"
   integrity sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==
@@ -899,7 +904,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
+"@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
   integrity sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==
@@ -915,13 +920,6 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-assign@^7.16.7":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.24.1.tgz#46a70169e56970aafd13a6ae677d5b497fc227e7"
-  integrity sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
 "@babel/plugin-transform-object-rest-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz#5a3ce73caf0e7871a02e1c31e8b473093af241ff"
@@ -948,6 +946,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-transform-optional-chaining@^7.0.0-0":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.5.tgz#a6334bebd7f9dd3df37447880d0bd64b778e600f"
+  integrity sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-transform-optional-chaining@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6"
@@ -1070,7 +1077,7 @@
     babel-plugin-polyfill-regenerator "^0.6.1"
     semver "^6.3.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.18.6", "@babel/plugin-transform-shorthand-properties@^7.24.1":
+"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.0.0-0", "@babel/plugin-transform-shorthand-properties@^7.18.6", "@babel/plugin-transform-shorthand-properties@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55"
   integrity sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==
@@ -1092,7 +1099,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.18.9", "@babel/plugin-transform-template-literals@^7.24.1":
+"@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.0.0-0", "@babel/plugin-transform-template-literals@^7.18.9", "@babel/plugin-transform-template-literals@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7"
   integrity sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==
@@ -9177,12 +9184,16 @@ react-native-gradle-plugin@^0.71.17:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232"
   integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
 
-react-native-reanimated@3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356"
-  integrity sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==
+react-native-reanimated@3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.11.0.tgz#d4265d4e0232623f5958ed60e1686ca884fc3452"
+  integrity sha512-BNw/XDgUfs8UhfY1X6IniU8kWpnotWGyt8qmQviaHisTi5lvwnaOdXQKfN1KGONx6ekdFRHRP5EFwLi0UajwKA==
   dependencies:
-    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0-0"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0"
+    "@babel/plugin-transform-optional-chaining" "^7.0.0-0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0-0"
+    "@babel/plugin-transform-template-literals" "^7.0.0-0"
     "@babel/preset-typescript" "^7.16.7"
     convert-source-map "^2.0.0"
     invariant "^2.2.4"
diff --git a/fabricexample/android/build.gradle b/fabricexample/android/build.gradle
index 34ea718194..85697575aa 100644
--- a/fabricexample/android/build.gradle
+++ b/fabricexample/android/build.gradle
@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = "33.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 26
         compileSdkVersion = 33
         targetSdkVersion = 33
 
diff --git a/fabricexample/jestSetup.mjs b/fabricexample/jestSetup.mjs
index 067758ab06..52726852af 100644
--- a/fabricexample/jestSetup.mjs
+++ b/fabricexample/jestSetup.mjs
@@ -10,6 +10,10 @@ JestUtils.setUpTests();
 global.__reanimatedWorkletInit = () => {};
 global.CanvasKit = await CanvasKitInit({});
 
+jest.mock("expo-asset", () => ({
+  useAssets: () => [[], undefined],
+}));
+
 jest.mock("react-native-reanimated", () => {
   // The mock for `call` immediately calls the callback which is incorrect
   // So we override it with a no-op
diff --git a/fabricexample/src/App.tsx b/fabricexample/src/App.tsx
index 4298fe44ae..4fd9c447a9 100644
--- a/fabricexample/src/App.tsx
+++ b/fabricexample/src/App.tsx
@@ -29,6 +29,7 @@ import {
   Stickers,
   FrostedCard,
   SpeedTest,
+  Video,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -61,6 +62,7 @@ const linking: LinkingOptions<StackParamList> = {
       Stickers: "stickers",
       FrostedCard: "frosted-card",
       SpeedTest: "speedtest",
+      Video: "video",
     },
   },
   prefixes: ["rnskia://"],
@@ -194,6 +196,13 @@ const App = () => {
                 header: () => null,
               }}
             />
+            <Stack.Screen
+              name="Video"
+              component={Video}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen
               name="Performance"
               component={PerformanceDrawingTest}
diff --git a/fabricexample/src/Examples/API/AnimatedImages.tsx b/fabricexample/src/Examples/API/AnimatedImages.tsx
index 3addcd0c69..1632a95442 100644
--- a/fabricexample/src/Examples/API/AnimatedImages.tsx
+++ b/fabricexample/src/Examples/API/AnimatedImages.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { ScrollView, useWindowDimensions } from "react-native";
+import { Pressable, ScrollView, useWindowDimensions } from "react-native";
 import {
   Canvas,
   Image,
   useAnimatedImageValue,
 } from "@shopify/react-native-skia";
+import { useSharedValue } from "react-native-reanimated";
 
 export const AnimatedImages = () => {
   const { width: wWidth } = useWindowDimensions();
@@ -12,8 +13,10 @@ export const AnimatedImages = () => {
   const S2 = 60;
   const PAD = (SIZE - S2) / 2;
 
+  const pause = useSharedValue(false);
   const example1 = useAnimatedImageValue(
-    require("../../assets/birdFlying.gif")
+    require("../../assets/birdFlying.gif"),
+    pause
   );
   const example2 = useAnimatedImageValue(
     require("../../assets/birdFlying2.gif")
@@ -21,43 +24,45 @@ export const AnimatedImages = () => {
 
   return (
     <ScrollView>
-      <Canvas
-        style={{
-          alignSelf: "center",
-          width: 320,
-          height: 180,
-          marginVertical: PAD,
-        }}
-      >
-        <Image
-          image={example1}
-          x={0}
-          y={0}
-          width={320}
-          height={180}
-          fit="contain"
-        />
-      </Canvas>
-      <Canvas
-        style={{
-          alignSelf: "center",
-          width: 320,
-          height: 180,
-          borderColor: "#aaaaaa",
-          borderWidth: 1,
-          borderStyle: "solid",
-          marginVertical: PAD,
-        }}
-      >
-        <Image
-          image={example2}
-          x={0}
-          y={0}
-          width={320}
-          height={180}
-          fit="contain"
-        />
-      </Canvas>
+      <Pressable onPress={() => (pause.value = !pause.value)}>
+        <Canvas
+          style={{
+            alignSelf: "center",
+            width: 320,
+            height: 180,
+            marginVertical: PAD,
+          }}
+        >
+          <Image
+            image={example1}
+            x={0}
+            y={0}
+            width={320}
+            height={180}
+            fit="contain"
+          />
+        </Canvas>
+        <Canvas
+          style={{
+            alignSelf: "center",
+            width: 320,
+            height: 180,
+            borderColor: "#aaaaaa",
+            borderWidth: 1,
+            borderStyle: "solid",
+            marginVertical: PAD,
+          }}
+        >
+          <Image
+            image={example2}
+            x={0}
+            y={0}
+            width={320}
+            height={180}
+            fit="contain"
+          />
+        </Canvas>
+      </Pressable>
     </ScrollView>
   );
 };
diff --git a/fabricexample/src/Examples/API/Snapshot.tsx b/fabricexample/src/Examples/API/Snapshot.tsx
index 3289a10227..17b242f9c1 100644
--- a/fabricexample/src/Examples/API/Snapshot.tsx
+++ b/fabricexample/src/Examples/API/Snapshot.tsx
@@ -54,7 +54,7 @@ export const Snapshot = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <View ref={viewRef} style={styles.view} collapsable={false}>
+      <View ref={viewRef} style={styles.view}>
         <Component />
       </View>
       <Button title="Take snapshot" onPress={takeSnapshot} />
diff --git a/fabricexample/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx b/fabricexample/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
index 39557d3d97..fd417036ce 100644
--- a/fabricexample/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
+++ b/fabricexample/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
@@ -20,7 +20,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { GestureDetector } from "react-native-gesture-handler";
 
-import { getSeed, perlin } from "../../../components/Animations";
+import { createNoise2D } from "../../../components/SimpleNoise";
 
 import { symmetric } from "./Math";
 import { Cubic } from "./Cubic";
@@ -140,34 +140,32 @@ export const CoonsPatchMeshGradient = ({
       })
     )
     .flat();
-  const seeds = defaultMesh.map(() => [getSeed(), getSeed(), getSeed()]);
+  const noises = defaultMesh.map(() => [
+    createNoise2D(),
+    createNoise2D(),
+    createNoise2D(),
+  ]);
   const meshNoise = useDerivedValue(() => {
     return defaultMesh.map((pt, i) => {
       if (isEdge(pt.pos, window)) {
         return pt;
       }
-      const [noisePos, noiseC1, noiseC2] = seeds[i];
+      const [noisePos, noiseC1, noiseC2] = noises[i];
       return {
         pos: add(
           pt.pos,
           vec(
-            A * perlin(noisePos, clock.value / F, 0),
-            A * perlin(noisePos, 0, clock.value / F)
+            A * noisePos(clock.value / F, 0),
+            A * noisePos(0, clock.value / F)
           )
         ),
         c1: add(
           pt.c1,
-          vec(
-            A * perlin(noiseC1, clock.value / F, 0),
-            A * perlin(noiseC1, 0, clock.value / F)
-          )
+          vec(A * noiseC1(clock.value / F, 0), A * noiseC1(0, clock.value / F))
         ),
         c2: add(
           pt.c1,
-          vec(
-            A * perlin(noiseC2, clock.value / F, 0),
-            A * perlin(noiseC2, 0, clock.value / F)
-          )
+          vec(A * noiseC2(clock.value / F, 0), A * noiseC2(0, clock.value / F))
         ),
       };
     });
diff --git a/fabricexample/src/Examples/FrostedCard/FrostedCard.tsx b/fabricexample/src/Examples/FrostedCard/FrostedCard.tsx
index a2e5e55c6e..0ee1c33a47 100644
--- a/fabricexample/src/Examples/FrostedCard/FrostedCard.tsx
+++ b/fabricexample/src/Examples/FrostedCard/FrostedCard.tsx
@@ -29,6 +29,8 @@ const rct = Skia.XYWHRect(
   CARD_HEIGHT
 );
 const rrct = Skia.RRectXY(rct, 10, 10);
+const roundedRectPath = Skia.Path.Make();
+roundedRectPath.addRRect(rrct);
 
 const sf = 300;
 const springConfig = (velocity: number) => {
@@ -71,9 +73,8 @@ export const FrostedCard = () => {
 
   const clip = usePathValue((path) => {
     "worklet";
-    path.addRRect(rrct);
     path.transform(matrix.value);
-  });
+  }, roundedRectPath);
 
   return (
     <View style={{ flex: 1 }}>
diff --git a/fabricexample/src/Examples/Severance/Symbol.tsx b/fabricexample/src/Examples/Severance/Symbol.tsx
index 9238ae4943..285a14d21c 100644
--- a/fabricexample/src/Examples/Severance/Symbol.tsx
+++ b/fabricexample/src/Examples/Severance/Symbol.tsx
@@ -11,7 +11,7 @@ import { useWindowDimensions } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
-import { getSeed, perlin } from "../../components/Animations";
+import { createNoise2D } from "../../components/SimpleNoise";
 
 import { FG } from "./Theme";
 
@@ -35,7 +35,7 @@ export const Symbol = ({ i, j, font, pointer, clock }: SymbolProps) => {
   const SIZE = { width: width / COLS, height: height / ROWS };
   const x = i * SIZE.width;
   const y = j * SIZE.height;
-  const noise = getSeed();
+  const noise = createNoise2D();
   const text = DIGITS[Math.round(Math.random() * 9)];
   const [symbolWidth] = font.getGlyphWidths(font.getGlyphIDs(text));
   const origin = vec(x + SIZE.width / 2, y + SIZE.height / 2);
@@ -51,11 +51,11 @@ export const Symbol = ({ i, j, font, pointer, clock }: SymbolProps) => {
     [pointer]
   );
   const dx = useDerivedValue(() => {
-    const d = A * perlin(noise, x, clock.value * F);
+    const d = A * noise(x, clock.value * F);
     return origin.x - symbolWidth / 2 + d;
   }, [clock]);
   const dy = useDerivedValue(() => {
-    const d = A * perlin(noise, y, clock.value * F);
+    const d = A * noise(y, clock.value * F);
     return origin.y + font.getSize() / 2 + d;
   }, [clock]);
   return (
diff --git a/fabricexample/src/Examples/Vertices/Vertices.tsx b/fabricexample/src/Examples/Vertices/Vertices.tsx
index 5ac91b7a5f..411257c032 100644
--- a/fabricexample/src/Examples/Vertices/Vertices.tsx
+++ b/fabricexample/src/Examples/Vertices/Vertices.tsx
@@ -11,7 +11,7 @@ import {
 } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 
-import { getSeed, perlin } from "../../components/Animations";
+import { createNoise2D } from "../../components/SimpleNoise";
 
 const N = 3;
 const n = new Array(N + 1).fill(0).map((_, i) => i);
@@ -48,7 +48,10 @@ export const Demo = () => {
   );
 
   const clock = useClock();
-  const seeds = new Array(defaultVertices.length).fill(0).map(() => getSeed());
+  const noises = useMemo(
+    () => defaultVertices.map(() => createNoise2D()),
+    [defaultVertices]
+  );
 
   const vertices = useDerivedValue(
     () =>
@@ -56,9 +59,10 @@ export const Demo = () => {
         if (isEdge(vertex, window)) {
           return vertex;
         }
+        const noise2d = noises[i];
         return {
-          x: vertex.x + AX * perlin(seeds[i], clock.value / F, 0),
-          y: vertex.y + AY * perlin(seeds[i], 0, clock.value / F),
+          x: vertex.x + AX * noise2d(clock.value / F, 0),
+          y: vertex.y + AY * noise2d(0, clock.value / F),
         };
       }),
     [clock]
diff --git a/fabricexample/src/Examples/Video/Video.tsx b/fabricexample/src/Examples/Video/Video.tsx
new file mode 100644
index 0000000000..de90d4d993
--- /dev/null
+++ b/fabricexample/src/Examples/Video/Video.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import {
+  Canvas,
+  ColorMatrix,
+  Fill,
+  ImageShader,
+} from "@shopify/react-native-skia";
+import { Pressable, useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+import { useVideoFromAsset } from "../../components/Animations";
+
+export const Video = () => {
+  const paused = useSharedValue(false);
+  const { width, height } = useWindowDimensions();
+  const video = useVideoFromAsset(
+    require("../../Tests/assets/BigBuckBunny.mp4"),
+    {
+      paused,
+      looping: true,
+    }
+  );
+  return (
+    <Pressable
+      style={{ flex: 1 }}
+      onPress={() => (paused.value = !paused.value)}
+    >
+      <Canvas style={{ flex: 1 }}>
+        <Fill>
+          <ImageShader
+            image={video}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+          <ColorMatrix
+            matrix={[
+              0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,
+              0, 0, 1, 0,
+            ]}
+          />
+        </Fill>
+      </Canvas>
+    </Pressable>
+  );
+};
diff --git a/fabricexample/src/Examples/Video/index.ts b/fabricexample/src/Examples/Video/index.ts
new file mode 100644
index 0000000000..ba5f73c1ad
--- /dev/null
+++ b/fabricexample/src/Examples/Video/index.ts
@@ -0,0 +1 @@
+export * from "./Video";
diff --git a/fabricexample/src/Examples/index.ts b/fabricexample/src/Examples/index.ts
index 9bce87b6d5..024a807cae 100644
--- a/fabricexample/src/Examples/index.ts
+++ b/fabricexample/src/Examples/index.ts
@@ -23,3 +23,4 @@ export * from "./Transitions";
 export * from "./Stickers";
 export * from "./FrostedCard";
 export * from "./SpeedTest";
+export * from "./Video";
diff --git a/fabricexample/src/Home/HomeScreen.tsx b/fabricexample/src/Home/HomeScreen.tsx
index 8a4b636cb2..a96f939d12 100644
--- a/fabricexample/src/Home/HomeScreen.tsx
+++ b/fabricexample/src/Home/HomeScreen.tsx
@@ -48,8 +48,8 @@ export const HomeScreen = () => {
         route="Aurora"
       />
       <HomeScreenButton
-        title="💯 SpeedTest"
-        description="SpeedTest network speedometer"
+        title="⭕️ Path Animation"
+        description="Path Animation"
         route="SpeedTest"
       />
       <HomeScreenButton
@@ -103,6 +103,7 @@ export const HomeScreen = () => {
         description="Drawing Performance Test"
         route="Performance"
       />
+      <HomeScreenButton title="📹 Video" description="Video" route="Video" />
       <HomeScreenButton
         title="🔧 E2E Tests"
         description="Run integration tests"
diff --git a/fabricexample/src/Tests/Screens/Snapshot2.tsx b/fabricexample/src/Tests/Screens/Snapshot2.tsx
index 850ba11af7..10d0c09db6 100644
--- a/fabricexample/src/Tests/Screens/Snapshot2.tsx
+++ b/fabricexample/src/Tests/Screens/Snapshot2.tsx
@@ -7,7 +7,6 @@ import {
   Text,
   useWindowDimensions,
   ScrollView,
-  Platform,
 } from "react-native";
 import { Canvas, RoundedRect, Image, Skia } from "@shopify/react-native-skia";
 import { Switch } from "react-native-gesture-handler";
@@ -56,9 +55,7 @@ const Component = () => {
           }}
         />
       </View>
-      <Text style={{ color: Platform.select({ android: "#757500" }) }}>
-        Hello World!
-      </Text>
+      <Text>Hello World!</Text>
       <View style={{ flexDirection: "row" }}>
         <View
           style={{
@@ -99,9 +96,7 @@ const Component = () => {
       <Canvas style={{ width: 100, height: 100 }}>
         <RoundedRect x={0} y={20} width={80} height={80} r={10} color="blue" />
       </Canvas>
-      <Text style={{ color: Platform.select({ android: "#757500" }) }}>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👆 This is a Skia Canvas!
-      </Text>
+      <Text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👆 This is a Skia Canvas!</Text>
       <Interleaving />
     </ScrollView>
   );
diff --git a/fabricexample/src/Tests/Screens/Snapshot5.tsx b/fabricexample/src/Tests/Screens/Snapshot5.tsx
index 1218a0dfa1..837d147c9c 100644
--- a/fabricexample/src/Tests/Screens/Snapshot5.tsx
+++ b/fabricexample/src/Tests/Screens/Snapshot5.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 
 export const Snapshot5 = () => {
@@ -12,12 +12,15 @@ export const Snapshot5 = () => {
 };
 
 const Component = () => {
+  const [r, setRender] = useState(0);
+  console.log({ r });
   return (
     <>
       <ScrollView
         style={styles.scrollview}
         ref={(ref) => {
           ref?.scrollTo({ y: 200 });
+          setRender((p) => p + 1);
         }}
       >
         <View style={[styles.verticalBox, { backgroundColor: "cyan" }]} />
@@ -30,6 +33,7 @@ const Component = () => {
         horizontal
         ref={(ref) => {
           ref?.scrollTo({ x: 200 });
+          setRender((p) => p + 1);
         }}
       >
         <View style={[styles.horizontalBox, { backgroundColor: "cyan" }]} />
diff --git a/fabricexample/src/Tests/Tests.tsx b/fabricexample/src/Tests/Tests.tsx
index d67bca01b6..185e1ed8d2 100644
--- a/fabricexample/src/Tests/Tests.tsx
+++ b/fabricexample/src/Tests/Tests.tsx
@@ -8,7 +8,7 @@ import {
   Skia,
 } from "@shopify/react-native-skia";
 import React, { useEffect, useRef, useState } from "react";
-import { PixelRatio, Platform, Text, View } from "react-native";
+import { PixelRatio, Text, View } from "react-native";
 
 import type { SerializedNode } from "./deserialize";
 import { parseNode, parseProps } from "./deserialize";
@@ -19,9 +19,7 @@ export const CI = process.env.CI === "true";
 const s = 3;
 const scale = s / PixelRatio.get();
 const size = 256 * scale;
-// Maximum time to draw: 250 on iOS, 500ms on Android, 1000ms on CI
-// eslint-disable-next-line no-nested-ternary
-const timeToDraw = CI ? 1500 : Platform.OS === "ios" ? 250 : 500;
+const timeToDraw = CI ? 1500 : 500;
 
 interface TestsProps {
   assets: { [key: string]: any };
@@ -116,7 +114,7 @@ export const Tests = ({ assets }: TestsProps) => {
     <View style={{ flex: 1, backgroundColor: "white" }}>
       <Text style={{ color: "black" }}>
         {client === null
-          ? `⚪️ Connecting to server: ${hostname}. Make sure to run \`yarn e2e\` or similar`
+          ? `⚪️ Connecting to ${hostname}. Use yarn e2e to run tests.`
           : "🟢 Waiting for the server to send tests"}
       </Text>
       <Canvas style={{ width: size, height: size }} ref={ref}>
diff --git a/fabricexample/src/Tests/assets/BigBuckBunny.mp4 b/fabricexample/src/Tests/assets/BigBuckBunny.mp4
new file mode 100644
index 0000000000..ed139d6d50
Binary files /dev/null and b/fabricexample/src/Tests/assets/BigBuckBunny.mp4 differ
diff --git a/fabricexample/src/Tests/deserialize.ts b/fabricexample/src/Tests/deserialize.ts
index bc050a6799..25670fcf4e 100644
--- a/fabricexample/src/Tests/deserialize.ts
+++ b/fabricexample/src/Tests/deserialize.ts
@@ -28,6 +28,7 @@ export const parseNode = (
 
 export const parseProps = (props: SerializedProps, assets: Assets) => {
   const newProps: SerializedProps = {};
+  newProps.localAssets = assets.localAssets.map((asset: string) => asset);
   Object.keys(props).forEach((key) => {
     const value = parseProp(props[key], assets);
     newProps[key] = value;
diff --git a/fabricexample/src/Tests/useAssets.ts b/fabricexample/src/Tests/useAssets.ts
index 96e95ec425..13e8038b6d 100644
--- a/fabricexample/src/Tests/useAssets.ts
+++ b/fabricexample/src/Tests/useAssets.ts
@@ -5,6 +5,7 @@ import {
 } from "@shopify/react-native-skia";
 import { useCallback, useState } from "react";
 import { Platform } from "react-native";
+import { useAssets as useExpoAssets } from "expo-asset";
 
 const SkiaLogo =
   Platform.OS === "web" ? require("./assets/skia_logo.png") : "skia_logo";
@@ -20,6 +21,9 @@ const NotoColorEmojiSrc =
     : require("./assets/NotoColorEmoji.ttf");
 
 export const useAssets = () => {
+  const [expoAssets, expoAssetsError] = useExpoAssets([
+    require("./assets/BigBuckBunny.mp4"),
+  ]);
   const [error, setError] = useState<Error | null>(null);
   const errorHandler = useCallback((e: Error) => setError(e), []);
   const mask = useImage(require("./assets/mask.png"), errorHandler);
@@ -46,7 +50,11 @@ export const useAssets = () => {
   if (error) {
     throw new Error("Failed to load assets: " + error.message);
   }
+  if (expoAssetsError) {
+    throw new Error("Failed to load expo assets: " + expoAssetsError.message);
+  }
   if (
+    !expoAssets ||
     !RobotoMedium ||
     !oslo ||
     !NotoColorEmoji ||
@@ -60,6 +68,7 @@ export const useAssets = () => {
     return null;
   }
   return {
+    localAssets: expoAssets.map((asset) => asset.localUri),
     RobotoMedium,
     NotoColorEmoji,
     NotoSansSCRegular,
diff --git a/fabricexample/src/Tests/useClient.ts b/fabricexample/src/Tests/useClient.ts
index 886a6a7af2..d9b505cd85 100644
--- a/fabricexample/src/Tests/useClient.ts
+++ b/fabricexample/src/Tests/useClient.ts
@@ -17,7 +17,7 @@ export const useClient = (): UseClient => {
     const ws = new WebSocket(url);
     ws.onopen = () => {
       setClient(ws);
-      ws.send(JSON.stringify({ OS: Platform.OS, arch: "fabric" }));
+      ws.send(JSON.stringify({ OS: Platform.OS, arch: "paper" }));
     };
     ws.onclose = () => {
       setClient(null);
diff --git a/fabricexample/src/assets/videos/bunny.mp4 b/fabricexample/src/assets/videos/bunny.mp4
new file mode 100644
index 0000000000..97cf366007
Binary files /dev/null and b/fabricexample/src/assets/videos/bunny.mp4 differ
diff --git a/fabricexample/src/components/Animations.tsx b/fabricexample/src/components/Animations.tsx
index b3241d3e5f..d5e5d7c1a7 100644
--- a/fabricexample/src/components/Animations.tsx
+++ b/fabricexample/src/components/Animations.tsx
@@ -1,4 +1,6 @@
 import type { Vector } from "@shopify/react-native-skia";
+import { useVideo } from "@shopify/react-native-skia";
+import { useAssets } from "expo-asset";
 import { useEffect } from "react";
 import {
   Easing,
@@ -8,6 +10,17 @@ import {
   withTiming,
 } from "react-native-reanimated";
 
+export const useVideoFromAsset = (
+  mod: number,
+  options?: Parameters<typeof useVideo>[1]
+) => {
+  const [assets, error] = useAssets([mod]);
+  if (error) {
+    throw error;
+  }
+  return useVideo(assets ? assets[0].localUri : null, options);
+};
+
 export const useLoop = ({ duration }: { duration: number }) => {
   const progress = useSharedValue(0);
   useEffect(() => {
@@ -30,51 +43,15 @@ export const translate = ({
   "worklet";
   return [{ translateX: x }, { translateY: y }];
 };
-const fade = (t: number) => {
-  "worklet";
-  return t * t * t * (t * (t * 6 - 15) + 10);
-};
-
-const lerp = (a: number, b: number, t: number) => {
-  "worklet";
-  return (1 - t) * a + t * b;
-};
-
-const grad = (hash: number, x: number, y: number) => {
-  "worklet";
-  const h = hash & 15;
-  //const grad = 1 + (h & 7); // Gradient value is one of 8 possible values (1, 2, ..., 8)
-  return (h & 8 ? -x : x) + (h & 4 ? -y : y);
-};
-
-// This is the "seed" for the noise. The permutation table. Randomly shuffle it for different results.
-const shuffleArray = (array: number[]) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-};
-
-export const getSeed = () => {
-  let p = [...Array(512)].map(() => Math.floor(Math.random() * 256));
-  shuffleArray(p);
-  p = p.concat(p);
-  return p;
-};
 
-export const perlin = (seed: number[], x: number, y: number) => {
+export const snapPoint = (
+  value: number,
+  velocity: number,
+  points: ReadonlyArray<number>
+): number => {
   "worklet";
-  const X = Math.floor(x) & 255;
-  const Y = Math.floor(y) & 255;
-  x -= Math.floor(x);
-  y -= Math.floor(y);
-  const u = fade(x);
-  const v = fade(y);
-  const a = seed[X] + Y;
-  const b = seed[X + 1] + Y;
-  return lerp(
-    lerp(grad(seed[a], x, y), grad(seed[b], x - 1, y), u),
-    lerp(grad(seed[a + 1], x, y - 1), grad(seed[b + 1], x - 1, y - 1), u),
-    v
-  );
+  const point = value + 0.2 * velocity;
+  const deltas = points.map((p) => Math.abs(point - p));
+  const minDelta = Math.min.apply(null, deltas);
+  return points.filter((p) => Math.abs(point - p) === minDelta)[0];
 };
diff --git a/fabricexample/src/components/SimpleNoise.tsx b/fabricexample/src/components/SimpleNoise.tsx
new file mode 100644
index 0000000000..0d0755590b
--- /dev/null
+++ b/fabricexample/src/components/SimpleNoise.tsx
@@ -0,0 +1,569 @@
+/*
+ * A fast javascript implementation of simplex noise by Jonas Wagner
+
+Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
+Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
+With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+Better rank ordering method by Stefan Gustavson in 2012.
+
+ Copyright (c) 2022 Jonas Wagner
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+
+// these #__PURE__ comments help uglifyjs with dead code removal
+//
+const F2 = /*#__PURE__*/ 0.5 * (Math.sqrt(3.0) - 1.0);
+const G2 = /*#__PURE__*/ (3.0 - Math.sqrt(3.0)) / 6.0;
+const F3 = 1.0 / 3.0;
+const G3 = 1.0 / 6.0;
+const F4 = /*#__PURE__*/ (Math.sqrt(5.0) - 1.0) / 4.0;
+const G4 = /*#__PURE__*/ (5.0 - Math.sqrt(5.0)) / 20.0;
+
+// I'm really not sure why this | 0 (basically a coercion to int)
+// is making this faster but I get ~5 million ops/sec more on the
+// benchmarks across the board or a ~10% speedup.
+const fastFloor = (x: number) => {
+  "worklet";
+  return Math.floor(x) | 0;
+};
+
+const grad2 = /*#__PURE__*/ new Float64Array([
+  1, 1, -1, 1, 1, -1,
+
+  -1, -1, 1, 0, -1, 0,
+
+  1, 0, -1, 0, 0, 1,
+
+  0, -1, 0, 1, 0, -1,
+]);
+
+// double seems to be faster than single or int's
+// probably because most operations are in double precision
+const grad3 = /*#__PURE__*/ new Float64Array([
+  1, 1, 0, -1, 1, 0, 1, -1, 0,
+
+  -1, -1, 0, 1, 0, 1, -1, 0, 1,
+
+  1, 0, -1, -1, 0, -1, 0, 1, 1,
+
+  0, -1, 1, 0, 1, -1, 0, -1, -1,
+]);
+
+// double is a bit quicker here as well
+const grad4 = /*#__PURE__*/ new Float64Array([
+  0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1,
+  0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1,
+  -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1, 0, 1, 1, 1,
+  0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1,
+  -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0,
+  -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0,
+]);
+
+/**
+ * A random() function, must return a number in the interval [0,1), just like Math.random().
+ */
+export type RandomFn = () => number;
+
+/**
+ * Samples the noise field in two dimensions
+ *
+ * Coordinates should be finite, bigger than -2^31 and smaller than 2^31.
+ * @param x
+ * @param y
+ * @returns a number in the interval [-1, 1]
+ */
+export type NoiseFunction2D = (x: number, y: number) => number;
+
+/**
+ * Creates a 2D noise function
+ * @param random the random function that will be used to build the permutation table
+ * @returns {NoiseFunction2D}
+ */
+export function createNoise2D(random: RandomFn = Math.random): NoiseFunction2D {
+  "worklet";
+  const perm = buildPermutationTable(random);
+  // precalculating this yields a little ~3% performance improvement.
+  const permGrad2x = new Float64Array(perm).map((v) => grad2[(v % 12) * 2]);
+  const permGrad2y = new Float64Array(perm).map((v) => grad2[(v % 12) * 2 + 1]);
+  return function noise2D(x: number, y: number): number {
+    "worklet";
+    // if(!isFinite(x) || !isFinite(y)) return 0;
+    let n0 = 0; // Noise contributions from the three corners
+    let n1 = 0;
+    let n2 = 0;
+    // Skew the input space to determine which simplex cell we're in
+    const s = (x + y) * F2; // Hairy factor for 2D
+    const i = fastFloor(x + s);
+    const j = fastFloor(y + s);
+    const t = (i + j) * G2;
+    const X0 = i - t; // Unskew the cell origin back to (x,y) space
+    const Y0 = j - t;
+    const x0 = x - X0; // The x,y distances from the cell origin
+    const y0 = y - Y0;
+    // For the 2D case, the simplex shape is an equilateral triangle.
+    // Determine which simplex we are in.
+    let i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+    if (x0 > y0) {
+      i1 = 1;
+      j1 = 0;
+    } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+    else {
+      i1 = 0;
+      j1 = 1;
+    } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+    // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+    // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+    // c = (3-sqrt(3))/6
+    const x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+    const y1 = y0 - j1 + G2;
+    const x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+    const y2 = y0 - 1.0 + 2.0 * G2;
+    // Work out the hashed gradient indices of the three simplex corners
+    const ii = i & 255;
+    const jj = j & 255;
+    // Calculate the contribution from the three corners
+    let t0 = 0.5 - x0 * x0 - y0 * y0;
+    if (t0 >= 0) {
+      const gi0 = ii + perm[jj];
+      const g0x = permGrad2x[gi0];
+      const g0y = permGrad2y[gi0];
+      t0 *= t0;
+      // n0 = t0 * t0 * (grad2[gi0] * x0 + grad2[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
+      n0 = t0 * t0 * (g0x * x0 + g0y * y0);
+    }
+    let t1 = 0.5 - x1 * x1 - y1 * y1;
+    if (t1 >= 0) {
+      const gi1 = ii + i1 + perm[jj + j1];
+      const g1x = permGrad2x[gi1];
+      const g1y = permGrad2y[gi1];
+      t1 *= t1;
+      // n1 = t1 * t1 * (grad2[gi1] * x1 + grad2[gi1 + 1] * y1);
+      n1 = t1 * t1 * (g1x * x1 + g1y * y1);
+    }
+    let t2 = 0.5 - x2 * x2 - y2 * y2;
+    if (t2 >= 0) {
+      const gi2 = ii + 1 + perm[jj + 1];
+      const g2x = permGrad2x[gi2];
+      const g2y = permGrad2y[gi2];
+      t2 *= t2;
+      // n2 = t2 * t2 * (grad2[gi2] * x2 + grad2[gi2 + 1] * y2);
+      n2 = t2 * t2 * (g2x * x2 + g2y * y2);
+    }
+    // Add contributions from each corner to get the final noise value.
+    // The result is scaled to return values in the interval [-1,1].
+    return 70.0 * (n0 + n1 + n2);
+  };
+}
+
+/**
+ * Samples the noise field in three dimensions
+ *
+ * Coordinates should be finite, bigger than -2^31 and smaller than 2^31.
+ * @param x
+ * @param y
+ * @param z
+ * @returns a number in the interval [-1, 1]
+ */
+export type NoiseFunction3D = (x: number, y: number, z: number) => number;
+
+/**
+ * Creates a 3D noise function
+ * @param random the random function that will be used to build the permutation table
+ * @returns {NoiseFunction3D}
+ */
+export function createNoise3D(random: RandomFn = Math.random): NoiseFunction3D {
+  "worklet";
+  const perm = buildPermutationTable(random);
+  // precalculating these seems to yield a speedup of over 15%
+  const permGrad3x = new Float64Array(perm).map((v) => grad3[(v % 12) * 3]);
+  const permGrad3y = new Float64Array(perm).map((v) => grad3[(v % 12) * 3 + 1]);
+  const permGrad3z = new Float64Array(perm).map((v) => grad3[(v % 12) * 3 + 2]);
+  return function noise3D(x: number, y: number, z: number): number {
+    "worklet";
+    let n0, n1, n2, n3; // Noise contributions from the four corners
+    // Skew the input space to determine which simplex cell we're in
+    const s = (x + y + z) * F3; // Very nice and simple skew factor for 3D
+    const i = fastFloor(x + s);
+    const j = fastFloor(y + s);
+    const k = fastFloor(z + s);
+    const t = (i + j + k) * G3;
+    const X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+    const Y0 = j - t;
+    const Z0 = k - t;
+    const x0 = x - X0; // The x,y,z distances from the cell origin
+    const y0 = y - Y0;
+    const z0 = z - Z0;
+    // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+    // Determine which simplex we are in.
+    let i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+    let i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+    if (x0 >= y0) {
+      if (y0 >= z0) {
+        i1 = 1;
+        j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
+      } // X Y Z order
+      else if (x0 >= z0) {
+        i1 = 1;
+        j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
+      } // X Z Y order
+      else {
+        i1 = 0;
+        j1 = 0;
+        k1 = 1;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
+      } // Z X Y order
+    } else {
+      // x0<y0
+      if (y0 < z0) {
+        i1 = 0;
+        j1 = 0;
+        k1 = 1;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
+      } // Z Y X order
+      else if (x0 < z0) {
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
+      } // Y Z X order
+      else {
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
+      } // Y X Z order
+    }
+    // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+    // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+    // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+    // c = 1/6.
+    const x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+    const y1 = y0 - j1 + G3;
+    const z1 = z0 - k1 + G3;
+    const x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
+    const y2 = y0 - j2 + 2.0 * G3;
+    const z2 = z0 - k2 + 2.0 * G3;
+    const x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
+    const y3 = y0 - 1.0 + 3.0 * G3;
+    const z3 = z0 - 1.0 + 3.0 * G3;
+    // Work out the hashed gradient indices of the four simplex corners
+    const ii = i & 255;
+    const jj = j & 255;
+    const kk = k & 255;
+    // Calculate the contribution from the four corners
+    let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+    if (t0 < 0) {
+      n0 = 0.0;
+    } else {
+      const gi0 = ii + perm[jj + perm[kk]];
+      t0 *= t0;
+      n0 =
+        t0 *
+        t0 *
+        (permGrad3x[gi0] * x0 + permGrad3y[gi0] * y0 + permGrad3z[gi0] * z0);
+    }
+    let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+    if (t1 < 0) {
+      n1 = 0.0;
+    } else {
+      const gi1 = ii + i1 + perm[jj + j1 + perm[kk + k1]];
+      t1 *= t1;
+      n1 =
+        t1 *
+        t1 *
+        (permGrad3x[gi1] * x1 + permGrad3y[gi1] * y1 + permGrad3z[gi1] * z1);
+    }
+    let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+    if (t2 < 0) {
+      n2 = 0.0;
+    } else {
+      const gi2 = ii + i2 + perm[jj + j2 + perm[kk + k2]];
+      t2 *= t2;
+      n2 =
+        t2 *
+        t2 *
+        (permGrad3x[gi2] * x2 + permGrad3y[gi2] * y2 + permGrad3z[gi2] * z2);
+    }
+    let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+    if (t3 < 0) {
+      n3 = 0.0;
+    } else {
+      const gi3 = ii + 1 + perm[jj + 1 + perm[kk + 1]];
+      t3 *= t3;
+      n3 =
+        t3 *
+        t3 *
+        (permGrad3x[gi3] * x3 + permGrad3y[gi3] * y3 + permGrad3z[gi3] * z3);
+    }
+    // Add contributions from each corner to get the final noise value.
+    // The result is scaled to stay just inside [-1,1]
+    return 32.0 * (n0 + n1 + n2 + n3);
+  };
+}
+
+/**
+ * Samples the noise field in four dimensions
+ *
+ * Coordinates should be finite, bigger than -2^31 and smaller than 2^31.
+ * @param x
+ * @param y
+ * @param z
+ * @param w
+ * @returns a number in the interval [-1, 1]
+ */
+export type NoiseFunction4D = (
+  x: number,
+  y: number,
+  z: number,
+  w: number
+) => number;
+
+/**
+ * Creates a 4D noise function
+ * @param random the random function that will be used to build the permutation table
+ * @returns {NoiseFunction4D}
+ */
+export function createNoise4D(random: RandomFn = Math.random): NoiseFunction4D {
+  "worklet";
+  const perm = buildPermutationTable(random);
+  // precalculating these leads to a ~10% speedup
+  const permGrad4x = new Float64Array(perm).map((v) => grad4[(v % 32) * 4]);
+  const permGrad4y = new Float64Array(perm).map((v) => grad4[(v % 32) * 4 + 1]);
+  const permGrad4z = new Float64Array(perm).map((v) => grad4[(v % 32) * 4 + 2]);
+  const permGrad4w = new Float64Array(perm).map((v) => grad4[(v % 32) * 4 + 3]);
+  return function noise4D(x: number, y: number, z: number, w: number): number {
+    "worklet";
+    let n0, n1, n2, n3, n4; // Noise contributions from the five corners
+    // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
+    const s = (x + y + z + w) * F4; // Factor for 4D skewing
+    const i = fastFloor(x + s);
+    const j = fastFloor(y + s);
+    const k = fastFloor(z + s);
+    const l = fastFloor(w + s);
+    const t = (i + j + k + l) * G4; // Factor for 4D unskewing
+    const X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
+    const Y0 = j - t;
+    const Z0 = k - t;
+    const W0 = l - t;
+    const x0 = x - X0; // The x,y,z,w distances from the cell origin
+    const y0 = y - Y0;
+    const z0 = z - Z0;
+    const w0 = w - W0;
+    // For the 4D case, the simplex is a 4D shape I won't even try to describe.
+    // To find out which of the 24 possible simplices we're in, we need to
+    // determine the magnitude ordering of x0, y0, z0 and w0.
+    // Six pair-wise comparisons are performed between each possible pair
+    // of the four coordinates, and the results are used to rank the numbers.
+    let rankx = 0;
+    let ranky = 0;
+    let rankz = 0;
+    let rankw = 0;
+    if (x0 > y0) {
+      rankx++;
+    } else {
+      ranky++;
+    }
+    if (x0 > z0) {
+      rankx++;
+    } else {
+      rankz++;
+    }
+    if (x0 > w0) {
+      rankx++;
+    } else {
+      rankw++;
+    }
+    if (y0 > z0) {
+      ranky++;
+    } else {
+      rankz++;
+    }
+    if (y0 > w0) {
+      ranky++;
+    } else {
+      rankw++;
+    }
+    if (z0 > w0) {
+      rankz++;
+    } else {
+      rankw++;
+    }
+    // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
+    // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
+    // impossible. Only the 24 indices which have non-zero entries make any sense.
+    // We use a thresholding to set the coordinates in turn from the largest magnitude.
+    // Rank 3 denotes the largest coordinate.
+    // Rank 2 denotes the second largest coordinate.
+    // Rank 1 denotes the second smallest coordinate.
+
+    // The integer offsets for the second simplex corner
+    const i1 = rankx >= 3 ? 1 : 0;
+    const j1 = ranky >= 3 ? 1 : 0;
+    const k1 = rankz >= 3 ? 1 : 0;
+    const l1 = rankw >= 3 ? 1 : 0;
+    // The integer offsets for the third simplex corner
+    const i2 = rankx >= 2 ? 1 : 0;
+    const j2 = ranky >= 2 ? 1 : 0;
+    const k2 = rankz >= 2 ? 1 : 0;
+    const l2 = rankw >= 2 ? 1 : 0;
+
+    // The integer offsets for the fourth simplex corner
+    const i3 = rankx >= 1 ? 1 : 0;
+    const j3 = ranky >= 1 ? 1 : 0;
+    const k3 = rankz >= 1 ? 1 : 0;
+    const l3 = rankw >= 1 ? 1 : 0;
+    // The fifth corner has all coordinate offsets = 1, so no need to compute that.
+    const x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
+    const y1 = y0 - j1 + G4;
+    const z1 = z0 - k1 + G4;
+    const w1 = w0 - l1 + G4;
+    const x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
+    const y2 = y0 - j2 + 2.0 * G4;
+    const z2 = z0 - k2 + 2.0 * G4;
+    const w2 = w0 - l2 + 2.0 * G4;
+    const x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
+    const y3 = y0 - j3 + 3.0 * G4;
+    const z3 = z0 - k3 + 3.0 * G4;
+    const w3 = w0 - l3 + 3.0 * G4;
+    const x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
+    const y4 = y0 - 1.0 + 4.0 * G4;
+    const z4 = z0 - 1.0 + 4.0 * G4;
+    const w4 = w0 - 1.0 + 4.0 * G4;
+    // Work out the hashed gradient indices of the five simplex corners
+    const ii = i & 255;
+    const jj = j & 255;
+    const kk = k & 255;
+    const ll = l & 255;
+    // Calculate the contribution from the five corners
+    let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+    if (t0 < 0) {
+      n0 = 0.0;
+    } else {
+      const gi0 = ii + perm[jj + perm[kk + perm[ll]]];
+      t0 *= t0;
+      n0 =
+        t0 *
+        t0 *
+        (permGrad4x[gi0] * x0 +
+          permGrad4y[gi0] * y0 +
+          permGrad4z[gi0] * z0 +
+          permGrad4w[gi0] * w0);
+    }
+    let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+    if (t1 < 0) {
+      n1 = 0.0;
+    } else {
+      const gi1 = ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]];
+      t1 *= t1;
+      n1 =
+        t1 *
+        t1 *
+        (permGrad4x[gi1] * x1 +
+          permGrad4y[gi1] * y1 +
+          permGrad4z[gi1] * z1 +
+          permGrad4w[gi1] * w1);
+    }
+    let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+    if (t2 < 0) {
+      n2 = 0.0;
+    } else {
+      const gi2 = ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]];
+      t2 *= t2;
+      n2 =
+        t2 *
+        t2 *
+        (permGrad4x[gi2] * x2 +
+          permGrad4y[gi2] * y2 +
+          permGrad4z[gi2] * z2 +
+          permGrad4w[gi2] * w2);
+    }
+    let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+    if (t3 < 0) {
+      n3 = 0.0;
+    } else {
+      const gi3 = ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]];
+      t3 *= t3;
+      n3 =
+        t3 *
+        t3 *
+        (permGrad4x[gi3] * x3 +
+          permGrad4y[gi3] * y3 +
+          permGrad4z[gi3] * z3 +
+          permGrad4w[gi3] * w3);
+    }
+    let t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+    if (t4 < 0) {
+      n4 = 0.0;
+    } else {
+      const gi4 = ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]];
+      t4 *= t4;
+      n4 =
+        t4 *
+        t4 *
+        (permGrad4x[gi4] * x4 +
+          permGrad4y[gi4] * y4 +
+          permGrad4z[gi4] * z4 +
+          permGrad4w[gi4] * w4);
+    }
+    // Sum up and scale the result to cover the range [-1,1]
+    return 27.0 * (n0 + n1 + n2 + n3 + n4);
+  };
+}
+
+/**
+ * Builds a random permutation table.
+ * This is exported only for (internal) testing purposes.
+ * Do not rely on this export.
+ * @private
+ */
+export function buildPermutationTable(random: RandomFn): Uint8Array {
+  "worklet";
+  const tableSize = 512;
+  const p = new Uint8Array(tableSize);
+  for (let i = 0; i < tableSize / 2; i++) {
+    p[i] = i;
+  }
+  for (let i = 0; i < tableSize / 2 - 1; i++) {
+    const r = i + ~~(random() * (256 - i));
+    const aux = p[i];
+    p[i] = p[r];
+    p[r] = aux;
+  }
+  for (let i = 256; i < tableSize; i++) {
+    p[i] = p[i - 256];
+  }
+  return p;
+}
diff --git a/fabricexample/src/types.ts b/fabricexample/src/types.ts
index 3c328500ff..08ffe4268e 100644
--- a/fabricexample/src/types.ts
+++ b/fabricexample/src/types.ts
@@ -25,4 +25,5 @@ export type StackParamList = {
   Stickers: undefined;
   FrostedCard: undefined;
   SpeedTest: undefined;
+  Video: undefined;
 };
diff --git a/package/android/CMakeLists.txt b/package/android/CMakeLists.txt
index a9e2d9f054..0306aaf8a9 100644
--- a/package/android/CMakeLists.txt
+++ b/package/android/CMakeLists.txt
@@ -48,6 +48,7 @@ add_library(
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/GrAHardwareBufferUtils.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/AHardwareBufferUtils.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkAndroidVideo.cpp"
 
         "${PROJECT_SOURCE_DIR}/../cpp/jsi/JsiHostObject.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/jsi/JsiValue.cpp"
diff --git a/package/android/cpp/jni/JniPlatformContext.cpp b/package/android/cpp/jni/JniPlatformContext.cpp
index 387c72a36d..2edb19f67f 100644
--- a/package/android/cpp/jni/JniPlatformContext.cpp
+++ b/package/android/cpp/jni/JniPlatformContext.cpp
@@ -75,6 +75,29 @@ TSelf JniPlatformContext::initHybrid(jni::alias_ref<jhybridobject> jThis,
   return makeCxxInstance(jThis, pixelDensity);
 }
 
+jni::global_ref<jobject>
+JniPlatformContext::createVideo(const std::string &url) {
+  jni::ThreadScope ts; // Manages JNI thread attachment/detachment
+
+  // Get the JNI environment
+  JNIEnv *env = facebook::jni::Environment::current();
+
+  // Convert std::string to jstring
+  jstring jUrl = env->NewStringUTF(url.c_str());
+
+  // Get the method ID for the createVideo method
+  // Replace "Lcom/yourpackage/RNSkVideo;" with the actual return type
+  // descriptor
+  static auto method =
+      javaPart_->getClass()->getMethod<jobject(jstring)>("createVideo");
+
+  // Call the method and receive a local reference to the video object
+  auto videoObject = method(javaPart_.get(), jUrl);
+  // Clean up the jstring local reference
+  auto result = jni::make_global(videoObject);
+  return result;
+}
+
 sk_sp<SkImage> JniPlatformContext::takeScreenshotFromViewTag(size_t tag) {
   // Call the java method for creating a view screenshot as a bitmap:
   auto env = jni::Environment::current();
diff --git a/package/android/cpp/jni/include/JniPlatformContext.h b/package/android/cpp/jni/include/JniPlatformContext.h
index c6309f43ae..634e891d07 100644
--- a/package/android/cpp/jni/include/JniPlatformContext.h
+++ b/package/android/cpp/jni/include/JniPlatformContext.h
@@ -50,6 +50,8 @@ class JniPlatformContext : public jni::HybridClass<JniPlatformContext> {
     _onNotifyDrawLoop = callback;
   }
 
+  jni::global_ref<jobject> createVideo(const std::string &url);
+
 private:
   friend HybridBase;
   jni::global_ref<JniPlatformContext::javaobject> javaPart_;
diff --git a/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h b/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h
index eecf9dc39f..5cca655d12 100644
--- a/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h
+++ b/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h
@@ -11,6 +11,7 @@
 
 #include "AHardwareBufferUtils.h"
 #include "JniPlatformContext.h"
+#include "RNSkAndroidVideo.h"
 #include "RNSkPlatformContext.h"
 #include "SkiaOpenGLSurfaceFactory.h"
 
@@ -57,6 +58,11 @@ class RNSkAndroidPlatformContext : public RNSkPlatformContext {
     return SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(buffer);
   }
 
+  std::shared_ptr<RNSkVideo> createVideo(const std::string &url) override {
+    auto jniVideo = _jniPlatformContext->createVideo(url);
+    return std::make_shared<RNSkAndroidVideo>(jniVideo);
+  }
+
   void releaseNativeBuffer(uint64_t pointer) override {
 #if __ANDROID_API__ >= 26
     AHardwareBuffer *buffer = reinterpret_cast<AHardwareBuffer *>(pointer);
diff --git a/package/android/cpp/rnskia-android/RNSkAndroidVideo.cpp b/package/android/cpp/rnskia-android/RNSkAndroidVideo.cpp
new file mode 100644
index 0000000000..d9db7fb24b
--- /dev/null
+++ b/package/android/cpp/rnskia-android/RNSkAndroidVideo.cpp
@@ -0,0 +1,92 @@
+#include <memory>
+#include <string>
+
+#if __ANDROID_API__ >= 26
+#include <android/hardware_buffer_jni.h>
+#endif
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkImage.h"
+
+#pragma clang diagnostic pop
+
+#include "RNSkAndroidVideo.h"
+#include "SkiaOpenGLSurfaceFactory.h"
+
+namespace RNSkia {
+
+namespace jsi = facebook::jsi;
+namespace jni = facebook::jni;
+
+RNSkAndroidVideo::RNSkAndroidVideo(jni::global_ref<jobject> jniVideo)
+    : _jniVideo(jniVideo) {
+#if __ANDROID_API__ < 26
+  throw std::runtime_error("Skia Videos are only support on API 26 and above");
+#endif
+}
+
+RNSkAndroidVideo::~RNSkAndroidVideo() {}
+
+sk_sp<SkImage> RNSkAndroidVideo::nextImage(double *timeStamp) {
+#if __ANDROID_API__ >= 26
+  JNIEnv *env = facebook::jni::Environment::current();
+  // Get the Java class and method ID
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid =
+      env->GetMethodID(cls, "nextImage", "()Landroid/hardware/HardwareBuffer;");
+  if (mid == nullptr) {
+    // Method not found, handle error
+    RNSkLogger::logToConsole("nextImage method not found");
+    return nullptr;
+  }
+  // Call the Java method
+  jobject jHardwareBuffer = env->CallObjectMethod(_jniVideo.get(), mid);
+  if (jHardwareBuffer == nullptr) {
+    RNSkLogger::logToConsole("Buffer not found");
+    // Null return, handle error
+    return nullptr;
+  }
+  // Convert jobject to AHardwareBuffer
+  AHardwareBuffer *buffer =
+      AHardwareBuffer_fromHardwareBuffer(env, jHardwareBuffer);
+  return SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(buffer);
+#else
+  return nullptr;
+#endif
+}
+
+double RNSkAndroidVideo::duration() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "getDuration", "()D");
+  if (!mid) {
+    RNSkLogger::logToConsole("getDuration method not found");
+    return 0.0;
+  }
+  return env->CallDoubleMethod(_jniVideo.get(), mid);
+}
+double RNSkAndroidVideo::framerate() {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "getFrameRate", "()D");
+  if (!mid) {
+    RNSkLogger::logToConsole("getFrameRate method not found");
+    return 0.0;
+  }
+  return env->CallDoubleMethod(_jniVideo.get(), mid);
+}
+
+void RNSkAndroidVideo::seek(double timestamp) {
+  JNIEnv *env = facebook::jni::Environment::current();
+  jclass cls = env->GetObjectClass(_jniVideo.get());
+  jmethodID mid = env->GetMethodID(cls, "seek", "(J)V");
+  if (!mid) {
+    RNSkLogger::logToConsole("seek method not found");
+    return;
+  }
+  env->CallVoidMethod(_jniVideo.get(), mid, static_cast<jlong>(timestamp));
+}
+
+} // namespace RNSkia
diff --git a/package/android/cpp/rnskia-android/RNSkAndroidVideo.h b/package/android/cpp/rnskia-android/RNSkAndroidVideo.h
new file mode 100644
index 0000000000..3af9420b47
--- /dev/null
+++ b/package/android/cpp/rnskia-android/RNSkAndroidVideo.h
@@ -0,0 +1,36 @@
+#pragma once
+
+#include <string>
+
+#include <fbjni/fbjni.h>
+#include <jni.h>
+#include <jsi/jsi.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkImage.h"
+
+#pragma clang diagnostic pop
+
+#include "RNSkVideo.h"
+
+namespace RNSkia {
+
+namespace jsi = facebook::jsi;
+namespace jni = facebook::jni;
+
+class RNSkAndroidVideo : public RNSkVideo {
+private:
+  jni::global_ref<jobject> _jniVideo;
+
+public:
+  explicit RNSkAndroidVideo(jni::global_ref<jobject> jniVideo);
+  ~RNSkAndroidVideo();
+  sk_sp<SkImage> nextImage(double *timeStamp = nullptr) override;
+  double duration() override;
+  double framerate() override;
+  void seek(double timestamp) override;
+};
+
+} // namespace RNSkia
diff --git a/package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp b/package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp
index 32af3f4573..04f73084a2 100644
--- a/package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp
+++ b/package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp
@@ -37,7 +37,6 @@ SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(void *buffer,
   // TODO: find out if we can detect, which graphic buffers support
   // GR_GL_TEXTURE_2D
   case AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM:
-  case AHARDWAREBUFFER_FORMAT_R8G8B8X8_UNORM:
     format = GrBackendFormats::MakeGL(GR_GL_RGBA8, GR_GL_TEXTURE_EXTERNAL);
   case AHARDWAREBUFFER_FORMAT_R16G16B16A16_FLOAT:
     format = GrBackendFormats::MakeGL(GR_GL_RGBA16F, GR_GL_TEXTURE_EXTERNAL);
@@ -65,8 +64,9 @@ SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(void *buffer,
       description.height, &deleteImageProc, &updateImageProc, &deleteImageCtx,
       false, format, false);
   if (!backendTex.isValid()) [[unlikely]] {
-    throw std::runtime_error(
+    RNSkLogger::logToConsole(
         "Failed to convert HardwareBuffer to OpenGL Texture!");
+    return nullptr;
   }
   sk_sp<SkImage> image = SkImages::BorrowTextureFrom(
       ThreadContextHolder::ThreadSkiaOpenGLContext.directContext.get(),
diff --git a/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java b/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java
index 6d62047a21..0dfdfd13d6 100644
--- a/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java
+++ b/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java
@@ -38,6 +38,11 @@ public PlatformContext(ReactContext reactContext) {
         mHybridData = initHybrid(reactContext.getResources().getDisplayMetrics().density);
     }
 
+    @DoNotStrip
+    public Object createVideo(String url) {
+        return new RNSkVideo(mContext, url);
+    }
+
     private byte[] getStreamAsBytes(InputStream is) throws IOException {
         ByteArrayOutputStream buffer = new ByteArrayOutputStream();
         int nRead;
diff --git a/package/android/src/main/java/com/shopify/reactnative/skia/RNSkVideo.java b/package/android/src/main/java/com/shopify/reactnative/skia/RNSkVideo.java
new file mode 100644
index 0000000000..260e6a55f9
--- /dev/null
+++ b/package/android/src/main/java/com/shopify/reactnative/skia/RNSkVideo.java
@@ -0,0 +1,185 @@
+package com.shopify.reactnative.skia;
+
+import android.content.Context;
+import android.graphics.ImageFormat;
+import android.hardware.HardwareBuffer;
+import android.media.Image;
+import android.media.ImageReader;
+import android.media.MediaCodec;
+import android.media.MediaExtractor;
+import android.media.MediaFormat;
+import android.net.Uri;
+import android.os.Build;
+import android.view.Surface;
+
+import androidx.annotation.RequiresApi;
+
+import com.facebook.jni.annotations.DoNotStrip;
+
+import java.io.IOException;
+import java.nio.ByteBuffer;
+
+public class RNSkVideo {
+    private final Uri uri;
+    private final Context context;
+
+    private MediaExtractor extractor;
+    private MediaCodec decoder;
+    private ImageReader imageReader;
+    private Surface outputSurface;
+    private double durationMs;
+    private double frameRate;
+
+    RNSkVideo(Context context, String localUri) {
+        this.uri = Uri.parse(localUri);
+        this.context = context;
+        this.initializeReader();
+    }
+
+    private void initializeReader() {
+        extractor = new MediaExtractor();
+        try {
+            extractor.setDataSource(context, this.uri, null);
+            int trackIndex = selectVideoTrack(extractor);
+            if (trackIndex < 0) {
+                throw new RuntimeException("No video track found in " + this.uri);
+            }
+            extractor.selectTrack(trackIndex);
+            MediaFormat format = extractor.getTrackFormat(trackIndex);
+            // Retrieve and store video properties
+            if (format.containsKey(MediaFormat.KEY_DURATION)) {
+                durationMs = format.getLong(MediaFormat.KEY_DURATION) / 1000;  // Convert microseconds to milliseconds
+            }
+            if (format.containsKey(MediaFormat.KEY_FRAME_RATE)) {
+                frameRate = format.getInteger(MediaFormat.KEY_FRAME_RATE);
+            }
+            int width = format.getInteger(MediaFormat.KEY_WIDTH);
+            int height = format.getInteger(MediaFormat.KEY_HEIGHT);
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                imageReader = ImageReader.newInstance(
+                        width,
+                        height,
+                        ImageFormat.PRIVATE,
+                        2,
+                        HardwareBuffer.USAGE_GPU_SAMPLED_IMAGE
+                );
+            } else {
+                imageReader = ImageReader.newInstance(width, height,
+                        ImageFormat.PRIVATE, 2);
+            }
+            outputSurface = imageReader.getSurface();
+
+            // Create a decoder for the format
+            String mime = format.getString(MediaFormat.KEY_MIME);
+            decoder = MediaCodec.createDecoderByType(mime);
+
+            // Note: Use an output Surface for rendering if necessary, otherwise handle buffers
+            decoder.configure(format, outputSurface, null, 0);
+            decoder.start();
+        } catch (IOException e) {
+            throw new RuntimeException("Failed to initialize extractor or decoder", e);
+        }
+    }
+
+    @DoNotStrip
+    public double getDuration() {
+        return durationMs;
+    }
+
+    @DoNotStrip
+
+    public double getFrameRate() {
+        return frameRate;
+    }
+
+    @DoNotStrip
+    public HardwareBuffer nextImage() {
+        if (!decoderOutputAvailable()) {
+            decodeFrame();
+        }
+
+        Image image = imageReader.acquireLatestImage();
+        if (image != null) {
+            HardwareBuffer hardwareBuffer = image.getHardwareBuffer();
+            image.close();  // Make sure to close the Image to free up the buffer
+            return hardwareBuffer;
+        }
+        return null;
+    }
+
+    @DoNotStrip
+    public void seek(long timestamp) {
+        // Seek to the closest sync frame at or before the specified time
+        extractor.seekTo(timestamp * 1000, MediaExtractor.SEEK_TO_PREVIOUS_SYNC);
+        // Flush the codec to reset internal state and buffers
+        if (decoder != null) {
+            decoder.flush();
+        }
+    }
+
+    private int selectVideoTrack(MediaExtractor extractor) {
+        int numTracks = extractor.getTrackCount();
+        for (int i = 0; i < numTracks; i++) {
+            MediaFormat format = extractor.getTrackFormat(i);
+            String mime = format.getString(MediaFormat.KEY_MIME);
+            if (mime.startsWith("video/")) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    private boolean decoderOutputAvailable() {
+        MediaCodec.BufferInfo info = new MediaCodec.BufferInfo();
+        int outputBufferId = decoder.dequeueOutputBuffer(info, 0);
+        if (outputBufferId >= 0) {
+            // If a buffer is available, release it immediately back since we are just checking
+            decoder.releaseOutputBuffer(outputBufferId, true);
+            return true;
+        }
+        return false;
+    }
+
+    private void decodeFrame() {
+        MediaCodec.BufferInfo info = new MediaCodec.BufferInfo();
+        long timeoutUs = 10000;
+        boolean isEOS = false;
+
+        int inputBufferId = decoder.dequeueInputBuffer(timeoutUs);
+        if (inputBufferId >= 0) {
+            ByteBuffer inputBuffer = decoder.getInputBuffer(inputBufferId);
+            int sampleSize = extractor.readSampleData(inputBuffer, 0);
+            if (sampleSize < 0) {
+                // End of stream, make sure to send this information to the decoder
+                decoder.queueInputBuffer(inputBufferId, 0, 0, 0L, MediaCodec.BUFFER_FLAG_END_OF_STREAM);
+                isEOS = true;
+            } else {
+                long presentationTimeUs = extractor.getSampleTime();
+                decoder.queueInputBuffer(inputBufferId, 0, sampleSize, presentationTimeUs, 0);
+                extractor.advance();
+            }
+        }
+
+        int outputBufferId = decoder.dequeueOutputBuffer(info, timeoutUs);
+        if (outputBufferId >= 0) {
+            // If we have a valid buffer, release it to make it available to the ImageReader's surface
+            decoder.releaseOutputBuffer(outputBufferId, true);
+
+            if ((info.flags & MediaCodec.BUFFER_FLAG_END_OF_STREAM) != 0) {
+                isEOS = true;
+            }
+        }
+    }
+
+    public void release() {
+        if (decoder != null) {
+            decoder.stop();
+            decoder.release();
+            decoder = null;
+        }
+        if (extractor != null) {
+            extractor.release();
+            extractor = null;
+        }
+    }
+}
diff --git a/package/cpp/api/JsiSkApi.h b/package/cpp/api/JsiSkApi.h
index e966b8943f..59fe16cc34 100644
--- a/package/cpp/api/JsiSkApi.h
+++ b/package/cpp/api/JsiSkApi.h
@@ -50,6 +50,7 @@
 #include "JsiSkTypefaceFactory.h"
 #include "JsiSkTypefaceFontProviderFactory.h"
 #include "JsiSkVertices.h"
+#include "JsiVideo.h"
 
 namespace RNSkia {
 
@@ -67,6 +68,7 @@ class JsiSkApi : public JsiSkHostObject {
     // We create the system font manager eagerly since it has proven to be too
     // slow to do it on demand
     JsiSkFontMgrFactory::getFontMgr(getContext());
+    installFunction("Video", JsiVideo::createCtor(context));
     installFunction("Font", JsiSkFont::createCtor(context));
     installFunction("Paint", JsiSkPaint::createCtor(context));
     installFunction("RSXform", JsiSkRSXform::createCtor(context));
diff --git a/package/cpp/api/JsiVideo.h b/package/cpp/api/JsiVideo.h
new file mode 100644
index 0000000000..7fa9d6d809
--- /dev/null
+++ b/package/cpp/api/JsiVideo.h
@@ -0,0 +1,87 @@
+#pragma once
+
+#include <memory>
+#include <numeric>
+#include <utility>
+#include <vector>
+
+#include "JsiSkHostObjects.h"
+#include "RNSkLog.h"
+#include <jsi/jsi.h>
+
+#include "JsiSkPaint.h"
+#include "JsiSkPoint.h"
+#include "JsiSkRect.h"
+#include "JsiSkTypeface.h"
+
+#include "RNSkVideo.h"
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkFont.h"
+#include "include/core/SkFontMetrics.h"
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+
+namespace jsi = facebook::jsi;
+
+class JsiVideo : public JsiSkWrappingSharedPtrHostObject<RNSkVideo> {
+public:
+  EXPORT_JSI_API_TYPENAME(JsiVideo, Video)
+
+  JSI_HOST_FUNCTION(nextImage) {
+    double timestamp = 0;
+    auto video = getObject();
+    auto image = video->nextImage(&timestamp);
+    if (!image) {
+      return jsi::Value::null();
+    }
+    return jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
+  }
+
+  JSI_HOST_FUNCTION(duration) { return getObject()->duration(); }
+
+  JSI_HOST_FUNCTION(framerate) { return getObject()->framerate(); }
+
+  JSI_HOST_FUNCTION(seek) {
+    double timestamp = arguments[0].asNumber();
+    getObject()->seek(timestamp);
+    return jsi::Value::undefined();
+  }
+
+  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiVideo, nextImage),
+                       JSI_EXPORT_FUNC(JsiVideo, duration),
+                       JSI_EXPORT_FUNC(JsiVideo, framerate),
+                       JSI_EXPORT_FUNC(JsiVideo, seek),
+                       JSI_EXPORT_FUNC(JsiVideo, dispose))
+
+  JsiVideo(std::shared_ptr<RNSkPlatformContext> context,
+           std::shared_ptr<RNSkVideo> video)
+      : JsiSkWrappingSharedPtrHostObject(std::move(context), std::move(video)) {
+  }
+
+  /**
+   * Creates the function for construction a new instance of the SkFont
+   * wrapper
+   * @param context Platform context
+   * @return A function for creating a new host object wrapper for the SkFont
+   * class
+   */
+  static const jsi::HostFunctionType
+  createCtor(std::shared_ptr<RNSkPlatformContext> context) {
+    return JSI_HOST_FUNCTION_LAMBDA {
+      auto url = arguments[0].asString(runtime).utf8(runtime);
+      auto video = context->createVideo(url);
+      // Return the newly constructed object
+      return jsi::Object::createFromHostObject(
+          runtime,
+          std::make_shared<JsiVideo>(std::move(context), std::move(video)));
+    };
+  }
+};
+
+} // namespace RNSkia
diff --git a/package/cpp/rnskia/RNSkPlatformContext.h b/package/cpp/rnskia/RNSkPlatformContext.h
index 133ac5d801..7a610693f7 100644
--- a/package/cpp/rnskia/RNSkPlatformContext.h
+++ b/package/cpp/rnskia/RNSkPlatformContext.h
@@ -10,6 +10,7 @@
 #include <utility>
 
 #include "RNSkDispatchQueue.h"
+#include "RNSkVideo.h"
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
@@ -146,6 +147,8 @@ class RNSkPlatformContext {
 
   virtual uint64_t makeNativeBuffer(sk_sp<SkImage> image) = 0;
 
+  virtual std::shared_ptr<RNSkVideo> createVideo(const std::string &url) = 0;
+
   /**
    * Return the Platform specific font manager
    */
diff --git a/package/cpp/rnskia/RNSkVideo.h b/package/cpp/rnskia/RNSkVideo.h
new file mode 100644
index 0000000000..511b561219
--- /dev/null
+++ b/package/cpp/rnskia/RNSkVideo.h
@@ -0,0 +1,23 @@
+#pragma once
+
+#include <string>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkImage.h"
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+
+class RNSkVideo {
+public:
+  virtual ~RNSkVideo() = default;
+  virtual sk_sp<SkImage> nextImage(double *timeStamp = nullptr) = 0;
+  virtual double duration() = 0;
+  virtual double framerate() = 0;
+  virtual void seek(double timestamp) = 0;
+};
+
+} // namespace RNSkia
diff --git a/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h b/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h
index b3bbc32ed6..36255c2818 100644
--- a/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h
+++ b/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h
@@ -65,6 +65,8 @@ class RNSkiOSPlatformContext : public RNSkPlatformContext {
 
   void releaseNativeBuffer(uint64_t pointer) override;
 
+  std::shared_ptr<RNSkVideo> createVideo(const std::string &url) override;
+
   virtual void performStreamOperation(
       const std::string &sourceUri,
       const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) override;
diff --git a/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm b/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm
index 1c29c4d765..88bbd4feb1 100644
--- a/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm
+++ b/package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm
@@ -5,6 +5,7 @@
 #include <thread>
 #include <utility>
 
+#include "RNSkiOSVideo.h"
 #import "SkiaCVPixelBufferUtils.h"
 #import "SkiaMetalSurfaceFactory.h"
 
@@ -143,6 +144,11 @@
   return reinterpret_cast<uint64_t>(pixelBuffer);
 }
 
+std::shared_ptr<RNSkVideo>
+RNSkiOSPlatformContext::createVideo(const std::string &url) {
+  return std::make_shared<RNSkiOSVideo>(url, this);
+}
+
 void RNSkiOSPlatformContext::raiseError(const std::exception &err) {
   RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
diff --git a/package/ios/RNSkia-iOS/RNSkiOSVideo.h b/package/ios/RNSkia-iOS/RNSkiOSVideo.h
new file mode 100644
index 0000000000..25bd450955
--- /dev/null
+++ b/package/ios/RNSkia-iOS/RNSkiOSVideo.h
@@ -0,0 +1,40 @@
+#pragma once
+
+#include <string>
+
+#include <AVFoundation/AVFoundation.h>
+#include <CoreVideo/CoreVideo.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkImage.h"
+
+#pragma clang diagnostic pop
+
+#include "RNSkPlatformContext.h"
+#include "RNSkVideo.h"
+
+namespace RNSkia {
+
+class RNSkiOSVideo : public RNSkVideo {
+private:
+  std::string _url;
+  AVAssetReader *_reader = nullptr;
+  AVAssetReaderTrackOutput *_trackOutput = nullptr;
+  RNSkPlatformContext *_context;
+  double _duration = 0;
+  double _framerate = 0;
+  void setupReader(CMTimeRange timeRange);
+  NSDictionary *getOutputSettings();
+
+public:
+  RNSkiOSVideo(std::string url, RNSkPlatformContext *context);
+  ~RNSkiOSVideo();
+  sk_sp<SkImage> nextImage(double *timeStamp = nullptr) override;
+  double duration() override;
+  double framerate() override;
+  void seek(double timestamp) override;
+};
+
+} // namespace RNSkia
diff --git a/package/ios/RNSkia-iOS/RNSkiOSVideo.mm b/package/ios/RNSkia-iOS/RNSkiOSVideo.mm
new file mode 100644
index 0000000000..3f12eb406a
--- /dev/null
+++ b/package/ios/RNSkia-iOS/RNSkiOSVideo.mm
@@ -0,0 +1,119 @@
+#pragma once
+
+#include <memory>
+#include <string>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkImage.h"
+
+#pragma clang diagnostic pop
+
+#include "RNSkiOSVideo.h"
+#include <AVFoundation/AVFoundation.h>
+#include <CoreVideo/CoreVideo.h>
+
+namespace RNSkia {
+
+RNSkiOSVideo::RNSkiOSVideo(std::string url, RNSkPlatformContext *context)
+    : _url(std::move(url)), _context(context) {
+  setupReader(CMTimeRangeMake(kCMTimeZero, kCMTimePositiveInfinity));
+}
+
+RNSkiOSVideo::~RNSkiOSVideo() {}
+
+void RNSkiOSVideo::setupReader(CMTimeRange timeRange) {
+  NSError *error = nil;
+
+  AVURLAsset *asset =
+      [AVURLAsset URLAssetWithURL:[NSURL URLWithString:@(_url.c_str())]
+                          options:nil];
+  AVAssetReader *assetReader = [[AVAssetReader alloc] initWithAsset:asset
+                                                              error:&error];
+  if (error) {
+    NSLog(@"Error initializing asset reader: %@", error.localizedDescription);
+    return;
+  }
+
+  CMTime time = [asset duration];
+  if (time.timescale == 0) {
+    NSLog(@"Error: Timescale of the asset is zero.");
+    return;
+  }
+
+  _duration = CMTimeGetSeconds(time) * 1000; // Store duration in milliseconds
+  AVAssetTrack *videoTrack =
+      [[asset tracksWithMediaType:AVMediaTypeVideo] firstObject];
+  _framerate = videoTrack.nominalFrameRate;
+
+  NSDictionary *outputSettings = getOutputSettings();
+  AVAssetReaderTrackOutput *trackOutput =
+      [[AVAssetReaderTrackOutput alloc] initWithTrack:videoTrack
+                                       outputSettings:outputSettings];
+
+  assetReader.timeRange = timeRange;
+  if ([assetReader canAddOutput:trackOutput]) {
+    [assetReader addOutput:trackOutput];
+    [assetReader startReading];
+  } else {
+    NSLog(@"Cannot add output to asset reader.");
+    return;
+  }
+
+  _reader = assetReader;
+  _trackOutput = trackOutput;
+}
+
+sk_sp<SkImage> RNSkiOSVideo::nextImage(double *timeStamp) {
+  CMSampleBufferRef sampleBuffer = [_trackOutput copyNextSampleBuffer];
+  if (!sampleBuffer) {
+    NSLog(@"No sample buffer.");
+    return nullptr;
+  }
+
+  // Extract the pixel buffer from the sample buffer
+  CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
+  if (!pixelBuffer) {
+    NSLog(@"No pixel buffer.");
+    CFRelease(sampleBuffer);
+    return nullptr;
+  }
+
+  auto skImage = _context->makeImageFromNativeBuffer(
+      reinterpret_cast<void *>(pixelBuffer));
+
+  if (timeStamp) {
+    CMTime time = CMSampleBufferGetPresentationTimeStamp(sampleBuffer);
+    *timeStamp = CMTimeGetSeconds(time);
+  }
+
+  CFRelease(sampleBuffer);
+  return skImage;
+}
+
+NSDictionary *RNSkiOSVideo::getOutputSettings() {
+  return @{
+    (id)kCVPixelBufferPixelFormatTypeKey : @(kCVPixelFormatType_32BGRA),
+    (id)kCVPixelBufferMetalCompatibilityKey : @YES
+  };
+}
+
+void RNSkiOSVideo::seek(double timeInMilliseconds) {
+  if (_reader) {
+    [_reader cancelReading];
+    _reader = nil;
+    _trackOutput = nil;
+  }
+
+  CMTime startTime =
+      CMTimeMakeWithSeconds(timeInMilliseconds / 1000.0, NSEC_PER_SEC);
+  CMTimeRange timeRange = CMTimeRangeMake(startTime, kCMTimePositiveInfinity);
+  setupReader(timeRange);
+}
+
+double RNSkiOSVideo::duration() { return _duration; }
+
+double RNSkiOSVideo::framerate() { return _framerate; }
+
+} // namespace RNSkia
diff --git a/package/ios/RNSkia-iOS/RNSkiOSView.mm b/package/ios/RNSkia-iOS/RNSkiOSView.mm
new file mode 100644
index 0000000000..adbc7241fb
--- /dev/null
+++ b/package/ios/RNSkia-iOS/RNSkiOSView.mm
@@ -0,0 +1,37 @@
+#pragma once
+
+#import <memory>
+
+#import "RNSkMetalCanvasProvider.h"
+#import "RNSkView.h"
+#import "RNSkiOSPlatformContext.h"
+
+class RNSkBaseiOSView {
+public:
+  virtual CALayer *getLayer() = 0;
+  virtual void setSize(int width, int height) = 0;
+  virtual std::shared_ptr<RNSkia::RNSkView> getDrawView() = 0;
+};
+
+template <class T> class RNSkiOSView : public RNSkBaseiOSView, public T {
+public:
+  RNSkiOSView(std::shared_ptr<RNSkia::RNSkPlatformContext> context)
+      : T(context,
+          std::make_shared<RNSkMetalCanvasProvider>(
+              std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
+
+  CALayer *getLayer() override {
+    return std::static_pointer_cast<RNSkMetalCanvasProvider>(
+               this->getCanvasProvider())
+        ->getLayer();
+  }
+
+  void setSize(int width, int height) override {
+    std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())
+        ->setSize(width, height);
+  }
+
+  std::shared_ptr<RNSkia::RNSkView> getDrawView() override {
+    return this->shared_from_this();
+  }
+};
diff --git a/package/src/external/reanimated/index.ts b/package/src/external/reanimated/index.ts
index 174c95b856..fe7bc42c3e 100644
--- a/package/src/external/reanimated/index.ts
+++ b/package/src/external/reanimated/index.ts
@@ -4,3 +4,4 @@ export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";
 export * from "./buffers";
+export * from "./useVideo";
diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
new file mode 100644
index 0000000000..de94af14e1
--- /dev/null
+++ b/package/src/external/reanimated/useVideo.ts
@@ -0,0 +1,115 @@
+import {
+  runOnUI,
+  useSharedValue,
+  type FrameInfo,
+  type SharedValue,
+} from "react-native-reanimated";
+import { useCallback, useEffect, useMemo } from "react";
+
+import { Skia } from "../../skia/Skia";
+import type { SkImage } from "../../skia/types";
+import { Platform } from "../../Platform";
+
+import Rea from "./ReanimatedProxy";
+
+type Animated<T> = SharedValue<T> | T;
+
+export interface PlaybackOptions {
+  playbackSpeed: Animated<number>;
+  looping: Animated<boolean>;
+  paused: Animated<boolean>;
+}
+
+const defaultOptions = {
+  playbackSpeed: 1,
+  looping: true,
+  paused: false,
+};
+
+const useOption = <T>(value: Animated<T>) => {
+  "worklet";
+  // TODO: only create defaultValue is needed (via makeMutable)
+  const defaultValue = useSharedValue(
+    Rea.isSharedValue(value) ? value.value : value
+  );
+  return Rea.isSharedValue(value) ? value : defaultValue;
+};
+
+export const useVideo = (
+  source: string | null,
+  userOptions?: Partial<PlaybackOptions>
+) => {
+  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);
+  const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);
+  const looping = useOption(userOptions?.looping ?? defaultOptions.looping);
+  const playbackSpeed = useOption(
+    userOptions?.playbackSpeed ?? defaultOptions.playbackSpeed
+  );
+  const currentFrame = Rea.useSharedValue<null | SkImage>(null);
+  const lastTimestamp = Rea.useSharedValue(-1);
+  const startTimestamp = Rea.useSharedValue(-1);
+
+  const framerate = useMemo(() => (video ? video.framerate() : -1), [video]);
+  const duration = useMemo(() => (video ? video.duration() : -1), [video]);
+  const frameDuration = useMemo(
+    () => (framerate > 0 ? 1000 / framerate : -1),
+    [framerate]
+  );
+  const disposeVideo = useCallback(() => {
+    "worklet";
+    video?.dispose();
+  }, [video]);
+
+  Rea.useFrameCallback((frameInfo: FrameInfo) => {
+    if (!video) {
+      return;
+    }
+    if (isPaused.value && lastTimestamp.value !== -1) {
+      return;
+    }
+    const { timestamp } = frameInfo;
+
+    // Initialize start timestamp
+    if (startTimestamp.value === -1) {
+      startTimestamp.value = timestamp;
+    }
+
+    // Calculate the current time in the video
+    const currentTimestamp = timestamp - startTimestamp.value;
+
+    // Handle looping
+    if (currentTimestamp > duration && looping.value) {
+      video.seek(0);
+      startTimestamp.value = timestamp;
+    }
+
+    // Update frame only if the elapsed time since last update is greater than the frame duration
+    const currentFrameDuration = frameDuration / playbackSpeed.value;
+    if (
+      lastTimestamp.value === -1 ||
+      timestamp - lastTimestamp.value >= currentFrameDuration
+    ) {
+      const img = video.nextImage();
+      if (img) {
+        if (currentFrame.value) {
+          currentFrame.value.dispose();
+        }
+        if (Platform.OS === "android") {
+          currentFrame.value = img.makeNonTextureImage();
+        } else {
+          currentFrame.value = img;
+        }
+      }
+      lastTimestamp.value = timestamp;
+    }
+  });
+
+  useEffect(() => {
+    return () => {
+      // TODO: should video simply be a shared value instead?
+      runOnUI(disposeVideo)();
+    };
+  }, [disposeVideo, video]);
+
+  return currentFrame;
+};
diff --git a/package/src/mock/index.ts b/package/src/mock/index.ts
index c1ee96dcfd..61d7d905bb 100644
--- a/package/src/mock/index.ts
+++ b/package/src/mock/index.ts
@@ -46,5 +46,6 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useTypeface: () => null,
     useImage: () => null,
     useSVG: () => null,
+    useVideo: () => null,
   };
 };
diff --git a/package/src/renderer/__tests__/e2e/Video.spec.tsx b/package/src/renderer/__tests__/e2e/Video.spec.tsx
new file mode 100644
index 0000000000..ea16167c86
--- /dev/null
+++ b/package/src/renderer/__tests__/e2e/Video.spec.tsx
@@ -0,0 +1,60 @@
+import { itRunsE2eOnly } from "../../../__tests__/setup";
+import { surface } from "../setup";
+
+describe("Videos", () => {
+  itRunsE2eOnly("get video duration and framerate", async () => {
+    const result = await surface.eval((Skia, ctx) => {
+      const video = Skia.Video(ctx.localAssets[0]);
+      return {
+        duration: video.duration(),
+        framerate: video.framerate(),
+      };
+    });
+    expect(result).toEqual({ duration: 5280, framerate: 25 });
+  });
+  // TODO: We need to reanable these tests once we can run them on the UI thread
+  // itRunsE2eOnly("get frame", async () => {
+  //   const { Skia } = importSkia();
+  //   const data = await surface.eval((Sk, ctx) => {
+  //     const video = Sk.Video(ctx.localAssets[0]);
+  //     const img = video.nextImage();
+  //     if (!img) {
+  //       return null;
+  //     }
+  //     return Array.from(img.encodeToBytes());
+  //   });
+  //   expect(data).not.toBeNull();
+  //   const img = Skia.Image.MakeImageFromEncoded(
+  //     Skia.Data.fromBytes(new Uint8Array(data!))
+  //   );
+  //   expect(img).not.toBeNull();
+  //   checkImage(img!, "snapshots/video/frame0.png");
+  // });
+  // itRunsE2eOnly("seek frame", async () => {
+  //   const { Skia } = importSkia();
+  //   const data = await surface.eval((Sk, ctx) => {
+  //     const video = Sk.Video(ctx.localAssets[0]);
+  //     video.seek(100);
+  //     const img = video.nextImage();
+  //     if (!img) {
+  //       return null;
+  //     }
+  //     return Array.from(img.encodeToBytes());
+  //   });
+  //   expect(data).not.toBeNull();
+  //   const img = Skia.Image.MakeImageFromEncoded(
+  //     Skia.Data.fromBytes(new Uint8Array(data!))
+  //   );
+  //   expect(img).not.toBeNull();
+  //   checkImage(img!, "snapshots/video/frame100.png");
+  // });
+  itRunsE2eOnly("seek non existing frame returns null", async () => {
+    const result = await surface.eval((Skia, ctx) => {
+      const video = Skia.Video(ctx.localAssets[0]);
+      video.seek(100000);
+      const image = video.nextImage();
+      return image === null;
+    });
+    expect(result).toBe(true);
+  });
+});
diff --git a/package/src/renderer/__tests__/setup.tsx b/package/src/renderer/__tests__/setup.tsx
index 47ee5a5a85..cad715bb29 100644
--- a/package/src/renderer/__tests__/setup.tsx
+++ b/package/src/renderer/__tests__/setup.tsx
@@ -327,7 +327,7 @@ const serializeNode = (node: Node<any>): SerializedNode => {
 export type EvalContext = Record<string, any>;
 
 interface TestingSurface {
-  eval<Ctx extends EvalContext, R>(
+  eval<Ctx extends EvalContext = EvalContext, R = any>(
     fn: (Skia: Skia, ctx: Ctx) => R,
     ctx?: Ctx
   ): Promise<R>;
diff --git a/package/src/skia/types/Skia.ts b/package/src/skia/types/Skia.ts
index 0d3db77342..f0904c36e6 100644
--- a/package/src/skia/types/Skia.ts
+++ b/package/src/skia/types/Skia.ts
@@ -30,6 +30,7 @@ import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
+import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
 
 /**
@@ -95,5 +96,6 @@ export interface Skia {
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
   ParagraphBuilder: ParagraphBuilderFactory;
+  Video: (url: string) => Video;
   NativeBuffer: NativeBufferFactory;
 }
diff --git a/package/src/skia/types/Video/Video.ts b/package/src/skia/types/Video/Video.ts
new file mode 100644
index 0000000000..c798dd6eb6
--- /dev/null
+++ b/package/src/skia/types/Video/Video.ts
@@ -0,0 +1,9 @@
+import type { SkImage } from "../Image";
+import type { SkJSIInstance } from "../JsiInstance";
+
+export interface Video extends SkJSIInstance<"Video"> {
+  duration(): number;
+  framerate(): number;
+  nextImage(): SkImage | null;
+  seek(time: number): void;
+}
diff --git a/package/src/skia/types/Video/index.ts b/package/src/skia/types/Video/index.ts
new file mode 100644
index 0000000000..ba5f73c1ad
--- /dev/null
+++ b/package/src/skia/types/Video/index.ts
@@ -0,0 +1 @@
+export * from "./Video";
diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index 938f8e1e95..c6908c745f 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -127,4 +127,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
+  Video: (_localUri: string) => {
+    throw new Error("Not implemented on React Native Web");
+  },
 });