Quick Start

Get started with Voltra in just a few steps. We'll walk through installation and configuration.

Minimum iOS Version

Voltra requires iOS 16.2 or later. Make sure your app's deployment target is set to iOS 16.2 or higher. See the expo-build-properties documentation for details on configuring your iOS deployment target.

1. Install Voltra

Add Voltra to your Expo project:

npm

yarn

pnpm

bun

npm install voltra

2. Configure the Expo Plugin

Add the Voltra plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "voltra",
        {
          "groupIdentifier": "group.your.bundle.identifier",
          "enablePushNotifications": true
        }
      ]
    ]
  }
}

For a complete list of plugin configuration options, see the Plugin Configuration documentation.

3. Regenerate your native project with Expo Prebuild

It's time to update your native project. Run the following command to regenerate it and install native dependencies for Voltra.

npm

yarn

pnpm

bun

npx expo prebuild --platform ios

4. Create your first Live Activity

Now let's create a simple "Hello World" live activity. Create a new component:

import React from 'react'
import { startLiveActivity } from 'voltra/client'
import { Voltra } from 'voltra'

function HelloWorldActivity() {
  const activityUI = (
    <Voltra.VStack style={{ padding: 20, borderRadius: 18, backgroundColor: '#007AFF' }}>
      <Voltra.Text style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}>Hello World from Voltra!</Voltra.Text>
      <Voltra.Text style={{ color: 'white', fontSize: 16, marginTop: 8 }}>Your first live activity</Voltra.Text>
    </Voltra.VStack>
  )

  const startActivity = async () => {
    await startLiveActivity({
      lockScreen: activityUI,
    })
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={startActivity} style={{ padding: 20, backgroundColor: '#007AFF', borderRadius: 10 }}>
        <Text style={{ color: 'white', fontSize: 18 }}>Start Live Activity</Text>
      </TouchableOpacity>
    </View>
  )
}

You've created your first live activity with Voltra. The JSX you write gets automatically converted to SwiftUI and displayed natively on iOS.

Need React or React Native expertise you can count on?

Let's talk Let's talk

Need help with React or React Native projects?

We support teams building scalable apps with React and React Native.

Let's talk Let's talk

Quick Start

Get started with Voltra in just a few steps. We'll walk through installation and configuration.

Minimum iOS Version

1. Install Voltra

Add Voltra to your Expo project:

npm

yarn

pnpm

bun

npm install voltra

2. Configure the Expo Plugin

Add the Voltra plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "voltra",
        {
          "groupIdentifier": "group.your.bundle.identifier",
          "enablePushNotifications": true
        }
      ]
    ]
  }
}

For a complete list of plugin configuration options, see the Plugin Configuration documentation.

3. Regenerate your native project with Expo Prebuild

It's time to update your native project. Run the following command to regenerate it and install native dependencies for Voltra.

npm

yarn

pnpm

bun

npx expo prebuild --platform ios

4. Create your first Live Activity

Now let's create a simple "Hello World" live activity. Create a new component:

import React from 'react'
import { startLiveActivity } from 'voltra/client'
import { Voltra } from 'voltra'

function HelloWorldActivity() {
  const activityUI = (
    <Voltra.VStack style={{ padding: 20, borderRadius: 18, backgroundColor: '#007AFF' }}>
      <Voltra.Text style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}>Hello World from Voltra!</Voltra.Text>
      <Voltra.Text style={{ color: 'white', fontSize: 16, marginTop: 8 }}>Your first live activity</Voltra.Text>
    </Voltra.VStack>
  )

  const startActivity = async () => {
    await startLiveActivity({
      lockScreen: activityUI,
    })
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={startActivity} style={{ padding: 20, backgroundColor: '#007AFF', borderRadius: 10 }}>
        <Text style={{ color: 'white', fontSize: 18 }}>Start Live Activity</Text>
      </TouchableOpacity>
    </View>
  )
}

You've created your first live activity with Voltra. The JSX you write gets automatically converted to SwiftUI and displayed natively on iOS.

#Quick Start

#1. Install Voltra

#2. Configure the Expo Plugin

#3. Regenerate your native project with Expo Prebuild

#4. Create your first Live Activity

Need React or React Native expertise you can count on?

#Quick Start

#1. Install Voltra

#2. Configure the Expo Plugin

#3. Regenerate your native project with Expo Prebuild

#4. Create your first Live Activity

Quick Start

1. Install Voltra

2. Configure the Expo Plugin

3. Regenerate your native project with Expo Prebuild

4. Create your first Live Activity

Quick Start

1. Install Voltra

2. Configure the Expo Plugin

3. Regenerate your native project with Expo Prebuild

4. Create your first Live Activity