feat: React Native (Expo) support - #8
Merged
Conversation
…%→96%); add RN goals example
Owner
Author
|
🎉 This PR is included in version 1.10.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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 React Native (Expo) support to avatoon without changing web behaviour. The same
<Avatoon>component now renders on web (DOM<canvas>+HTMLAudioElement) and on React Native (@react-three/fiber/nativeviaexpo-gl+expo-av), selected automatically by areact-nativepackage export condition — consumers import from'avatoon'on both.How it works
A platform split keeps the component tree platform-agnostic:
src/platform/— renderer seam.index.ts(web) re-exportsCanvas/hooks/controls from@react-three/fiber+@react-three/drei;index.native.tsxre-exports from the/nativeentries. All components now import these from../platform.src/audio/— audio seam. AnAudioClockinterface with a web impl (HTMLAudioElement) and a native impl (expo-av: base64 WAV → temp file viaexpo-file-system,positionMillisinterpolated into a smooth per-frame clock).AvatoonModeltalks only to this interface.vite.native.config.mjsemits a separatelib/native/index.es.js, resolving.native.*first and externalizing all native peers.package.jsonexportsadds thereact-nativecondition; expo peers are optional peer deps andreact-domis now optional.src/types/native-modules.d.ts) let it typecheck without installing Expo.Examples & docs
examples/native/App.tsx— audio-synced lip-sync driven viaref.examples/native/GoalsExample.tsx— goal-based gestures (Normal / Muscle / Sleep).Tests / coverage
expoAudioClock.spec.tsunit-tests the native audio clock via manualexpo-av/expo-file-systemmocks (wired throughjest.config.js).refhandle + play button, the camera fov frame loop, and the audio/viseme-driving path.Verification
@react-three/fiber/native+expo-av; web bundle unchanged). Not yet run on a real device/simulator — an Expo device test is recommended before release.@react-three/drei/native's HDREnvironmentis more limited than web; R3F's native entry is most proven on the v8 line (React 18 / Expo 51), which the example pins.Release note
Touches
src/, so merging tomainwill publish. Suggest landing as a minor (1.10.0) — new feature, no breaking changes to the web API.