Weird spacing with Voltra.Timer in Dynamic Island

[samimsaidi]

Library Version

1.2.1

React Native Version

0.81.5

React Version

19.1.0

Expo Version

54.0.31

Minimal Reproduction

1. Create a Live Activity for Island with Voltra.Timer component

const variants = {
    island: {
      compact: {
        leading: (
          <Voltra.Image
            source={{
              base64:
                "iVBORw0KGgoA...",
            }}
            style={{ width: 21, height: 21 }}
          />
        ),
        trailing: <Voltra.Timer endAtMs={Date.now() + 5 * 60 * 1000} />,
      },
    },
  };

2. Start the Live Activity and go to home screen to view the dynamic island

Actual result:

Expected result:

Additional Information (Optional)

No response

[V3RON]

This is unfortunately a limitation of the SwiftUI Text view when using the timer style. By default, it reserves as much space as possible to ensure that no re-layout is required when the value updates. A common workaround is to provide a constant width that fits the expected content and align the text to the right if needed.

https://stackoverflow.com/questions/66210592/widgetkit-timer-text-style-expands-it-to-fill-the-width-instead-of-taking-spa

[jkhan626]

Hi, any updates or suggestions for this? I'm having the same issue.