About this animation
A React Native glass pill turns a glanceable status into focused controls without navigating away from the current screen. This component moves between compact, expanded, and full-card states: tap opens the compact controls, long press reveals the full view, and an upward swipe collapses it. Use it for timers, recording status, delivery progress, media activity, or another live task that needs more detail on demand. One Reanimated spring progress value drives size changes and content crossfades, while Gesture Handler keeps touch transitions direct. Expo Blur and Expo Linear Gradient create a dark iOS 26-style glass material. The timer updates independently from animation, and the API supports controlled or uncontrolled state, glass settings, duration, and accent color.
When to use it
- Expand a live timer into focused controls.
- Show recording or delivery status over content.
- Reveal details without changing screens.
- Collapse a transient activity with a swipe.
A dark live-activity pill that expands from glanceable status to focused controls.
How it works
- A single spring progress value drives the pill's sizes and content crossfades.
- Tap opens the compact expanded state; long press opens the full card.
- An upward swipe collapses it.
- The countdown updates independently while visual motion remains on the UI thread.
Install
npx expo install expo-blur expo-linear-gradient react-native-gesture-handler react-native-reanimated
Usage
<DynamicGlassPill defaultValue="compact" timerSeconds={299} />Props
| Prop | Default | Description |
|---|---|---|
value | — | Controlled display state. |
defaultValue | compact | Initial display state. |
timerSeconds | 299 | Countdown starting value. |
glass | Material defaults | Blur intensity, tint, and highlight. |
accentColor | #AA8CFF | Glow and control color. |
Compatibility
Expo SDK 57, React Native 0.86, and Reanimated 4. iOS, Android, and web are included; native device verification is pending.
Accessibility
The pill is a labeled button: tap and long press expose every state. Reduced motion uses immediate transitions.
FAQ
- Does the expanding glass pill require a development build?
- Its dependencies are Expo Blur, Expo Linear Gradient, Gesture Handler, and Reanimated for Expo SDK 57. All three platforms are supported in the manifest, with visual verification still pending.
- Can I control the expanded state myself?
- Yes. Use value for controlled state or defaultValue for local state, then customize timerSeconds, the glass material, and accentColor.
- Is there an accessible alternative to every gesture?
- Yes. The pill is a labeled button, and tap and long press expose its states. Reduce Motion makes state transitions immediate instead of springing between sizes.