iOS Setup

Once you have installed Voltra, configure the iOS Expo plugin and use @use-voltra/ios for JSX.

1. Configure the Expo Plugin

Add the iOS client plugin to your app.json or app.config.js. For iOS, you typically need to specify a groupIdentifier to enable data sharing between your main app and the Live Activity extension.

{
  "expo": {
    "plugins": [
      [
        "@use-voltra/ios-client",
        {
          "groupIdentifier": "group.your.bundle.identifier",
          "enablePushNotifications": true
        }
      ]
    ]
  }
}

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

2. 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.

npx expo prebuild --platform ios

yarn dlx expo prebuild --platform ios

pnpm dlx expo prebuild --platform ios

bunx expo prebuild --platform ios

3. Create your first Live Activity

Now let’s create a simple “Hello World” live activity. Create a new component:

import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { Voltra } from '@use-voltra/ios'
import { startLiveActivity } from '@use-voltra/ios-client'

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>
  )
}