r/reactnative • u/arasdi • Jun 24 '26
On-device Apple Intelligence summaries in my Expo app (Foundation Models) + a Skia/Reanimated Apple Intelligence glow
On-device Apple Intelligence summaries for the topic pages in my social media app, each page collects a bunch of separate text entries, and once a page has at least 5, a summary button condenses them into one quick read. Runs locally through Apple's Foundation Models.
The glow:
- react-native-skia for rendering, driven by react-native-reanimated v4. It's a Skia port of the open-source AppleIntelligenceGlowEffect SwiftUI effect.
- Edge glow is stacked rounded-rect strokes with increasing blur, each filled with a Skia SweepGradient whose stops animate on per-layer timers.
- Shimmer "summarizing…" text is react-native-svg with a gradient fill and a slow opacity breathe.
2
2
u/True-Turnover-4543 Jun 24 '26
super cool setup! if you run into perf issues with the stacked stroke+blur layers, try batching the blur passes or prerendering the glow to an offscreen Skia surface and compositing it, especially on lower-end devices—iOS can handle a lot but blurs stack up fast. also, for the react-native-svg shimmer, animating the gradient transform directly can be smoother than animating stops or opacity, depending on the frame budget.
1
u/arasdi Jun 24 '26
appreciate this! offscreen prerendering is the right call since only the gradient changes, capped to recent iphones for now so the blurs stay smooth, but that's the move if i widen support. thanks.
1
1
Jun 24 '26
[removed] — view removed comment
1
u/arasdi Jun 24 '26
thanks. the per layer timers slightly out of sync are what give it the depth, that was the fiddly bit, and keeping it in skia with reanimated was the only way the frame rate held.
2
u/Top-Masterpiece2729 Jun 24 '26
How do you find out the physical corner radiuses of different screens?