Expo Live Activities Tutorial: Lock Screen + Dynamic Island in React Native (No Swift)
SeniorMobileDev
0:00 / 0:00
Expo Live Activities Tutorial: Lock Screen + Dynamic Island in React Native (No Swift)
390 просмотров · 3 нед. назад
SeniorMobileDev
89 подписчиков
390 просмотров · 3 нед. назад
#expo #reactnative #liveactivities #dynamicisland #iosdevelopment
Build an iOS Live Activity in React Native with Expo — a voice-recorder timer on the Lock Screen and in the Dynamic Island, with Pause / Resume / Stop buttons. No Swift, no Xcode target: just TypeScript with the new expo-widgets library (alpha).
Source code: https://github.com/seniormobiledev/ex...
In this video:
• What a Live Activity is, and the 4 places it shows up (banner, compact, minimal, expanded)
• How expo-widgets works: the 'widget' directive + a separate JS runtime that renders SwiftUI
• Install + app.json config (and the bundleIdentifier you must not forget)
• Design decision: let iOS count the timer with timerInterval + pauseTime instead of updating every second
• Code walkthrough: props, layout slots, buttons, start / update / end
• ⚠️ Trap I found while testing: for a Live Activity, event.source is the activity ID — not its name
• Real demo on the iOS Simulator
⏱️ Chapters
0:00 Live Activity demo
0:15 Intro: expo-widgets
0:29 What is a Live Activity?
1:00 How expo-widgets works
1:36 Installation & app.json
2:09 Design decision: who counts the timer?
2:40 Code: props (why numbers, not Dates)
3:00 Code: the 'widget' directive
3:27 Code: layout slots
3:54 Code: how buttons work
4:13 App side: start, update, end + the source-ID trap
4:58 Result on the iOS Simulator
5:17 Recap & gotchas
🧰 Commands
npx expo install expo-widgets @expo/ui
npx expo install expo-audio -- --legacy-peer-deps
npx expo run:ios
📚 Links
Expo blog: https://expo.dev/blog/home-screen-wid...
expo-widgets docs: https://docs.expo.dev/versions/latest...
Expo UI Text (timerInterval): https://docs.expo.dev/versions/latest...
Tested with Expo SDK 57, expo-widgets 57.0.x, Xcode 26.5, iOS 26.5 Simulator.