How to add native iOS Widgets to your Expo app (SwiftUI + Expo Apple Targets)

Want a real native iOS widget hooked up to your Expo app, with live data and shared state, not just a static UI? In this tutorial ‪@codewithbeto‬ walks through how to build an iOS home screen widget for an Expo to-do app using Expo Apple Targets by Evan Bacon and SwiftUI. We start from a simple Expo to-do app, generate a widget target with npx create-target, wire up app groups and entitlements, then connect the widget to your JavaScript state so it shows your real to-dos. You will see how to keep the widget in sync when the user adds, completes, or removes items in the main app. In this video you will learn: ♢ How to use Expo Apple Targets to create an iOS widget target ♢ How to configure team ID, bundle ID, app groups, and entitlements ♢ How to share data between your Expo app and the widget with extension storage ♢ How to build the widget UI in SwiftUI and preview it in Xcode ♢ How to refresh the widget when the app goes to the background ♢ How this setup works with EAS so you can keep using Expo Application Services This tutorial is iOS only. For Android widgets you currently need a more native setup, so you can explore libraries like React Native Android Widgets as a starting point. If this helps you, hit like, subscribe, and let me know in the comments what you want to build next with Expo Apple Targets. How to implement iOS widgets in Expo apps: https://expo.dev/blog/how-to-implemen... expo-apple-targets: https://github.com/EvanBacon/expo-app... Source Code: https://github.com/betomoedano/simple... Shopping List App Example: https://github.com/betomoedano/grocer... react-native-android-widget: https://github.com/sAleksovski/react-... ⏱️ Timestamps: 00:00 - Intro 00:39 - Android Quick Note 01:37 - Expo Apple Targets Overview 01:50 - Creating a Widget 02:56 - Adding Apple Team ID 03:16 - Creating a Development Build 04:43 - Testing the Widget 05:39 - Making Changes in the Widget 09:01 - Displaying Data in the Widget 12:22 - Widget Sizes 13:00 - Sharing Data Between App & Widget 15:17 - Reading App Data from Widget 16:50 - Testing Widget with Real Data 18:14 - Refreshing the Widget 22:05 - Recap #expo #reactnativetutorial #reactnative