react-native-widget-extension

Expo config plugin to add widgets and live activities to a React Native app

The widgets still need to be written in Swift (I think there's no way around that). But you can simply add a folder with Swift files to a React Native project and then add the plugin via:

npx expo install react-native-widget-extension

And add the following config to app.json (where widgetsFolder is the path to the folder with the Swift files):

"expo": {
    "name": "my-app",
    "plugins": [
        [
            "react-native-widget-extension",
            { "frequentUpdates": true, "widgetsFolder": "SampleWidgetExtension" },
        ],
    ]
}

Then in React land, you can use the following:

import {
  areActivitiesEnabled,
  startActivity,
  updateActivity,
  endActivity,
} from "react-native-widget-extension";

startActivity(3, "4343", "$32.23", driverName, 47, 43);

Plugin configuration options

• frequentUpdates (boolean, default: false): Depending on this param, NSSupportsLiveActivitiesFrequentUpdates will be set
• widgetsFolder (string, default: "widgets"): Path from the project root to the folder containing the Swift widget files
• deploymentTarget (string, default: "16.2"): The minimum deployment target for the app
• groupIdentifier (string): The app group identifier which is required for communication with the main app. Must start with group.

Example

For a minimal example app, see the folder example. Example code for a widget and live activity can be found in example/SampleWidgetExtension. To run the example, you'll need to bun run build in the root directory.

Some background on how the PizzaDelivery example works:

• Assets.xcassets and Info.plist: Automatically created by Xcode when you create a widget
• Attributes.swift: The ActivityAttributes for the Live Activity are defined here. By default, this file should be named "Attributes.swift".
• Module.swift: This file defined the native module that can then be used from React land to start/stop/update the live activity. By default, this file should be named "Module.swift".
• The rest of the folder can be Swift files that define widgets, views, etc. and can be named and divided between files however you want.

Deployment Target

By default, this module adds a minimum deployment target of iOS 16.2, because otherwise Swift compilation fails if you try to use Live Activities. If you want to support earliert versions of iOS, you can manually set the deployment target via plugin config:

"expo": {
    "name": "my-app",
    "plugins": [
        [
            "react-native-widget-extension",
            { "deploymentTarget": "14.0" },
        ],
    ]
}

If you do this and you still use Live Activities in Swift, you have to make sure to guard the code that can only run on iOS 16.2 and later like this:

import SwiftUI
import WidgetKit

@main
struct PizzaDeliveryWidgetBundle: WidgetBundle {
    var body: some Widget {
        PizzaDeliveryWidgets()

        if #available(iOS 16.2, *) {
            PizzaDeliveryLiveActivity()
        }
    }
}

and

@available(iOS 16.2, *)
struct LockScreenLiveActivityView: View {
    ...
}