Add cookbook-expo-camera — SDK 54 / React 19 / RN 0.81#484
Merged
Conversation
Owner
Author
|
@copilot review |
Contributor
Here's a summary of the review: CI: Previous failures on commits Fixes applied (commit Review findings (no blockers for WIP):
CodeQL scan: 0 security alerts. |
gre
changed the title
New workspace at packages/cookbook-expo-camera/ — a real-time camera +
GL effects demo, modern equivalent of examples/expo-gl-react-camera-effects/
(legacy SDK 45 / React 17). Targets Expo SDK 54, expo-gl 16, expo-camera 17,
React 19, RN 0.81.
Verified on Android Expo Go: live camera frames running through Blur →
Contrast/Saturation/Brightness → Negative → HueRotate → Sepia → FlyEye →
ColorMatrix.
Bumps webgltexture-loader{,-dom,-expo,-expo-camera,-ndarray} from 2.0.0 to
2.1.2 across the gl-react workspaces. 2.1.x adds the SDK 54 camera fixes
upstream (CameraView duck-type, requireNativeModule bypass of expo-gl's
broken GLViewRef.createCameraTextureAsync, post-hoc WebGLTexture.id
assignment) so no inline workaround is needed in the cookbook.
webgltexture-loader-ndarray@2.1.x dropped the second `texture` arg from
drawNDArrayTexture — the function now operates on the currently-bound
texture. Adapted packages/tests/utils.js accordingly.
Adds installConfig.hoistingLimits=workspaces on cookbook-expo (SDK 53)
and cookbook-expo-camera (SDK 54) so each keeps its own metro/expo-cli
node_modules. SDK 53 needs metro-cache@0.82.x's `./src/*` exports; SDK
54 needs 0.83.x. Without this, yarn hoists one version to the project
root and breaks the other cookbook's bundle.
gre
force-pushed
the
feat/cookbook-expo-camera
branch
from
b0d52a5 to
e1e8cbe
Compare
There was a problem hiding this comment.
Pull request overview
Adds a new Expo SDK 54 “cookbook” demo app package (packages/cookbook-expo-camera/) showcasing real-time camera frames processed through a chain of gl-react shader effects, while updating workspace dependencies to use webgltexture-loader@2.1.2 and aligning tests with the updated ndarray loader API.
Changes:
- Added
packages/cookbook-expo-camera/(Expo app + GL camera component, effect components, Metro monorepo config, Expo config, and assets). - Bumped workspace packages to
webgltexture-loader*2.1.2and updated tests for thewebgltexture-loader-ndarray@2.1.xAPI. - Added
installConfig.hoistingLimits=workspacesto the existing Expo cookbook package to better isolate installs.
Reviewed changes
Copilot reviewed 25 out of 33 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Locks new Expo SDK 54 / RN 0.81 / React 19 dependencies and updates webgltexture-loader* to 2.1.2. |
| packages/tests/utils.js | Updates ndarray texture creation to match the webgltexture-loader-ndarray@2.1.x draw helper signature. |
| packages/tests/package.json | Bumps webgltexture-loader and webgltexture-loader-ndarray to 2.1.2 for tests. |
| packages/gl-react/package.json | Bumps webgltexture-loader and webgltexture-loader-ndarray to 2.1.2. |
| packages/gl-react-native/package.json | Bumps webgltexture-loader-expo to 2.1.2. |
| packages/gl-react-expo/package.json | Bumps webgltexture-loader-expo to 2.1.2. |
| packages/gl-react-dom/package.json | Bumps webgltexture-loader-dom to 2.1.2. |
| packages/cookbook-expo/package.json | Adds installConfig.hoistingLimits=workspaces for Metro-friendly dependency isolation. |
| packages/cookbook-expo-camera/package.json | New Expo app workspace package targeting Expo SDK 54 / React 19 / RN 0.81 with relevant GL + camera deps. |
| packages/cookbook-expo-camera/tsconfig.json | New strict TS config extending Expo defaults. |
| packages/cookbook-expo-camera/metro.config.js | Custom Metro config for monorepo watchFolders, singleton React resolution, and module stubbing. |
| packages/cookbook-expo-camera/index.ts | Expo entrypoint registering the root component. |
| packages/cookbook-expo-camera/App.tsx | Main UI: permission gate, GL surface, camera toggle, and effect controls. |
| packages/cookbook-expo-camera/GLCamera.tsx | GL node that sources frames from expo-camera and applies a Y-flip shader. |
| packages/cookbook-expo-camera/Field.tsx | Slider row component for controlling effect parameters. |
| packages/cookbook-expo-camera/effects/index.tsx | Effect pipeline composition (Blur → CSB → Negative → HueRotate → FlyEye → ColorMatrix). |
| packages/cookbook-expo-camera/effects/Blur.tsx | Multi-pass blur implementation using connectSize. |
| packages/cookbook-expo-camera/effects/ContrastSaturationBrightness.tsx | CSB shader node. |
| packages/cookbook-expo-camera/effects/Negative.tsx | Negative/invert shader node. |
| packages/cookbook-expo-camera/effects/HueRotate.tsx | Hue rotation shader node. |
| packages/cookbook-expo-camera/effects/FlyEye.tsx | Fly-eye distortion shader node. |
| packages/cookbook-expo-camera/effects/ColorMatrix.tsx | Color matrix shader node (used for sepia mix). |
| packages/cookbook-expo-camera/app.json | Expo app configuration (camera permissions, icons, adaptive icon config). |
| packages/cookbook-expo-camera/gl-react.d.ts | Local module declarations to satisfy TS for gl-react/gl-react-expo usage in this demo. |
| packages/cookbook-expo-camera/empty-module.js | Empty stub module used by Metro resolver. |
| packages/cookbook-expo-camera/.yarnrc.yml | Forces nodeLinker: node-modules for Metro compatibility when running yarn in this workspace. |
| packages/cookbook-expo-camera/.gitignore | Ignores Expo/Metro/native build outputs for this new app package. |
| packages/cookbook-expo-camera/assets/splash-icon.png | New splash asset. |
| packages/cookbook-expo-camera/assets/favicon.png | New favicon asset. |
| packages/cookbook-expo-camera/assets/android-icon-background.png | New adaptive icon background asset. |
| packages/cookbook-expo-camera/assets/android-icon-monochrome.png | New adaptive icon monochrome asset. |
| packages/cookbook-expo-camera/assets/android-icon-foreground.png | New adaptive icon foreground asset. |
| packages/cookbook-expo-camera/assets/icon.png | New app icon asset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+30
| const percentagePrint = (v: number) => (v * 100).toFixed(0) + "%"; | ||
| const radiantPrint = (r: number) => ((180 * r) / Math.PI).toFixed(0) + "°"; | ||
|
|
||
| // prettier-ignore | ||
| const fields = [ | ||
| { id: "blur", name: "Blur", min: 0, max: 6, step: 0.1, prettyPrint: (blur: number) => blur.toFixed(1) }, | ||
| { id: "contrast", name: "Contrast", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint }, | ||
| { id: "brightness", name: "Brightness", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint }, | ||
| { id: "saturation", name: "Saturation", min: 0, max: 10, step: 0.1, prettyPrint: percentagePrint }, | ||
| { id: "hue", name: "HueRotate", min: 0, max: 2 * Math.PI, step: 0.1, prettyPrint: radiantPrint }, |
Comment on lines
+26
to
+35
| // With watchFolders = [monorepoRoot], Metro resolves the entry "./index" | ||
| // from the monorepo root instead of this package. Redirect to our index.ts. | ||
| if ( | ||
| moduleName === "./index" && | ||
| context.originModulePath === monorepoRoot + "/." | ||
| ) { | ||
| return { | ||
| type: "sourceFile", | ||
| filePath: path.resolve(projectRoot, "index.ts"), | ||
| }; |
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new workspace package
packages/cookbook-expo-camera/— a real-time camera + GL effects demo, modern equivalent of the legacyexamples/expo-gl-react-camera-effects/(SDK 45 / React 17). Targets Expo SDK 54 / expo-gl 16 / expo-camera 17 / React 19 / RN 0.81.Verified working in Expo Go on Android: live camera frames running through Blur → Contrast → Saturation → Brightness → Negative → HueRotate → Sepia → FlyEye → ColorMatrix.
What's in the box
App.tsx,GLCamera.tsx,Field.tsx,effects/*ported from the old example.metro.config.jsconfigured for monorepo (watchFolders, singleton resolution for react/react-dom/react-native, stubs for Node-only deps unconditionally imported by gl-react:ndarray,typedarray-pool, etc.)..yarnrc.ymlwithnodeLinker: node-modules— Metro is incompatible with Yarn PnP, mirrors the workingpackages/cookbook-expo/.Workspace bumps
All workspace packages and the cookbook now consume
webgltexture-loader@2.1.0(was2.0.0/ various alphas during bring-up):gl-react,tests:webgltexture-loader,webgltexture-loader-ndarray→2.1.0gl-react-dom:webgltexture-loader-dom→2.1.0gl-react-expo,gl-react-native:webgltexture-loader-expo→2.1.0cookbook-expo-camera:webgltexture-loader{,-expo,-expo-camera}→2.1.0The SDK 54 fixes (
CameraViewduck-type +requireNativeModulebypass of expo-gl's brokenGLViewRef.createCameraTextureAsync+new WebGLTexture()then.id =assignment) all landed inwebgltexture-loader-expo-camera@2.1.0upstream — no inline workaround left in the cookbook.Test plan
yarn installat monorepo rootcd packages/cookbook-expo-camera && yarn start, scan QR with Expo Go on Android🤖 Generated with Claude Code