Introduction

• Notification Service: 34.8%
• Widgets: 25.5% (Home Screen & Today)
• Siri Intents: 11%

About Widgets

Continuous Native Generation

• Standard: you have an ios and android directory that you are responsible for building, maintaining, and upgrading. This is the default workflow of Expo, it's the easiest to understand, but it does have some drawbacks. The main one being that it's hard to upgrade and maintain your project as it scales.
• Continuous Native Generation (CNG): the ios and android directories are continuously generated based on project configuration. This system is unique to Expo and makes it easy to upgrade, and reduces the overhead of your project as it scales.

The Goal

Generating Apple targets

Terminal
𝝠 npx expo prebuild --template ./prebuild-template-no-rn.tgz -p ios --clean && npx expo run:ios

File-based targets

Developing a widget with SwiftUI

targets/widgets/index.swift
// (Entry file)
import WidgetKit
import SwiftUI

@main
struct exportWidgets: WidgetBundle {
    var body: some Widget {
        // Export widgets here
        widgets()
    }
}

targets/widgets/widgets.swift
import WidgetKit
import SwiftUI

struct PillarWidgetView: View {
  var body: some View {
   // ...
  }
}

struct PillarProvider: TimelineProvider {

  func placeholder(in context: Context) -> PillarEntry {
    PillarEntry(date: Date())
  }

  func getSnapshot(in context: Context, completion: @escaping (PillarEntry) -> Void) {
    let entry = PillarEntry(date: Date())
    completion(entry)
  }

  func getTimeline(in context: Context, completion: @escaping (Timeline<PillarEntry>) -> Void) {
    let entry = PillarEntry(date: Date())

    let timeline = Timeline(entries: [entry], policy: .atEnd)
    completion(timeline)
  }
}

struct widgets: Widget {
  let kind: String = "PillarWidget"

  var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: PillarProvider()) { entry in
      PillarWidgetView()
    }
    .configurationDisplayName("Pillar Widget")
    .description("Displays the number of pillars traversed.")
  }
}

struct widgets_Previews: PreviewProvider {
  static var previews: some View {
    PillarWidgetView()
  }
}

Toiling with SwiftUI Preview

Sharing data

Setting up the App Group

app.json
{
  "ios": {
    "entitlements": {
      "com.apple.security.application-groups": ["group.bacon.data"]
    }
  }
}

expo-target.config.js
module.exports = {
  type: 'widget',
  entitlements: {
    'com.apple.security.application-groups': ['group.bacon.data'],
  },
};

app.json
{
  "extra": {
    "eas": {
      "projectId": "a1a81680-f84c-11e7-88a7-c74e9d068889",
      "build": {
        "experimental": {
          "ios": {
            "appExtensions": [
              {
                "bundleIdentifier": "com.evanbacon.pillarvalley.widgets",
                "targetName": "widgets",
                "entitlements": {
                  "com.apple.security.application-groups": ["group.bacon.data"]
                }
              }
            ]
          }
        }
      }
    }
  }
}

Terminal
𝝠 npx expo prebuild --clean --platform ios

Writing shared settings

Terminal
𝝠 npx create-expo-module --local

modules/smart-settings/ios/SmartSettingsModule.swift
import ExpoModulesCore
import WidgetKit

public class SmartSettingsModule: Module {
    public func definition() -> ModuleDefinition {
        // Name of the module as used in JS
        Name("SmartSettings")

        // Function to call from JS
        Function("set") { (key: String, value: Int, group: String?) in
            let userDefaults = UserDefaults(
              // The group name is the same as the App Group name
              suiteName: group
            )
            userDefaults?.set(value, forKey: key)

            // Trigger a widget update to sync the data
            if #available(iOS 14.0, *) {
                WidgetCenter.shared.reloadAllTimelines()
            }
        }
    }
}

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "local:*": ["./modules/*"]
    }
  },
  "extends": "expo/tsconfig.base"
}

import SmartSettings from 'local:smart-settings';

Terminal
𝝠 npx expo run:ios

src/zustand/models.ts
// In some reducer ...

SmartSettings.set('pillarsTraversed', total, 'group.bacon.data');

Reading shared settings

struct PillarProvider: TimelineProvider {

  // ...

  func getTimeline(in context: Context, completion: @escaping (Timeline<PillarEntry>) -> Void) {
    // Notice the App Group is used here
    let userDefaults = UserDefaults(suiteName: "group.bacon.data")
    // And the key for the data that we use in the Zustand store.
    let pillars = userDefaults?.integer(forKey: "pillarsTraversed") ?? 0
    // Pass the data to the widget
    let entry = PillarEntry(date: Date(), pillarsTraversed: pillars)

    // Some other stuff to make the widget update...
    let timeline = Timeline(entries: [entry], policy: .atEnd)
    completion(timeline)
  }
}

Dark mode

Assets.xcassets/gradient1.colorset/Contents.json
{
  "colors": [
    {
      "color": {
        "color-space": "srgb",
        "components": {
          "red": 0.8941176470588236,
          "green": 0.592156862745098,
          "blue": 0.36470588235294116,
          "alpha": 1
        }
      },
      "idiom": "universal"
    },
    {
      "appearances": [
        {
          "appearance": "luminosity",
          "value": "dark"
        }
      ],
      "color": {
        "color-space": "srgb",
        "components": {
          "red": 0.24313725490196078,
          "green": 0.4470588235294118,
          "blue": 0.6274509803921569,
          "alpha": 1
        }
      },
      "idiom": "universal"
    }
  ],
  "info": {
    "version": 1,
    "author": "expo"
  }
}

expo-target.config.js
module.exports = {
  colors: {
    gradient1: {
      light: '#E4975D',
      dark: '#3E72A0',
    },
  },
};

Terminal
𝝠 npx expo prebuild -p ios --no-install

Building and deploying

Terminal
𝝠 eas build -p ios --auto-submit

app.json
{
  "ios": {
    "infoPlist": {
      "ITSAppUsesNonExemptEncryption": false
    }
  }
}

Conclusion

• I love Continuous Native Generation, the amount of convenience scripting and automation it enables is incredible! I'm very cautious about introducing functionality that will make it harder to upgrade my app, but thanks to Expo Config Plugins, I was able to build a sustainable new feature without sacrificing the simplicity of future upgrades.
• @bacons/xcode is really exciting! There's no shortage of things to improve in Xcode.
• EAS Build having simple hooks into configuring codesigning is fantastic, I love that the same JavaScript function that can whitelabel and generate my native code, can also ensure the E2E build process works. Without this, the last half of the article would've been much longer than a single command.
• Local Expo Modules are a miracle, being able to just drop-in a single Swift function for my specific purpose is a dream come true.

Thanks for reading 👏

• Join the Discord server to discuss more.
• Help me out by starring ⭐️ Expo on GitHub.