Build Live Activities with JSX in React Native

Voltra transforms React Native JSX into SwiftUI, enabling you to create custom Live Activities and Dynamic Island layouts without writing Swift or touching Xcode. Author your widgets entirely in React, enjoy hot reload during development, and let the config plugin handle iOS extension targets automatically.

Features

• Native iOS Surfaces: Build Live Activities, Dynamic Island variants, and static widgets using React components - no Swift knowledge required.

• Fast Development: Hooks support Fast Refresh. Both JS and native layers validate ActivityKit payload budgets.

• Push Notification Support: Collect ActivityKit push tokens, stream lifecycle updates, and enable server-driven refreshes.

• Familiar Styling: Use React Native style props alongside SwiftUI modifiers.

• Type-Safe: Full TypeScript definitions included for hooks, components, and schemas.

• Easy Integration: Works with Expo Dev Client and bare React Native projects. The config plugin wires up iOS extension targets for you.

Documentation

Full documentation available at use-voltra.dev:

• Quick Start
• API Reference
• Examples

Getting Started

Note: Not supported in Expo Go. Use Expo Dev Client instead.

Install the package:

npm install @vibecodeapp/v

Add the config plugin to your app.json:

{
  "expo": {
    "plugins": ["@vibecodeapp/v"]
  }
}

Run prebuild to generate the iOS extension:

npx expo prebuild --clean

See the documentation for detailed setup instructions.

Quick Example

import { useVoltra, Voltra } from '@vibecodeapp/v'

export function OrderTracker({ orderId }: { orderId: string }) {
  const ui = (
    <Voltra.VStack style={{ padding: 16, borderRadius: 14, backgroundColor: '#111827' }}>
      <Voltra.Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>
        Order #{orderId}
      </Voltra.Text>
      <Voltra.Text style={{ color: '#9CA3AF', marginTop: 6 }}>
        Driver en route · ETA 12 min
      </Voltra.Text>
    </Voltra.VStack>
  )

  const { start, update, end } = useVoltra(
    { lockScreen: ui },
    {
      autoStart: true,
      deepLinkUrl: `/orders/${orderId}`,
    }
  )

  return null
}

Platform Support

This library is designed for iOS only. Live Activities and Dynamic Island are iOS-specific features.

License

MIT