expo router file based routing with voltra setup for button interactions

[adityaranjan006]

// index.js
import { isHeadless, addVoltraListener } from 'voltra/client'
import * as SplashScreen from 'expo-splash-screen'
import { registerTemperatureActivityId } from './temperature'
import { registerAlarmActivityId } from './src/utils/alarmLiveActivityStorage'
import { handleLiveActivityAlarmDismiss, parseAlarmDismissSide } from './src/utils/handleLiveActivityAlarmDismiss'
import { sendTokenToServer, sendUpdateTokenToServer } from './src/hooks/useVoltraLiveActivityListeners'
import './firebaseBackground'

// console.log('[index.js] isHeadless:', isHeadless())

// ✅ Listeners always registered — works in BOTH headless and foreground
// Per Voltra docs: register listeners outside the headless check
addVoltraListener('activityPushToStartTokenReceived', (event) => {
  // console.log('[index.js] activityPushToStartTokenReceived')
  void sendTokenToServer(event.pushToStartToken)
})

addVoltraListener('activityTokenReceived', (event) => {
  const { activityName, pushToken, type } = event
  // console.log('[index.js] activityTokenReceived:', activityName)
  void sendUpdateTokenToServer({ activityID: activityName, token: pushToken, type })
  if (activityName.includes('temperature_control')) {
    registerTemperatureActivityId(activityName)
  } else if (activityName.toLowerCase().includes('alarm')) {
    registerAlarmActivityId(activityName)
  }
})

addVoltraListener('interaction', (event) => {
  const id = event?.identifier
  if (typeof id !== 'string') return
  console.log('[index.js] interaction:', id)

  if (id.includes('increment') || id.includes('decrease')) {
    const { handleInteraction } = require('./temperature')
    void handleInteraction(id)
    return
  }

  if (id.includes('dismiss') && parseAlarmDismissSide(id)) {
    console.log('[index.js] dismiss:', id)
    void handleLiveActivityAlarmDismiss(id).catch((err) => {
      console.warn('[index.js] dismiss error:', err)
    })
    return
  }
})

SplashScreen.preventAutoHideAsync()

// ✅ Always mount expo-router — isHeadless() check moved to _layout.tsx
// DO NOT gate this — calling isHeadless() at module level is unreliable
// because Expo native modules are not yet initialized at this point
require('expo-router/entry')

This is the index.js new entry point I have setup for handling voltra interaction. But I have a custom spalshscreen with animation handling the router.replace logic. And I have my apps home screen with skia runtime shader and graphics component with workless. I'm facing the Issue with skin render, workelts based UI rendered when activity initializes the app when it comes. Some thing is broken on the app's main UI.

How do I launch the app correctly while handling the interaction with voltra live activity Buttons? I'm clueless.

I found this:

// In your app's entry point (e.g., App.tsx, index.js)
import { isHeadless, addVoltraListener } from 'voltra/client'

function App() {
  // Handle token events even in headless mode
  useEffect(() => {
    const subscription = addVoltraListener('activityTokenReceived', (event) => {
      // Process token updates and send to server
      sendTokenToServer(event)
    })

    return () => subscription.remove()
  }, [])

  // Only render the UI if not in headless mode
  if (isHeadless()) {
    return null // Don't mount the app component tree
  }

  // Render your normal app UI
  return <YourMainAppComponent />
}

but how It will open the the main app component in file based routing??