iOS Live Activity React Native

This project is a sample React Native (Expo) app demonstrating the use of Live Activities for tracking the status of an order. Built with expo-apple-targets integrated in React Native project through a Expo modules, it showcases order status updates directly on the Lock Screen and within the Dynamic Island (for iPhone models that support it). The app includes a Live Activity widget that displays order progress and provides options for user interaction, such as cancelling an order.

Table of Contents

• iOS Live Activity React Native
  • Table of Contents
  • Features
  • Installation and Usage
  • Usage
  • Project Structure
    • Live Activity Widget Target
    • Native Module to control LiveActivity
  • Demo
    • Dynamic Island & Local Screen
    • Standby Mode

Features

• Order Tracking with Live Activity: View updates on order status, such as Shipped, In Transit, Out for Delivery, and Delivered.
• Dynamic Island Integration: For supported devices, the Live Activity is visible in the Dynamic Island, providing at-a-glance tracking and quick actions.
• User Interaction with Live ActivityIntent: Allows users to cancel an order directly from the widget, triggering updates within the React Native app.
• expo-apple-targets Integration: Expo Config Plugin that generates native Apple Targets like Widgets or App Clips, and links them outside the /ios directory

Installation and Usage

1. Clone the repository:

   git clone https://github.com/akshayjadhav4/live-activity-rn-demo.git
   cd live-activity-rn

2. Install CocoaPods dependencies:

   npm install

3. Generate iOS project:

   npx expo prebuild --platform ios --no-install

Usage

1. Run the App:

   npm run ios

2. Trigger the Live Activity:
   • Once App is open press Start which will start actvity.
3. Interacting with the Activity:
   • LiveActivityIntent runs the in the app’s process so custom app intent need to be added to app target.
   • Struct extending LiveActivityIntent put inside _shared folder. Plugin will add this file in Main app target as well.
4. Testing:
   • View the activity in the Lock Screen or Dynamic Island on supported devices.
   • In expanded Dynamic Island view use the Cancel Order button to test the LiveActivityIntent functionality.

Project Structure

Live Activity Widget Target

.
└── widgets
    ├── Assets.xcassets  # assets will be linked as resources of the target
    ├── Attributes.swift # describe data that Live Activity displays (ActivityAttributes)
    ├── _shared
        ├── OrderTrackingLiveActivityIntent.swift # LiveActivityIntent handling
    ├── Info.plist
    ├── OrderTrackingActivity.swift # LiveActivity widget code and UI setup
    ├── PrivacyInfo.xcprivacy
    ├── expo-target.config.json # config to generate LiveActivity Widget
    └── index.swift # Main widget

Native Module to control LiveActivity

.
└── order-tracking
    ├── android
    ├── expo-module.config.json
    ├── index.ts # expose JavaScript functions to control LiveActivity 
    ├── ios
    │   ├── Attributes.swift # copy of ActivityAttributes same as target
    │   ├── OrderTracking.podspec
    │   ├── OrderTrackingModule.swift # iOS implementation to manage LiveActivity
    │   └── OrderTrackingView.swift 
    └── src
        ├── OrderTracking.types.ts # TypeScript types and interfaces for the module 
        ├── OrderTrackingModule.ios.ts # Exposes the native module to the JavaScript side
        └── OrderTrackingModule.ts # placeholder implementation of native module for other platforms

Demo

Dynamic Island & Local Screen

Standby Mode