Simple set up - how to use?

[duggster]

Hi! I am really looking forward to incorporating a widget into my expo app. In order to get to know this plugin, I am first trying the simplest thing I can think of but I am not able to get it to work. Here are the steps I'm doing, maybe someone can help point me to what I'm doing wrong or at least give some tips on how to troubleshoot. I've been working with expo for a number of years but do not have much (any) experience working in Xcode.

Create new app

1. npx create-expo-app my-app
2. npm run iOS
3. Verify the app opens in the iOS simulator with Expo Go

Prebuild and add widget in Xcode

1. npx expo prebuild
2. Set the bundle identifier as com.duggster.myapp
3. Open ./ios/myapp.xcworkspace in Xcode
4. Click File -> New -> Target… -> Widget Extension

• Product Name: my-app-widget
• Dev Team: select my team
• Keep everything else as default
• Click Finish
• A prompt comes up asking: Activate “my-app-widgetExtension scheme”? This scheme has been created for the “null” target…
• Click Activate

5. Open my_app_widget.swift in Xcode and see the preview show the widget
6. npx expo run:ios
7. The new dev-client opens in the simulator and I’m able to add the widget as expected

Install and configure the config plugin

1. npx expo install @bacons/apple-targets
2. Create a folder in the expo project: ./targets
3. Add expo-target.config.json to ./targets

{
    "type": "widget",
    "name": "my-app-widget",
    "colors": {
        "$accent": {
            "color": "red",
            "darkColor": "blue"
        }
    },
    "icon": "../assets/icon.png",
    "frameworks": [
        "SwiftUI"
    ],
    "deploymentTarget": "13.4"
}

5. Copy my_app_widget.swift and my_app_widgetBundle.swift from ./ios/my-app-widget to ./targets
6. Add teamId to plugins in app.config.js

"plugins": [
      [
        "@bacons/apple-targets",
        {
          "teamId": "my team ID here"
        }
      ]
    ]

7. npx expo prebuild —clean
8. npx expo run:ios
9. When the dev-client app loads into the simulator, there is no widget available to add for it.
10. I don't see any mention of the widget in the terminal during the prebuild or run:ios commands, and there is no widget target in the new ios workspace.

Any help would be much appreciated!

[duggster]

OK, so, I got it working. Here's what I had to do:

• When adding a ./targets folder in the expo project, you have to create a subfolder for the type of extension you're making. In my case I used ./targets/widget and then added the expo-target.config.json file and .swift files in there.
• The app.json "plugins" field should be "appleTeamId" instead of "teamId"
• In the expo-target.config.json, I had to up the deploymentTarget to 17.0 since the default widget code that Xcode gave me had something in it specific to 17.0

After that I was able to have npx expo run:ios load with available widgets, and can continuously regenerate the prebuild as needed whenever I need to modify the widgets. I assume my workflow will be to work in Xcode using the preview feature to develop the widgets, then copy and paste the swift files into targets/widget when I'm done, and I'll remove the ios folder when done. Hoping EAS Build will work as expected. I still have a long way to go, including working in sharing data between the app and widget, but at least this works for being able to embed a widget into my expo app while remaining in the managed workflow!

[kubacienciala]

Did You figure out how to share data between app and widget?

If anyone is struggling with the same problem with sharing data, just ensure that You followed above steps and have set
"entitlements": {
"com.apple.security.application-groups": ["group.BUNDLE.widget"]
},

to yours expo-target.config.json

[lourxd]

Has anyone tried to create a Notification Service Extension? Is it possible with this package?