Steps to use in existing project

[noman-ahmad]

I currently have an existing managed expo project, I was wondering how would I be able to use this in my existing project, without creating a new project.

[pafry7]

Hey @noman-ahmad, one of the reasons it's not a ready-to-use npm package is because I didn't have the time to finish it and test it in production. I've published this repo to show others how they can add widgets and control their state from React. In order to make it work in your project, you need to:

• Switch to the development client.
• Set up the Expo module inside your project.
• Copy the module's source code from this repo (folders ios, android, plugin, and app.plugin.js).
• Configure the plugin as stated in the README.
• Run prebuild and build the app.

If you require more guidance, please let me know. I could also prepare an example project in a separate repo.

[noman-ahmad]

Okay, so based on what you said it seems like I have to do the following:

1. Add the files and directories you mentioned to my existing project.
2. Update my app.json with the correct entitlements and group names.
3. Create a development client build to test sharing data to the widget.

The other question I had is once I have this set up, would I add the widget directly to the ios directory?

If you have time to do so, It would be nice to have an example with the plugin, an expo managed project, and a widget in the same directory.

[pafry7]

Widget files are automatically copied to ios and android folders during prebuild phase.
Sure, I will add another repo with only managed project + widget in my free time.

[pafry7]

@noman-ahmad Here is the repo: https://github.com/pafry7/widget-expo-example. Previous instructions may not have been precise.

[noman-ahmad]

Thanks man, this is awesome.

[noman-ahmad]

Hey, can we expect something like this to be able to work with eas through the eas build process? I've been trying to get it to work through the eas servers but have been struggling

To elaborate a bit more eas fails at the fastlane step and the xcode logs spit out:

_```
note: Building targets in dependency order

warning: Run script build phase '[CP-User] Generate app.config for prebuilt Constants.manifest' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'EXConstants' from project 'Pods')

/Users/expo/workingdir/build/ios/widgetexpoexample.xcodeproj: error: No profiles for 'com.example.widgetexample.widget' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.example.widgetexample.widget'. Automatic signing is disabled and unable to generate a profile. To enable automatic signing, pass -allowProvisioningUpdates to xcodebuild. (in target 'widget' from project 'widgetexpoexample')

[pafry7]

Hey, I haven't figured it out yet because we don't use EAS and the widget development has been postponed. You can try adding the iOS extension to the app.json file, as stated here: https://docs.expo.dev/build-reference/app-extensions/. Let me know if that works.

[noman-ahmad]

After adding the extension, eas build now fails on the 'Configure XCode Project" step and outputs: Could not find target 'widget' in project.pbxproj

[pafry7]

Could you share your appExtensions settings in app.json ?

[noman-ahmad]

"build": {
"experimental": {
"ios": {
"appExtensions": [
{
"targetName": "widget",
"bundleIdentifier": "com.app.widgetexample",
"entitlements": {
"com.apple.security.application-groups": ["group.com.app.widgetexample"]
}
}
]
}
}
}

I can also share my entire app.json if you need

[noman-ahmad]

Update: I was able to get it to work by putting the .widget after the bundleIdentifier. the dev client build went through eas. I haven't tested actually sharing data but the blank widget does become an option in the widget library. I will keep you updated on my progress

[alexis-delgado]

Hey guys! @noman-ahmad and @pafry7 I followed the process to add the widget to my project. It worked well when I ran locally on the simulator. But when I run the command eas build --profile development --platform ios eas returns a message that Cannot find module './plugin/build' I can missing something. Have you faced this issue before?

This is my project structure.

Eas build log

[noman-ahmad]

Try deleting the android and ios directories before running eas build, that fixed it for me.

[alexis-delgado]

@noman-ahmad I have tried, but I got the same error message. Should I remove the build/ from .gitignore?

One more thing. I'm a little confused about step 5.
_

Copy source code from modules/widget/android/src/main/java/expo/modules/widget/WidgetModule.kt, modules/widget/ios/WidgetModule.swift and modules/widget/index.ts
Copy plugin folder
Copy app.plugin.js
_

Does it mean copying those files from the repository to our modules/my-module directory that we have created with the command npx create-expo-module@latest --local or to the root project? Sorry, I'm not entirely sure about this.

[pafry7]

@alexis-delgado check if you have build folder with files inside plugin. You can check the repo https://github.com/pafry7/widget-expo-example to make sure your directories and files are correctly placed.