ReactVision 2.43.1 #347

doranteseduardo · 2025-06-03T03:58:42Z

🚀 React Native New Architecture Support for ReactVision (Viro)

This PR adds full support for React Native’s New Architecture to the ReactVision (Viro) library by integrating with an existing Fabric Interop Layer.

✅ Summary of Changes

Integrated support for Fabric via a custom interop layer using JSI for direct communication between JS and native code.
Maintained full compatibility with the existing native Viro implementation — no Codegen or TurboModule rewrite required.
Updated 40+ components.

🧪 Testing

Confirmed working with both Old and New Architectures, however, support for Old Architecture will be removed in a future update.
Manual testing validated correct behaviour of key components (e.g., <ViroBox>, <ViroText>).
Future improvements may include additional automated test coverage.

📘 Documentation

Existing usage and APIs remain unchanged.
Migration steps unnecessary — fully backward compatible.
Updated examples for New Architecture usage will follow.

📌 Implementation Strategy

Preserve existing native codebase — no Codegen or TurboModules required.
Use the Fabric Interop Layer as the long-term bridge between JS and native.
Ensure maintainability and forward compatibility with React Native’s evolving architecture.

📚 References

React Native: New Architecture

This PR establishes the recommended path for supporting the React Native New Architecture in ReactVision without requiring a disruptive rewrite.

Copilot

Pull Request Overview

This PR introduces full support for React Native’s New Architecture (Fabric) in ReactVision by integrating a Fabric Interop Layer and updating numerous components, native modules, and documentation.

Integrated Fabric support via a custom JSI bridge and interop layer.
Updated 40+ components and examples to support automatic architecture detection.
Revised documentation, changelogs, and example projects to reflect the new changes.

Reviewed Changes

Copilot reviewed 453 out of 453 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
fabric-interop/components/Material/ViroMaterials.ts	Added material management functions and native registration.
fabric-interop/components/Animation/ViroAnimations.ts	Provided registry and execution functions for animations.
fabric-interop/components/AR/ViroCommonProps.ts	Defined common AR props with some API inconsistencies in collision callbacks.
fabric-interop/components/AR/ViroARTrackingTargets.ts	Implemented target registration and native syncing methods.
fabric-interop/components/AR/ViroARPlaneSelector.tsx	Added AR plane selection logic with fixed plane slots.
fabric-interop/components/AR/ViroARPlane.tsx	Created an AR plane container with event listener registration.
fabric-interop/android/...	Introduced native container managers and JSI bridge implementation for Fabric.
fabric-interop/ViroFabricContainer.tsx	Developed the main Fabric container component with initialization and cleanup.
dynamic-index.ts	Enabled dynamic architecture detection to route imports correctly.
README.md, CHANGELOG.md, NEW_ARCHITECTURE_IMPLEMENTATION.md	Updated documentation to reflect Fabric support and migration details.

Comments suppressed due to low confidence (1)

fabric-interop/components/AR/ViroCommonProps.ts:77

The onCollision callback defined here takes three parameters, while a different signature (with no parameters) is declared later in ViroObjectProps. Consider unifying the collision callback API for consistent behavior.

  onCollision?: (viroTag: string, collidedPoint: Viro3DPoint, collidedNormal: Viro3DPoint) => void;

Copilot · 2025-06-03T04:08:33Z

fabric-interop/components/AR/ViroCommonProps.ts

+  highAccuracyGaze?: boolean;
+  physicsBody?: ViroPhysicsBody;
+
+  onCollision?: () => void;


This collision callback signature (with no parameters) contrasts with the earlier definition in ViroCommonProps. Unify the onCollision callback signatures to avoid potential API confusion and ensure consistency across AR components.

…S headers

….76.9+

…yer with the existing bridge

Copilot

Pull Request Overview

This PR integrates full support for React Native’s New Architecture in ReactVision by introducing a Fabric interop layer that updates or adds all ViroReact components to use native JSI bridges and the Fabric rendering system. Key changes include:

A new Fabric interop layer with over 40 updated ViroReact components.
Implementation of JSI bridge functions and native event handling through the ViroFabricContainer.
Updates to documentation and build configurations to enforce React Native New Architecture support.

Reviewed Changes

Copilot reviewed 81 out of 510 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
fabric-interop/components/ViroSpotLight.tsx	New Fabric-enabled component for adding spot lighting in 3D scenes.
fabric-interop/components/ViroSpinner.tsx	New Fabric-enabled component for displaying loading spinners in 3D space.
fabric-interop/components/ViroSphere.tsx	New Fabric-enabled component for rendering customizable 3D spheres.
fabric-interop/components/ViroSpatialSound.tsx	New Fabric-enabled component for playing spatial audio in 3D scenes.
fabric-interop/components/ViroSoundField.tsx	New Fabric-enabled component for creating ambient audio fields.
fabric-interop/components/ViroSound.tsx	New Fabric-enabled component for basic audio playback in the scene.
fabric-interop/components/ViroSkyBox.tsx	New Fabric-enabled component for creating immersive skybox environments.
fabric-interop/components/ViroSceneNavigator.tsx	New Fabric-enabled navigator for rendering and managing 3D scenes.
fabric-interop/components/ViroScene.tsx	Updated Fabric-enabled scene component that manages 3D scene lifecycle.
fabric-interop/components/ViroQuad.tsx	New Fabric-enabled component for rendering 2D quads in 3D space.
fabric-interop/components/ViroPortalScene.tsx	New Fabric-enabled component to define portal scene content.
fabric-interop/components/ViroPortal.tsx	New Fabric-enabled component for creating portal entrances in scenes.
fabric-interop/components/ViroPolyline.tsx	New Fabric-enabled component for rendering 3D polylines.
fabric-interop/components/ViroPolygon.tsx	New Fabric-enabled component for rendering 2D polygons in 3D space.
fabric-interop/components/ViroParticleEmitter.tsx	New Fabric-enabled component for creating and managing particle effects.
fabric-interop/components/ViroOrbitCamera.tsx	New Fabric-enabled component for orbital camera control.
fabric-interop/components/ViroOmniLight.tsx	New Fabric-enabled component for omnidirectional lighting support.
fabric-interop/components/ViroNode.tsx	New Fabric-enabled container component providing coordinate system for children.
fabric-interop/components/ViroMaterialVideo.tsx	New Fabric-enabled component for using video as material textures.
fabric-interop/components/ViroLightingEnvironment.tsx	New Fabric-enabled component for environment-based HDR lighting setup.
fabric-interop/components/ViroImage.tsx	New Fabric-enabled component for displaying 2D images in 3D space.
fabric-interop/components/ViroGlobal.ts	Utility for type-safe access to the global NativeViro object via JSI.
fabric-interop/components/ViroGeometry.tsx	New Fabric-enabled component for rendering custom 3D geometry.
fabric-interop/components/ViroFlexView.tsx	New Fabric-enabled component for creating flexible layouts in 3D space.
fabric-interop/components/ViroDirectionalLight.tsx	New Fabric-enabled component for directional lighting effects.
fabric-interop/components/ViroController.tsx	New Fabric-enabled component for VR controller interaction and event handling.
fabric-interop/components/ViroCamera.tsx	New Fabric-enabled component for controlling scene camera properties.
fabric-interop/components/ViroButton.tsx	New Fabric-enabled component for interactive 3D buttons with visual feedback.
fabric-interop/components/ViroBox.tsx	New Fabric-enabled component for 3D boxes with customizable dimensions and materials.
fabric-interop/components/ViroAnimatedImage.tsx	New Fabric-enabled component for displaying animated 2D images in 3D scenes.
fabric-interop/components/ViroAnimatedComponent.tsx	New Fabric-enabled wrapper for adding animations to Viro components.
fabric-interop/components/ViroAmbientLight.tsx	New Fabric-enabled component for ambient lighting in 3D scenes.
fabric-interop/components/ViroARSceneNavigator.tsx	New Fabric-enabled component for rendering AR scenes with AR session management.
fabric-interop/components/ViroARScene.tsx	New Fabric-enabled AR scene component with AR-specific event handling.
fabric-interop/components/ViroARPlaneSelector.tsx	New Fabric-enabled component providing UI for selecting detected AR planes.
fabric-interop/components/AR/ViroARPlane.tsx	Fabric-enabled container component anchoring Viro components to detected AR planes.
fabric-interop/components/AR/ViroARObjectMarker.tsx	New Fabric-enabled component for detecting and tracking real-world objects.
fabric-interop/components/AR/ViroARImageMarker.tsx	New Fabric-enabled component for detecting and tracking real-world images.
fabric-interop/components/ViroARCamera.tsx	New Fabric-enabled component for AR camera control with transform and tracking events.
fabric-interop/components/Viro3DSceneNavigator.tsx	New Fabric-enabled component providing navigation between multiple 3D scenes.
fabric-interop/components/Viro3DObject.tsx	New Fabric-enabled component for loading and displaying 3D models in various formats.
fabric-interop/components/Viro360Video.tsx	New Fabric-enabled component for displaying 360° videos in immersive scenes.
fabric-interop/components/Viro360Image.tsx	New Fabric-enabled component for displaying 360° images as panoramic environments.
fabric-interop/components/Types/ViroUtils.ts	Type definitions for Viro utility types and commonly used props.
fabric-interop/components/Types/ViroEvents.ts	Comprehensive type definitions for Viro event handling.
fabric-interop/components/Material/ViroMaterials.ts	Utility module for creating, managing, and updating Viro materials.
fabric-interop/components/Animation/ViroAnimations.ts	Utility module for registering and executing animations via JSI bridge.
fabric-interop/components/AR/ViroCommonProps.ts	Common prop type definitions for AR components.
fabric-interop/components/AR/ViroARTrackingTargets.ts	Utility for registering and managing AR tracking targets.
fabric-interop/components/AR/ViroARPlaneSelector.tsx	(See above) Component wrapping AR plane selection logic.
fabric-interop/components/AR/ViroARPlane.tsx	Fabric-enabled AR plane component anchoring children to detected surfaces.
fabric-interop/ViroFabricContainer.tsx	Main Fabric container component that initializes the Viro system via JSI and manages native events.
fabric-interop/README.md	Updated documentation detailing New Architecture requirements, setup instructions, and component support.

this was a commit pending to ship

doranteseduardo added 5 commits June 2, 2025 18:45

update: add the interop layer

2151bd5

update: integrate the build flow all together

8a54c53

update: architecture auto detection

48194d6

update: Centralise ViroGlobal for the native layer

91b3f99

update: documentation

7e87b89

doranteseduardo requested review from oliedis and Copilot June 3, 2025 04:08

Copilot AI reviewed Jun 3, 2025

View reviewed changes

doranteseduardo added 4 commits June 2, 2025 22:19

update: better error handling

4de64ba

update: expo plugin support (WIP)

6ca8c23

Update NEW_ARCHITECTURE_IMPLEMENTATION.md

92b2971

update: attributions

9152610

doranteseduardo requested a review from Copilot June 3, 2025 16:15

This comment was marked as outdated.

Sign in to view

update: interop layer documentation

1628f5e

oliedis previously approved these changes Jun 3, 2025

View reviewed changes

doranteseduardo marked this pull request as draft June 3, 2025 20:45

update: New Architecture mandatory, add missing Android files, fix iO…

17b1636

…S headers

doranteseduardo dismissed oliedis’s stale review via 17b1636 June 11, 2025 00:04

update: bix building issues, update docs, handle legacy arch

4975517

doranteseduardo requested a review from Copilot June 12, 2025 02:34

This comment was marked as outdated.

Sign in to view

doranteseduardo marked this pull request as ready for review June 12, 2025 05:19

doranteseduardo added 6 commits June 12, 2025 13:46

update: properly detect RN min version and setup JSI bindings on RN 0…

6938367

….76.9+

update: fix building issues

4678f4a

update: use event emitter to avoid issues with the bridge

756b677

update: remove package.json check to prevent bundling issues

67f6b53

update: assume min sdk version is used, fix android building issues

5126458

update: fix cmake building error

5ce68a3

doranteseduardo requested a review from Copilot June 12, 2025 22:34

doranteseduardo added 5 commits June 24, 2025 17:17

update: better implementation for the jsi bridge

b867ca2

update: new architecture first

ea94321

update: documentation

da03b98

update: fix building issues

c03fb0a

update: fix folly issue

99adfc6

doranteseduardo requested a review from Copilot June 25, 2025 00:06

This comment was marked as outdated.

Sign in to view

doranteseduardo added 4 commits June 24, 2025 18:58

update: move docs to a subfolder

ee53cf6

update: fix android building issues by merging the android interop la…

999df1e

…yer with the existing bridge

update: consolidate ios directories (to align with android)

9b41828

Update README.md

d33b7c8

doranteseduardo requested a review from Copilot June 25, 2025 02:41

Copilot AI reviewed Jun 25, 2025

View reviewed changes

doranteseduardo added 8 commits June 24, 2025 20:44

update: remove unused examples

6fe4996

Create Podfile.lock

522aac1

update: fix broken imports and force na in podspec

f8573ea

update: fix method signature

330b8d8

update: fix podspec and a broken condition

4a4771b

update: simplify fabric integration

ea50a70

Update ViroFabricSceneManager.mm

e8945dd

Update ViroFabricContainerComponentView.mm

4e33764

oliedis self-assigned this Jun 25, 2025

oliedis previously approved these changes Jun 25, 2025

View reviewed changes

update: final alignments for solving the building issues reported

74c11be

doranteseduardo dismissed oliedis’s stale review via 74c11be June 26, 2025 05:09

doranteseduardo added 3 commits June 26, 2025 00:13

update: add statistic methods, proper registration

974dab0

this was a commit pending to ship

update: deleted old docs

e89ee64

update: changelog

64bcbbe

doranteseduardo merged commit b2618a5 into main Jun 26, 2025
1 check passed

doranteseduardo deleted the na-validation-Eduardo branch June 26, 2025 06:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ReactVision 2.43.1 #347

ReactVision 2.43.1 #347

doranteseduardo commented Jun 3, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jun 3, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

ReactVision 2.43.1 #347

ReactVision 2.43.1 #347

Conversation

doranteseduardo commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 React Native New Architecture Support for ReactVision (Viro)

✅ Summary of Changes

🧪 Testing

📘 Documentation

📌 Implementation Strategy

📚 References

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

doranteseduardo commented Jun 3, 2025 •

edited

Loading