7 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article explains how Voltra allows React Native developers to create Live Activities and Widgets without using Swift or Kotlin. It details the evolution of Voltra’s rendering engine, the limitations of traditional approaches like react-reconciler, and the implementation of a custom renderer that meets specific requirements for dynamic UI updates.
If you do, here's more
Voltra is a library designed for React Native developers, enabling them to create native Live Activities and Widgets without using Swift or Kotlin. It employs a custom renderer that converts React Native JSX into JSON during runtime, avoiding the complexities of existing rendering solutions, particularly for server-side rendering (SSR). The initial approach using react-reconciler became problematic because it was built for client-side scenarios where app state and updates are critical. In contrast, SSR requires a stateless output, which led to the decision to create a custom renderer tailored to Voltra’s needs.
JSX, which might seem complex, is essentially a structured tree of objects representing UI elements. The article breaks down the rendering process: React creates an initial tree from JSX, walks through it to render components, and then reconciles the tree to update the UI. This process is typically managed by react-reconciler, but this package isn’t suitable for Voltra's SSR requirements. Instead, the custom renderer mimics the server-side rendering found in react-dom, producing a specific JSON format necessary for mobile interfaces.
The custom renderer handles different node types in JSX—host components, primitive values, arrays, and React components—by defining specific actions for each. It processes host components, converts text nodes, and manages arrays recursively. Notably, Voltra requires the use of the useContext hook for theming, which necessitates a workaround involving React's Dispatcher. By temporarily setting the dispatcher before rendering components, Voltra can implement its own context management, ensuring that theme changes propagate correctly across widgets and activities.
Questions about this article
No questions yet.