Breaking the 2D Barrier: Engineering Immersive Spatial UIs with Expo and React Three Fiber

For years, we’ve been building mobile apps inside a box. We’ve optimized lists, perfected navigation stacks, and mastered flexbox. But lately, I’ve found myself restless. The advent of spatial computing and the increasing power of mobile GPUs have opened a door that traditional 2D UI frameworks simply weren't built for.

I’ve spent the last few months diving deep into the intersection of Expo and React Three Fiber (R3F). My goal? To move beyond the screen and build interfaces that exist in space, not just on top of it. Here is what I’ve learned about making this transition as a senior engineer.

Why the Expo + R3F Stack?

Initially, people asked me: "Majid, why not just go full native with Swift and RealityKit?" The answer is simple: Productivity and Portability.

Expo has matured into an incredible ecosystem. With expo-gl and the bridge provided by three and @react-three/fiber, we can now write declarative, component-based 3D code that runs on iOS, Android, and Web with a single codebase. We get the developer experience of React—Hot Module Replacement, hooks, and a massive community—while leveraging the underlying hardware for high-fidelity spatial rendering.

The Architectural Shift: The Canvas is Your New View

In a standard React Native app, your root is a <View>. In a spatial UI, your root is the <Canvas>. This isn't just a syntax change; it's a mental model shift. You aren't positioning elements with top and left anymore; you're dealing with vectors, quaternions, and light sources.

Here’s a snippet of a basic spatial setup I’ve been using as a boilerplate:

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { useGLTF, Environment, ContactShadows } from '@react-three/drei/native';

function SpatialModel({ url, ...props }) {
  const { scene } = useGLTF(url);
  return <primitive object={scene} {...props} />;
}

export default function SpatialExperience() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      <Suspense fallback={null}>
        <SpatialModel 
          url="https://path-to-your-asset.glb" 
          scale={1.5} 
          position={[0, -1, 0]} 
        />
        <Environment preset="city" />
        <ContactShadows opacity={0.4} scale={10} blur={2} far={4.5} />
      </Suspense>
    </Canvas>
  );
}

Breakthrough: Bridging 2D UI with 3D Space

The biggest challenge I faced was interaction. How do you trigger a 2D state change from a 3D object hit-test?

I found that the most performant way is to use a unified state manager (like Zustand) that both the Canvas and your standard Overlay components can listen to. When a user taps a 3D mesh in the Canvas, I update the store, and the standard React Native UI reacts instantaneously. This creates a seamless blend where the 3D world feels integrated with the system's UI.

Performance Engineering: Don't Kill the Main Thread

On mobile, thermal throttling is your biggest enemy. Here are my three non-negotiables for spatial UI performance:

1. Texture Compression: Never use raw PNGs for textures. I use .ktx2 or highly compressed .webp assets.
2. The useFrame Hook: Use this sparingly. Any logic inside useFrame runs 60 (or 120) times per second. If you’re doing heavy calculations here, your phone will turn into a space heater.
3. Instance over Copies: If you need 100 floating orbs in your UI, use InstancedMesh. Rendering 100 individual mesh components will tank your draw calls.

Conclusion: The New Frontier

Building spatial UIs with Expo and React Three Fiber feels like the early days of mobile development again—experimental, exciting, and full of potential. We are no longer limited by the edges of the smartphone screen. By leveraging the tools we already know as React developers, we can lead the charge into the next dimension of computing.

If you haven't tried putting a <Canvas /> in your Expo project yet, this is your sign. The water is fine, and the possibilities are infinite.