> Markdown version of [/videos/100118-jsx-to-live-activity-the-story-of-voltra](https://www.wearedevelopers.com/videos/100118-jsx-to-live-activity-the-story-of-voltra). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# JSX to Live Activity: The Story of Voltra

Build iOS Live Activities and Android widgets without touching Swift or Kotlin. Discover how Voltra overcomes Apple's 4KB limit to deliver server-driven UI updates entirely in JSX.

- **Speakers:** [Szymon Chmal](https://www.wearedevelopers.com/@szymon-chmal)
- **Event:** World Congress 2026 Europe
- **Published:** July 9, 2026
- **Duration:** 35:56
- **URL:** https://www.wearedevelopers.com/videos/100118-jsx-to-live-activity-the-story-of-voltra

## Summary

Voltra is a cross-platform library that enables developers to build native iOS Live Activities, Dynamic Island experiences, and Android widgets entirely in React and JSX. By acting as a bridge, Voltra translates standard React Native primitives into corresponding SwiftUI and Jetpack Compose nodes, allowing teams to deliver robust native extensions without touching Swift or Kotlin. A standout feature is the ability to send server-driven UI updates via push notifications, refreshing widget layouts dynamically even when the host application is completely suspended.

The primary technical hurdle in establishing this pipeline is Apple's strict 4KB payload limit for the Apple Push Notification service (APNs). To successfully ship comprehensive UI blueprints over the wire, Voltra relies on aggressive payload size optimization. Developer workflows natively adopt Brotli payload compression, map properties using custom dictionaries, and perform precise element and style deduplication. Identical UI nodes—like the repeated grids of a contribution graph—are securely passed as internal references rather than redefined objects, ensuring even complex visual interfaces fit comfortably within micro-payload constraints.

Because these live updates are routinely evaluated and routed from backend servers, Voltra replaces the standard React reconciler with a custom-built server-side React renderer to prevent environment crashes triggered by client-focused hooks. By intercepting React's undocumented internal hook dispatcher, Voltra safely stubs or statically executes state paradigms like `useState` and `useContext`. The framework couples this backend rendering safety with helpful automated polyfills, resolving discrepancies between React Native's flexbox model and native SwiftUI paradigms while generating dynamic asset charts for Android interfaces.

**Keywords:** react native live activities, ios dynamic island, voltra library, swiftui component mapping, jetpack compose widgets, react reconciler implementation, custom react renderer, hook dispatcher overriding, 4kb apns payload limit, server-driven ui updates, payload size optimization, brotli payload compression, react style deduplication, dynamic chart generation, javascript virtual machine rendering

## Chapters

1. **Introduction to Voltra and native Live Activities** (00:06) — The origin story of Voltra reveals how to bridge React with iOS extensions natively.
1. **Writing Live Activities using Voltra JSX** (03:01) — Familiar React principles and JSX components render widgets via server data with native hot reloading.
1. **Translating React trees to native UI frameworks** (06:59) — Voltra processes the React element tree hierarchy to reconstruct interfaces using platform primitives directly.
1. **Building a custom React renderer with Reconciler** (08:47) — The React Reconciler package configures hook support and concurrent mode functionality inherently.
1. **Mapping primitive elements to SwiftUI equivalents** (10:15) — Primitive JSON representations reconstruct corresponding SwiftUI components and properties during native evaluation.
1. **Bridging React Native styles with SwiftUI modifiers** (11:36) — React Native style objects require transformation into compatible SwiftUI string modifiers and simulated margins.
1. **Overcoming the payload limit for Live Activities** (13:31) — Multiple dynamic island structural variants must fit strictly within Apple's tiny data bandwidth limit.
1. **Compressing and deduplicating React payloads for native** (15:23) — Brotli compression, prop dictionaries, and object reference deduplication maximize extremely constrained payload limits.
1. **Implementing server-side rendering to push UI updates** (19:23) — A scratch-built traversal renderer avoids unhandled hook errors and resolves one-pass static snapshots.
1. **Rebuilding React hooks via secret internal dispatchers** (23:07) — Undocumented internal React dispatchers allow mocked hook executions specifically for static server environments.
1. **Advanced features and cross-platform architecture in Voltra** (26:18) — Platform parity involves preloading images, mapping layout engines, and executing dynamic chart generation.
1. **Push notification limits and experimental rendering architectures** (28:24) — Apple push service restrictions shape architectural limits while experimental Javascript VMs explore widget decoupling.

## Related Moments

- [Defining native applications and the history of React](https://www.wearedevelopers.com/videos/277-hands-on-react-native-from-zero-to-hero) (from "Hands-on React Native: From Zero to Hero")
- [Architecture and performance optimizations in React Native](https://www.wearedevelopers.com/videos/1466-building-better-apps-with-react-native) (from "Building Better Apps with React Native")
- [Origins and architectural capabilities of the React Native framework](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo")
- [Accessing native primitives for advanced layouts and APIs](https://www.wearedevelopers.com/videos/1445-lynx-native-for-more) (from "Lynx: Native for More")
- [Core differences between React Native and Flutter](https://www.wearedevelopers.com/videos/456-writing-truly-cross-plattform-applications-using-flutter) (from "Writing truly cross plattform applications using flutter")

## Related Articles

- [Create Videos Programmatically with React and Remotion](https://www.wearedevelopers.com/magazine/742-create-videos-programmatically-with-react-and-remotion)
- [Dev Digest 103 - Superb Owl Trafficking](https://www.wearedevelopers.com/magazine/388-dev-digest-103-superb-owl-trafficking)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)

## Related Jobs

- [Senior React Native Developer](https://www.wearedevelopers.com/jobs/ext/1518176-senior-react-native-developer) at **Almedia**
- [iOS Engineer, Swift/SwiftUI/Combine (B2C Broker)](https://www.wearedevelopers.com/jobs/ext/1611832-ios-engineer-swift-swiftui-combine-b2c-broker) at **Bitpanda**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**