The Problem

I was building a manifestation app in React Native and needed a vision board feature. Not a static collage. An immersive 3D space users could actually step into.

The challenge: Three.js is built for the web, not React Native. I needed a bridge that did not destroy performance or bundle size.

## The Architecture

I chose a WebView-based approach rather than a native Three.js port.

React Native handles the shell, navigation, auth, and Firebase sync

WebView renders the 3D scene using Three.js

PostMessage API handles communication between RN and the WebView

Firebase Storage serves optimized images for the vision board

Why not react-three-fiber ? At the time of building, R3F's React Native support was experimental and the bundle size exceeded 15MB. A WebView let me lazy-load the 3D scene only when

needed.

## The 3D Scene

The scene is a simple cylindrical panorama. Users upload images, which are mapped to floating planes in 3D space.…