Rapid Cross-Platform AR Development with React Native

on YouTube ↗44m

" summary

Shows that Viro + React Native builds native cross‑platform AR by hooking into ARKit and ARCore with a native 3D renderer on par with SceneKit, using an API key and a testbed app for quick wireless iteration. Demonstrates concrete features: 3D models, animations, shadows, interactive dragging and clicks, image and object recognition (object detection noted as iOS‑only), portals with 360 images/videos, and a simple “money grab” game mixing React Native UI. All demos run live and behave as expected.

AI-written summary · about

" chapters (51)

1. 0:00Intro
2. 0:40What is AR
3. 3:41How does AR work
4. 5:07SceneKit
5. 5:31Unity Unreal
6. 6:32What is React
7. 7:13Supported platforms
8. 7:34Why use React Native
9. 8:16How does React Native work
10. 9:40Examples
11. 10:05AR Scene Navigator
12. 11:26State Tracking
13. 12:01Text
14. 13:01Position
15. 13:49Example
16. 15:08Create Materials
17. 15:57Lighting
18. 16:55Sphere
19. 17:29Moon
20. 18:03Moving the Moon
21. 18:30OnDrag Properties
22. 19:07OnDrag Demo
23. 19:32Spin Animation
24. 20:03Sphere Animation
25. 20:41Building 3D Objects
26. 21:41Adding a Dinosaur
27. 22:11Demo
28. 22:54Overview
29. 23:45AR Plane Selector
30. 24:25Rendering on Floor
31. 24:52Shadow
32. 26:03OnClick
33. 26:34Animation
34. 27:24Portals
35. 28:32Portal Scene
36. 29:57Adding a 360 Video
37. 30:43Triggering Virtual Content
38. 30:56Airship Coffee Mug
39. 31:50Create Target
40. 32:16Animations
41. 32:47Node Animation
42. 33:26Code Overview
43. 34:17Harry Potter
44. 36:37ARKit
45. 37:12Bureau
46. 37:42Apple
47. 38:59TV Remote
48. 40:02Root Demo
49. 40:49DollarBills
50. 41:17DollarSelected
51. 43:02Outro

" related talks

• 26mDeveloping Immersive cross-platform AR and VR Apps using React-NativePulkit Kakkar · React Conf 2018
• 39mBuilding AR Apps with React NativeVladimir Novick · React Boston 2018
• 32mBuilding AR apps with React NativeVladimir Novick · FrontEnd Con 2018
• 37mBuilding AR Apps with React NativeVladimir Novick · Chain React 2018
• 24mLets Go 3D With React NativeAkshat Paul · React Native EU 2020
• 26mAugmented Reality with React Native — a Medium Worth to Bridge?Dino Scheidt · React Day Berlin 2017
• 44mBuilding Data Driven AR Experiences Powered by GraphQL by Vladimir NovickVladimir Novick · DevDays Europe 2019
• 27mBuilding high quality mobile apps with React NativeParashuram Narasimhan · State of platforms: Fragments Ahmedabad 2019