OpenAIExpoDec 10, 2025, 4:30 PM

How to implement iOS widgets in Expo apps

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

How to implement iOS widgets in Expo apps

Key Points

  • native Swift widgets
  • @bacons/apple-targets plugin
  • preserve Expo + EAS Build

Summary

Glow is a widget-first iOS app built with Expo that uses native Swift widgets to surface affirmations on lock and home screens. Because widgets run natively (not JavaScript), integrate them into an Expo-managed project with an Expo Config Plugin such as @bacons/apple-targets to generate Apple widget targets while preserving EAS Build and the Expo workflow. Widgets should share data with the React Native app via a shared storage mechanism so the small native surface and the JS app stay in sync.

Key Points

  • Widgets must be implemented in native Swift/WidgetKit — they cannot run React Native or JavaScript.
  • Use an Expo Config Plugin (for example, @bacons/apple-targets) to add native Apple/widget targets without manual Xcode project management.
  • Keep using Expo tooling and EAS Build while adding native targets generated by the plugin.
  • Design the product around the widget: prioritize ambient presence and minimal friction (the widget can be the primary interface).
  • Share data between the widget and the React Native app using a shared container/App Group or another interprocess mechanism so both sides remain synchronized.
  • Be prepared to write and maintain a small amount of native Swift code for widget UI, timelines, and updates.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

ExpoアプリでiOSウィジェットを実装する方法

ExpoアプリでiOSウィジェットを実装する方法

Users • React Native • Development • 2025-12-10 • 7分で読めます

ゲスト投稿:Arthur Spalanzani — インディーアプリ開発者であり、モバイル開発に情熱を持つ工学系学生

Glowは、ExpoとSwiftウィジェットを使って、ウィジェットを第一の体験にしたアファメーションアプリを構築しています。本記事では、ウィジェットがReact Nativeとデータを共有し、iOSのロック画面やホーム画面でどのように動作するかを解説します。

背景 — なぜウィジェット中心にしたのか

昨冬、私はフランスからノルウェーに移住しました。12月の一日あたり20時間にも及ぶ暗さは想像以上で、あらゆるウェルネス系アプリを試しましたが、どれも使うのに努力が必要でした:ジャーナリング、ムードの記録、瞑想セッションなど。もっとシンプルなものが必要でした。

そこで私はGlowを作りました。Glowはウィジェットがアプリそのものです。単なる補助機能でもプレビューでもなく、実際のプロダクトはロック画面やホーム画面に存在します。

私は2019年からExpoでアプリを作ってきました。一度覚えれば手放せないワークフローです。しかしこのプロジェクトでは新しい領域に踏み込みました:ネイティブのSwiftウィジェットです。

ウィジェットをコア体験にする理由

  • 多くのウェルネスアプリは、アプリを開くことをユーザーに覚えておいてもらう必要があるため失敗しがちです。Glowはこれを逆転させます。
  • ロック画面で時間を確認したときにアファメーションが目に入る。
  • ホーム画面をスワイプすると再び表示される。
  • 摩擦ゼロの常在的な存在感。ロック画面のウィジェットは、何気ないスマホ確認の瞬間に働きかけ、ホーム画面のウィジェットは日中の意図的な接点を提供します。
  • アプリを開く必要はなく、必要なときに言葉が届きます。

技術的課題:ウィジェットをネイティブに感じさせること

ウィジェットはネイティブのSwiftコードが必要です(React NativeやJavaScriptで動作させることはできません)。しかし私はExpoのワークフローの利点を維持したいと考えていました:高速な反復、EAS Build、そして手作業のXcodeプロジェクト管理を避けること。

そこで登場するのが @bacons/apple-targets です。これは実験的なExpo Config Pluginで、ウィジェットのようなネイティブのAppleターゲットを生成しつつ、/ios ディレクトリの外側で管理しやすく保つことができます。

この記事では、GlowがどのようにしてExpoとSwiftウィジェットを組み合わせ、ウィジェットとReact Native間でデータを共有してネイティブな体験を実現したかを順を追って説明していきます。