Installation

1. Install the packages

npm

yarn

pnpm

bun

deno

npm install @use-voltra/lynx @use-voltra/core @use-voltra/ios @use-voltra/android @use-voltra/server @lynx-js/react

2. Configure Rspeedy

Pin the dev server port so the host app finds your bundle every time:

lynx.config.ts

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [pluginReactLynx()],
  server: { port: 3000, strictPort: true },
})

3. Set up the native host

Live Activities and Widgets render in native OS extensions, so you need an iOS or Android host that embeds Lynx and registers Voltra's native module. Follow the platform guides:

iOS Setup: Xcode project, CocoaPods, Widget Extension
Android Setup: Gradle modules, Glance widgets

4. Write your first Live Activity

import { useLiveActivity } from '@use-voltra/lynx/ios-client'
import { Voltra } from '@use-voltra/ios'

useLiveActivity(
  {
    lockScreen: (
      <Voltra.VStack style={{ padding: 16, borderRadius: '14px', backgroundColor: '#111827' }}>
        <Voltra.Text style={{ color: 'white', fontSize: 18 }}>Hello from Lynx</Voltra.Text>
      </Voltra.VStack>
    ),
  },
  { activityName: 'demo', autoStart: true }
)

The Voltra component reference (every Voltra.* component, styles, props, events) is on the official Voltra docs; the API is the same on Lynx. A couple of CSS conventions are different in Lynx; see iOS Styling Notes.

Need React or React Native expertise you can count on?

Let's talk

#Installation

#1. Install the packages

#2. Configure Rspeedy