> Markdown version of [/videos/160-cross-platform-augmented-reality-development-with-react-native?t=2237](https://www.wearedevelopers.com/videos/160-cross-platform-augmented-reality-development-with-react-native?t=2237). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Cross platform Augmented Reality development with React Native

Must you learn Unity, ARKit, or ARCore to build cross-platform AR? Discover how to create interactive spatial experiences using React Native and your existing JavaScript skills.

- **Speakers:** Vladimir Novick
- **Event:** World Congress 2021
- **Published:** July 1, 2021
- **Duration:** 40:50
- **URL:** https://www.wearedevelopers.com/videos/160-cross-platform-augmented-reality-development-with-react-native

## Summary

Cross-platform augmented reality (AR) development traditionally forces teams to choose between iOS-specific ARKit, Android's ARCore, or heavyweight game engines like Unity. However, developers can leverage React Native to build foundational AR experiences using tools like the Viro React community framework. This approach allows software teams to overlay digital elements—such as interactive 3D product catalogs, tracked image markers, and spatial portals—onto the physical world without abandoning their existing JavaScript ecosystems, presenting a low-barrier entry to mobile spatial computing.

Integrating Viro React into an environment requires bypassing Expo in favor of the React Native CLI, as rendering layers require direct, low-level camera and hardware access. Once natively configured, front-end developers can compose 3D scenes using familiar declarative UI patterns, even utilizing Flexbox styling via components like ViroFlexView. Meaningful AR implementation requires understanding traditional 3D graphics concepts: positioning components using right-handed 3D coordinate systems (X, Y, Z), applying diffuse and normal map textures onto model formats like OBJ, FBX, or GLTF, and appropriately configuring ambient or directional lighting to generate realistic shadows and object grounding.

While Viro provides accessibility, its community-maintained status limits support for cutting-edge capabilities like real-time occlusion, facial meshes, and skeletal body tracking. To bridge this gap, engineers must pair Unity with AR Foundation for the heavy spatial processing. The ultimate cross-platform architectural compromise involves developing the complex computing and visual tracking scenes natively in Unity, exporting those artifacts as native iOS and Android libraries, and utilizing React Native bridges to control these high-end immersions seamlessly from a standard component-driven React interface.

**Keywords:** cross-platform augmented reality, react native ar integration, arkit and arcore, viro react framework, 3d coordinate systems, ambient and directional lighting, 3d model formats, skeleton animation rigging, ar plane detection, ar points clouds, ar foundation integrations, react native native bridging, native module embedding, virtual spatial portals, viroflexview styling, spatial computing workflows

## Chapters

1. **Introduction to the concept of augmented reality** (00:02) — Exploring the definition of augmented reality and its role in overlaying digital elements onto physical environments.
1. **The evolution and history of augmented reality tracking** (01:31) — A historical overview of augmented reality journeys from conceptual origins in 1901 to modern consumer headsets.
1. **Evaluating cross-platform AR frameworks and mobile tools** (09:24) — Comparing platform-specific constraints against cross-platform frameworks like Unity, Unreal, and Viro React.
1. **Demonstrating Viro React capabilities for interactive applications** (11:37) — Rendering interactive catalogs and immersive portal experiences using plane detection alongside object tracking markers.
1. **Setting up Viro React using React Native CLI** (15:23) — Configuring code environments and establishing right-handed coordinate systems for precise 3D geometry placement.
1. **Applying lighting and material textures to AR scenes** (21:58) — Enhancing visual realism by positioning directional lighting, ambient nodes, and custom diffuse surface textures.
1. **Integrating complex 3D assets and custom particle effects** (26:49) — Incorporating rigged model pipelines, complex skeleton animations, and dynamic particle emitters into application logic.
1. **Exploring Unity AR Foundation for advanced tracking logic** (31:17) — Addressing Viro React limitations by utilizing Unity for capabilities like face mapping and continuous depth detection.
1. **Bridging Unity AR Foundation within React Native projects** (35:00) — Embedding compiled Unity libraries into mobile platforms and orchestrating functionality via custom native bridging components.
1. **Community questions on Flutter integration and future projects** (37:17) — Addressing audience queries regarding framework maintenance forks and expanding reality implementation strategies to other mobile ecosystems.

## Related Moments

- [Introduction to building iOS augmented reality applications](https://www.wearedevelopers.com/videos/136-ar-kit-intro-placing-3d-objects-in-a-scene-and-interacting-with-them-in-real-time) (from "AR Kit intro - placing 3D objects in a scene and interacting with them in real-time")
- [Architectural pathways for cross-platform mixed reality development](https://www.wearedevelopers.com/videos/1190-apple-vision-pro-proven-development-methods-meet-the-latest-technology) (from "Apple Vision Pro: Proven Development Methods Meet the Latest Technology")
- [Inside-out tracking and introducing mobile AR frameworks](https://www.wearedevelopers.com/videos/1117-xr-demystified-separating-facts-from-fiction-in-2024) (from "XR Demystified: Separating Facts from Fiction in 2024")
- [Transitioning to React Native from web development](https://www.wearedevelopers.com/videos/274-making-the-switch-from-web-to-mobile-development) (from "Making the switch from web to mobile development")
- [Origins and architectural capabilities of the React Native framework](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Defining native applications and the history of React](https://www.wearedevelopers.com/videos/277-hands-on-react-native-from-zero-to-hero) (from "Hands-on React Native: From Zero to Hero")

## Related Articles

- [Create Videos Programmatically with React and Remotion](https://www.wearedevelopers.com/magazine/742-create-videos-programmatically-with-react-and-remotion)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Cross Platform Mobile Development Frameworks to Use in 2025](https://www.wearedevelopers.com/magazine/404-cross-platform-mobile-development-frameworks-to-use-in-2025)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)

## Related Jobs

- [Senior React Native Developer](https://www.wearedevelopers.com/jobs/ext/1518176-senior-react-native-developer) at **Almedia**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Founding Mobile Engineer (iOS)](https://www.wearedevelopers.com/jobs/ext/1648532-founding-mobile-engineer-ios) at **Almedia**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**