Simplifying iOS Widgets & Live Activities in React Native Apps With expo-apple-targets

Simplifying iOS Widgets & Live Activities in React Native Apps 2025.04.16 Using expo-apple-targets for seamless integration 1

● Name：Soumyajeet (ソウ) ● About：I am from India and I love to travel around Japan. ● Education：High School (Delhi) →Osaka University (Language School) →Tohoku University (Bachelors) ● チーム： User Frontend (Menu株式会社 ) ● Hobbies：Anime、Sports、Video Games ● Favourite Dish：辛味噌ラーメン 2

Contents ● ● ● ● ● ● ● The Idea and Motivation Introduction to expo-apple-targets Setting Up The Project Implementing a Simple Widget Implementing a Simple Live Activity Demo Challenges 3

The Idea and Motivation Among the fastly growing technologies, iOS Live Activities and Widgets are currently a must have. For delivery apps, this means: ● 📦 Live Order Tracking – Customers can track their deliveries at a glance without opening the app. ● 🔔 Enhanced Engagement – Widgets provide quick access to favorite restaurants, reorder options, or exclusive deals. ● 🚀 Competitive Edge – Leading apps are already adopting Live Activities to improve user experience and retention. It boosts user satisfaction, engagement, and operational efficiency while staying ahead in the competitive market. 4

Introduction to expo-apple-targets expo-apple-targets is a library made by Evan Bacon, one of the lead engineers in Expo. Why is it useful? ● ● ● 🚀 Bridges the gap between Expo’s ease of development and iOS’s advanced native features. 📂 Keeps the project structured – App Extensions can be developed inside the /target directory, avoiding conflicts with Expo’s native project structure. 🔄 Works seamlessly with Expo’s Continuous Native Generation (CNG) – No need to manually configure Xcode targets. 5

What is the difference? Step Without expo-apple-targets With expo-apple-targets Xcode Target Creation Manually open Xcode, add new Target for Widget / Live Activity, configure manually. Automatically adds targets via app.config.ts using a config plugin. Entitlements Setup (App Groups) Manually configure entitlements for each target in Xcode (easy to mis configure). Automatically handles required entitlements when specified in config. Info.plist Configuration Manually create and tweak a separate Info.plist for each new target. Automatically generates the necessary plist values through the plugin. Folder / File Setup Manually create Swift files, widget folders inside ios folder, link them to targets. Plugin generates folder structure & links them to new targets automatically. 6

Setting Up The Project (1) 7

Overview /root React-native project /root/targets Widget / Live Activity App (.app) 8

Setting Up The Project (2) /root/targets 9

Setting Up The Project (3) Use the magic words ! ! 10

Without expo-apple-targets With expo-apple-targets npx expo prebuild -p -ios auto-generates 11

Setting Up The Project (4) targets → expo:targets 12

Setting Up The Project (5) 1. Open xcode with cmd $ xed ios 2. Build xcode project to install dev-client build on simulator 13

Setting Up The Project (for widget) > 📂 Project > 📂 targets/(live-activity or widget)/ expo-target.config.js widget.swift Note: App Group is needed to be configured for target and main app to share data 14

Implementing a Simple Widget nch Lau On Native Module function (ExpoModulesCore) Call javascript function 15

UserDefaults UserDefaults UserDefaults.value( forKey: key) key: value UserDefaults.set( value, forKey: key) 16

Demo Widget User Defaults Button press in react-native project javascript function data: shop 4 widget 17

Demo Live Activity LiveActivityControlModule .startActivity() Activity.Request( new state ) Button press in react-native project javascript function Live Activity 18

Challenges ● Confirm All files are present 19

Challenges ● Be Careful of the OS version. ● ● WidgetKit can be used above ios14 ActivityKit can be used above ios16 20

Challenges ● How to debug Debug widget on xcode 21

Challenges ● When can we use it in production? productionで使っ ても大丈夫で す！！ 22

Thank you! from me and my team 2025.04.16 23