feat: add shared app group

[fobos531]

Hello there! @bndkt

When you don't want the widget to be static, a common pattern of sharing the data between the main app and the widget is to communicate via a shared store in UserDefaults. For this to work however, it is required to create an app group and assign both the main app and the widget to this group. By default, this plugin is missing this capability, so thats what this PR is about. The implementation is heavily inspired by your app clip implementation which also creates an app group. I haven't verified the 100% reliability of this in EAS, but I checked my Apple Developer portal and the entitlements are correctly set up, as well as when I prebuild the app, the relevant entitlement files are there as well.

However, the issue I'm running into is when I actually want to link the entitlement file to the Xcode project. I see you're doing something similar in your App Clip project: https://github.com/bndkt/react-native-app-clip/blob/566b8f6f4d15e54d29d592b576b09e0989fdeda9/plugin/src/xcode/addPbxGroup.ts#L48

I tried mimicking this approach by doing it like so:

 // Add PBX group
  const { uuid: pbxGroupUuid } = xcodeProject.addPbxGroup(
    [...swiftFiles, ...entitlementFiles, ...plistFiles, ...assetDirectories, `${targetName}.entitlements`],
    targetName,
    targetName
  );

but I was unsuccessful. I also noticed that by default you're bundling the entitlement files from the widgets folder which kind of makes sense, but I believe in this particular instance it might be better if the entitlements are created by the plugin itself and not manually by the user. As of right now, I cannot think of an instance where they would need capabilities other than shared app groups.

Any pointers on how I can get this entitlements file linked properly? Thank you!

[Nasseratic]

any news about this? :)

[Nasseratic]

Hi @fobos531 Did you manage to get this working even if it's not through config plugin? I don't know much about IOS dev, so would be nice if there is a quick guide to get it working even with manual steps :)

[fobos531]

@Nasseratic Hey, I didn't dabble with this much after that.

@bndkt Do you have any insight on how we could proceed with this? If you don't have the bandwidth, no worries :).

[Nasseratic]

I managed to get it working localy by assigning app group from Xcode.

Maybe I will give it a shot with this and compare the manual output with the result of the config plugin

[russriser]

This PR is missing the addition of CODE_SIGN_ENTITLEMENTS to the build settings. See the fork by moodworksinc for working implementation of app groups

[pvinis]

Just confirming, that using https://github.com/moodworksinc/react-native-widget-extension worked 👍.
I added that url in package.json for the dep, then added an entitlements file, and all works well.

(for ref, heres the repo i did this on, https://github.com/pvinis/tap-together.)

[alea12]

Hi everyone, I also confirmed this fork https://github.com/moodworksinc/react-native-widget-extension works!
I'm sticking to the EAS build workflow, where I don't have ios (or android) folder in my setup.

Here are the steps I followed:

1. Update package.json to fetch the library from the fork. This worked for yarn, and might look different with other package managers:

"react-native-widget-extension": "moodworksinc/react-native-widget-extension"

2. Add expo.ios.entitlements section in app.json (or other expo configuration file), where you have set up plugins settings as well:

{
  "expo": {
    "ios": {
      "entitlements": {
        "com.apple.security.application-groups": [
          "group.YOUR_BUNDLE_IDENTIFIER.widgets"
        ]
      }
    }
    "plugins": [
      [
        "react-native-widget-extension",
        { "frequentUpdates": true, "widgetsFolder": "widgets/ios" }
      ]
    ]
  }
}

3. Your widget folder (in my case widgets/ios) must contain expo-target.config.js:

module.exports = {
  type: "widget",
  entitlements: {
    "com.apple.security.application-groups": [
      "group.YOUR_BUNDLE_IDENTIFIER.widgets",
    ],
  },
};

4. Your widget folder must also contain an entitlements file named YOUR_WIDGET_TARGET_NAME.entitlements. In my setup, the target name was myappWidgets, where myapp is the app name set up in expo.slug inside app.json. It also looks like you could explicitly configure the widget target name using expo config, but I haven't tested that yet.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.application-groups</key>
    <array>
      <string>group.YOUR_BUNDLE_IDENTIFIER.widgets</string>
    </array>
  </dict>
</plist>

5. Run the build. EAS_LOCAL_BUILD_SKIP_CLEANUP flag was helpful when I wanted to dive into the fastlane logs:

$ EAS_LOCAL_BUILD_SKIP_CLEANUP=1 eas build --profile preview --platform ios --local --clear-cache

6. Now I was able to copy the .ipa to my iPhone and test the functionality.

Hope this helps!

[russriser]

I'm glad the moodworksinc fork is working for you!

Just a heads up, I can't guarantee it will always remain available on GitHub. So you might want to make your own fork off of it and use that instead.

I'm not planning on taking it down, but someone else at my company might in the future.

[adriaanbalt]

@alea12 I've been following your approach but have unfortunately been unable to get the project to build.

After running
$ EAS_LOCAL_BUILD_SKIP_CLEANUP=1 eas build --profile preview --platform ios --local --clear-cache
This error appears:

❌  error: Build input file cannot be found: '{PATH_TO_PROJECT}/ios/AppNameWidgets/Info.plist'. Did you forget to declare this file as an output of a script phase or custom build rule which produces it? (in target 'AppNameWidgets' from project 'AppName')

I thought that this Info.plist was generated by EAS build but it seems to running into a conflict. I tried to npx expo prebuild and review the .xcworkspace, even creating a Info.plist in AppNameWidgets but this results in a different error:

❌  error: Multiple commands produce '/Users/adriaanbalt/Library/Developer/Xcode/DerivedData/AppName-bnklqtigakumkbezfmpzsaqxqgli/Build/Products/Debug-iphonesimulator/AppNameWidgets.appex/Info.plist'

I followed exactly the steps you outlined above, integrating the forked Github repo into my existing project. I'm using EAS build workflow to develop the builds.

I have two provisioning profiles generated, one for the main app and one for the widget.

[alea12]

Hi @adriaanbalt, I've created a minimal working example of this approach.

https://github.com/alea12/react-native-expo-widget-example

Info.plist included in this repo (here) might be something you're looking for (and I've forgot to included in the reply above).

[Louisp78]

Hi @alea12, thanks for the sharing.
I have combined your example resource with the moodworksinc fork and i am using the expo custom module (instead of react-native-shared-group-preferences) described in this article : https://evanbacon.dev/blog/apple-home-screen-widgets and it finally works !

[nathan-ahn]

@fobos531 Thank you for the PR! And apologies for the delays in getting this merged in. I'm helping Benedikt out with maintaining this project, so hopefully we can get future PRs merged in a bit faster than this one 😅

I'll be continuing to test this on v0.0.6-rc release candidate branch and make any necessary modifications! I believe @russriser is correct with regards to the CODE_SIGN_ENTITLEMENTS implementation. That fix will be included in the release branch.

[Nasseratic]

@nathan-ahn sounds great, looking forward to it 😍