React Native GPUI

A new React Native platform for desktop. RNGPUI implements React Native's Fabric architecture on top of GPUI, the GPU-accelerated UI framework that powers Zed. Write your app in React Native, render it at 120fps on macOS, Linux, and Windows.

Architecture

RNGPUI connects four layers:

• JavaScript — Your React Native app, bundled by Metro and executed by Hermes. Standard RN APIs work out of the box; GPUI-specific capabilities are exposed through TurboModules.
• C++ — Implements React Native's Fabric renderer and JSI bindings. This is where shadow tree diffing, layout (Yoga), and native module dispatch happen.
• Rust — Owns the application lifecycle and GPUI integration. Translates Fabric's view hierarchy into GPUI elements and routes platform events back to React.
• GPUI — Zed's rendering engine. Handles GPU-accelerated drawing, text shaping, windowing, and input across all desktop platforms.

Codegen

RNGPUI has a custom code generator that reads React Native's standard specs and produces C++ and Rust bindings. There are two flows:

Fabric Components

Fabric components are native views—things that appear in the UI tree and get laid out by Yoga. You define them with a codegenNativeComponent spec:

// MyComponentNativeComponent.ts
export default codegenNativeComponent<NativeProps>('MyComponent');

Codegen produces:

• C++ — Shadow node, props struct, event emitters, and component descriptor. These integrate with Fabric's tree diffing and Yoga layout.
• Rust — Props struct and a component registration. You implement a mount/update/unmount handler that translates props into GPUI elements.

The C++ layer handles React's reconciliation; Rust handles actual rendering.

TurboModules

TurboModules expose platform functionality to JavaScript—things like window management, native menus, clipboard access, and networking. You define them with a TurboModuleRegistrySpec:

// NativeWindowManager.ts
export interface Spec extends TurboModule {
  createWindow(options: WindowOptions): Promise<number>;
  closeWindow(windowId: number): void;
}

Codegen produces:

• C++ — JSI bindings that validate arguments and dispatch calls.
• Rust — A trait with the module's methods. You implement the trait; the generated glue handles FFI marshaling.

Where Fabric components are declarative (React decides when to mount and update them), TurboModules are imperative—your JavaScript code calls them directly to perform actions or query system state.

Ecosystem Support

✅ Supported

• React Native SVG
• Expo BlurView
• Expo LinearGradient
• React Native Safe Area Context (shim)
• React Native WebView
  • via Wry

🚧 In Progress

• React Native Gesture Handler
• React Native Reanimated
• React Native Worklets
• React Native Screens
  • React Navigation native-stack

📋 Planned

• HeroUI Native
• React Native WebGPU
  • via Dawn
• React Native Skia
  • requires React Native WebGPU
• Three.js / React Three Fiber
  • requires React Native WebGPU
• TypeGPU
  • requires React Native WebGPU

❓ TBD

• Nitro Modules
• VisionCamera
• MMKV
• Expo Image
• Expo AV
• React Native Video
• Lottie React Native
• AsyncStorage
• Expo FileSystem
• Expo SecureStore
• React Native Keychain
• Expo Font
• Expo Linking
• Expo Notifications
• Expo Clipboard

Desktop APIs

RNGPUI provides first-party APIs for desktop-specific capabilities not covered by standard React Native:

Window Management (@rngpui/window)

• <Window> — Create and manage native windows
• <Titlebar> — Custom titlebar with native window controls
• <WindowDragRegion> — Draggable regions for frameless windows
• useWindow() — Access current window handle and methods
• useTitlebarMetrics() — Get titlebar dimensions for layout
• Zoom — Control window zoom/scaling

Context Menus (@rngpui/app)

• <ContextMenu> — Native right-click context menus
• ContextMenuManager — Programmatic menu control

App Menus (@rngpui/app)

• <AppMenu> — Native menu bar integration
• <DockMenu> — Dock/taskbar right-click menu
• useAppMenu() — Dynamic menu updates

License

React Native GPUI is distributed under the terms of both the MIT license and the Apache License (Version 2.0). See LICENSE-APACHE and LICENSE-MIT for details. Opening a pull request is assumed to signal agreement with these licensing terms.