install and use react-native-blob-jsi-helper

apps/expo/package.json

@@ -67,13 +67,13 @@
  "expo-application": "~4.0.1",
  "expo-av": "~10.2.0",
  "expo-blur": "~11.0.0",
- "expo-community-flipper": "^44.0.0",
  "expo-camera": "^12.1.0",
+ "expo-community-flipper": "^44.0.0",
  "expo-constants": "~13.0.0",
  "expo-dev-client": "~0.8.0",
  "expo-device": "~4.1.0",
  "expo-font": "~10.0.4",
- "expo-gl": "^11.1.1",
+ "expo-gl": "~11.0.3",
  "expo-haptics": "~11.1.0",
  "expo-image-picker": "^12.0.1",
  "expo-linear-gradient": "^11.0.0",
@@ -98,9 +98,10 @@
  "react-dom": "18.0.0-rc.0",
  "react-hook-form": "^7.20.2",
  "react-native": "0.64.3",
+ "react-native-blob-jsi-helper": "^0.2.0",
  "react-native-blurhash": "1.1.5",
  "react-native-crypto": "^2.1.0",
- "react-native-flipper": "^0.127.0",
+ "react-native-flipper": "^0.128.4",
  "react-native-gesture-handler": "^2.1.1",
  "react-native-get-random-values": "^1.7.1",
  "react-native-ios-context-menu": "1.7.0",

apps/storybook-react-native/package.json

@@ -46,7 +46,7 @@
  "expo-constants": "~13.0.0",
  "expo-dev-client": "~0.8.0",
  "expo-font": "~10.0.4",
- "expo-gl": "^11.1.1",
+ "expo-gl": "~11.0.3",
  "expo-linear-gradient": "^11.0.0",
  "expo-modules-core": "~0.6.4",
  "expo-linking": "~3.0.0",

packages/design-system/model/index.tsx

@@ -4,6 +4,8 @@ import { Canvas, useFrame } from "./react-three-fiber";
 import { useGLTF } from "./use-gltf";
 import { Image } from "design-system/image";
 
+// import iphoneModelPath from "./iphone.glb";
+
 type Props = {
  url: string;
  fallbackUrl: string;
@@ -13,7 +15,7 @@ type Props = {
 
 function Model({ url }: { url: string }) {
  const { scene } = useGLTF(url);
- // useFrame(() => (scene.rotation.y += 0.01));
+ useFrame(() => (scene.rotation.y += 0.01));
 
  return <primitive object={scene} />;
 }
@@ -28,21 +30,30 @@ function Model({ url }: { url: string }) {
 // onPointerMove called when press moves onPressMove
 
 function ModelViewer({ url, fallbackUrl, blurhash, count }: Props) {
- // return (
- // <Image
- // source={{
- // uri: fallbackUrl,
- // }}
- // tw={count > 1 ? "w-[50vw] h-[50vw]" : "w-[100vw] h-[100vw]"}
- // blurhash={blurhash}
- // resizeMode="cover"
- // />
- // );
+ if (url.endsWith(".gltf")) {
+ return (
+ <Image
+ source={{
+ uri: fallbackUrl,
+ }}
+ tw={count > 1 ? "w-[50vw] h-[50vw]" : "w-[100vw] h-[100vw]"}
+ blurhash={blurhash}
+ resizeMode="cover"
+ />
+ );
+ }
+
+ console.log(url);
 
  return (
  <Canvas>
+ <color attach="background" args={[0xe2f4df]} />
+ <ambientLight />
+ <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
+ <directionalLight intensity={0.8} position={[-6, 2, 2]} />
  <Suspense fallback={null}>
  <Model url={url} />
+ {/* <Model url={iphoneModelPath} /> */}
  </Suspense>
  </Canvas>
  );

patches/react-native+0.64.3.patch

@@ -1,3 +1,29 @@
+diff --git a/node_modules/react-native/Libraries/Blob/BlobManager.js b/node_modules/react-native/Libraries/Blob/BlobManager.js
+index e125123..8c22107 100644
+--- a/node_modules/react-native/Libraries/Blob/BlobManager.js
++++ b/node_modules/react-native/Libraries/Blob/BlobManager.js
+@@ -16,6 +16,7 @@ const BlobRegistry = require('./BlobRegistry');
+ import type {BlobData, BlobOptions, BlobCollector} from './BlobTypes';
+ import NativeBlobModule from './NativeBlobModule';
+ import invariant from 'invariant';
++import { getBlobForArrayBuffer } from 'react-native-blob-jsi-helper';
+
+ /*eslint-disable no-bitwise */
+ /*eslint-disable eqeqeq */
+@@ -71,9 +72,10 @@ class BlobManager {
+ part instanceof ArrayBuffer ||
+ (global.ArrayBufferView && part instanceof global.ArrayBufferView)
+ ) {
+- throw new Error(
+- "Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported",
+- );
++ return {
++ data: getBlobForArrayBuffer(part),
++ type: 'blob',
++ }
+ }
+ if (part instanceof Blob) {
+ return {
 diff --git a/node_modules/react-native/Libraries/Blob/FileReader.js b/node_modules/react-native/Libraries/Blob/FileReader.js
 index 15a8b44..b46ef8d 100644
 --- a/node_modules/react-native/Libraries/Blob/FileReader.js

yarn.lock

@@ -10951,19 +10951,6 @@ expo-gl-cpp@~11.0.1:
  resolved "https://registry.yarnpkg.com/expo-gl-cpp/-/expo-gl-cpp-11.0.1.tgz#1d90283bb6d013847622d293c5c8071d02158a4d"
  integrity sha512-+h0OVlJVtZRPHCU8ZF/owplMo1Kn8ixKnwTHOD9cAZht1dM/q7xLJBncxy1ItbGvC3LqfT7Dm+Vet7LnI3mo+g==
 
-expo-gl-cpp@~11.1.0:
- version "11.1.0"
- resolved "https://registry.yarnpkg.com/expo-gl-cpp/-/expo-gl-cpp-11.1.0.tgz#84c8f688b7009ca8944523866fd8e16bc195889d"
- integrity sha512-tIbMex36+pn81cuPatWfLMkOcqUTiBOEQg3NJrp1XGio7xqDQga1OKk1vaYsxrGPhZHNx3Qv5iS83t4EGJ1RTw==
-
-expo-gl@^11.1.1:
- version "11.1.1"
- resolved "https://registry.yarnpkg.com/expo-gl/-/expo-gl-11.1.1.tgz#2d611f3cff7422e591274d8b91334b2973a7132b"
- integrity sha512-1bpPGmLnn6H4vs9X019zxMAlOdSqIyyWAT/yJC7f/qGzs9lTPM6STN3N+7fVMtPkXaCMyvyJL8vFJQ75+YmGpQ==
- dependencies:
- expo-gl-cpp "~11.1.0"
- invariant "^2.2.4"
-
 expo-gl@~11.0.3:
  version "11.0.3"
  resolved "https://registry.yarnpkg.com/expo-gl/-/expo-gl-11.0.3.tgz#5e0e02f1033a53d47001a2273a380a3c5149cac6"
@@ -17723,6 +17710,11 @@ react-modal@^3.11.1:
  react-lifecycles-compat "^3.0.0"
  warning "^4.0.3"
 
+react-native-blob-jsi-helper@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/react-native-blob-jsi-helper/-/react-native-blob-jsi-helper-0.2.0.tgz#064f6469f9cd2dc8a67642a475c5b72baa46ce4c"
+ integrity sha512-FBnyn+4mxtgCtZulcdkKILFlNA3dcqwJEi6bUgDDVxLh5BzIHaWDH/0eVtLJzcY/vv6oz5LpCiDhWm6vGKUqHw==
+
 [email protected]:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/react-native-blurhash/-/react-native-blurhash-1.1.5.tgz#27545afb126347059a3a9324f5c3640a94b1ec53"
@@ -17753,10 +17745,10 @@ react-native-crypto@^2.0.1, react-native-crypto@^2.1.0:
  public-encrypt "^4.0.0"
  randomfill "^1.0.3"
 
-react-native-flipper@^0.127.0:
- version "0.127.0"
- resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.127.0.tgz#4d4040c0d0a45136b9bbabdc801d3e32d385de73"
- integrity sha512-qloUyUOs9MoMVncIDDWeOxAPbomWJ3e4y0SgyCgq8joJEOXC7RvPWeEfUXp0EPyNhHGQV9a4RwzF6BWKFCR3Kg==
+react-native-flipper@^0.128.4:
+ version "0.128.4"
+ resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.128.4.tgz#c9ed83fc7220cf0c42f26253152bc274de8cec90"
+ integrity sha512-o/Hc3iPmMX6VsbDSn4sW0E3LU10e7teBg8NgmGsyXK/RBXXJcF9pLHxs5snLwXszklK3ZyZL+pQq3b8X00lb8A==
 
 react-native-gesture-handler@^2.1.1:
  version "2.1.1"