How to embed third party framework on ionic capacitor custom plugin?

Question

I am developing an Ionic Capacitor plugin which imports 2 iOs .framework files and a .bundle that refers to one of this .framework files. The thing is that no matter how I link/embed and point/copy this files on the plugin project, xcode claims, on the app project, that it cant find the module in the swift file.

I already tried to add the files to the project, used the "Embedded binaries" option, linked libraries, allow non-modular includes (on build options menu), add the files to the headers (on build phases), and so on....

The line that xcode point the error is:

import OneFramework

And xcode claims: No such module 'OneFramework'

I was expecting that when I add the plugin to my app project via npm, and later running a "$ rm -rf ios && ionic capacitor run ios" to run the app, xcode find all the modules of the plugin that I am trying to do.

Answer 1

I found the solution. To achieve this the first thing to know is that when you do npx @capacitor/cli plugin:generate what the CLI do for you is the generation of a cocoa pod. The root of this pod is the generated folder itself. With that in mind, the next thing to do is to learn how to make pods, but i'll sumarize the principal aspects that led me to the success.

-First of all you open the *.xcworkspace. Followed by that, click on the "Add Files to Pod..." option and add your files. Please ensure that the "Copy files if needed" option is marked. Please refer to the picture below.

-Now its nice to create a folder for your .framework and another for the .bundle (if there are any) files. Do this by right clicking the Pods project and select the option "New group". Select a name like that is different from the pattern of xcode, it is nice to know that this folders are created by you.

-If you done this right, the frameworks you recently added to the project will appear on the pods project like this:

-Now, for your swift implementation find your files, drag your .frameworks that are on the pods project for the "Frameworks, Libraries and Embedded content" of the plugin project. The result will be something like this:

-Ok, files included and linked. Now we should let our cocoa pod know about this and declare this files. The file "YourAwesomePlugin.podspec" (located at the root of the plugin project) is the main entrance of the pod. In this file you will declare which files (.frameworks, .bundle, etc) belong to your pod and consequently will belong to your plugin when you npm install it. To declare this you'll need three directives:

s.vendored_frameworks = 'ios/Pods/YourFrameworkFolder/**'
s.resource = 'ios/Pods/YourResourceFolder/YourBundle.bundle'   
s.xcconfig = {'ENABLE_BITCODE' => 'NO'} #This is mandatory on my case, but you need to evaluate if this options applies to your plugin. 

-Now we hit play on the plugin project. To test on your app if the plugin is ok, you need to add the path of the root of the plugin project on the podfile of the pods project of the APP project. Like this:

-To install it you can go on Yourproject/ios/App and run pod install.

Please note that:

To declare the existence of your recently created plugin you you need to do some declarations as well, but this part is easy and already documented on capacitor/plugin docs.

The installation method via pod install that I suggested is for testing. It would be nice if you pack your plugin using npm and npm install it like all other plugins.

I dont have much knowledge on cocoapods like I wish, but this works and I think that is a clean solution. If not, please let me know.

If this answer is useful for you, please thumbs it up, it is a week of research and trying that I am sharing, along the time to write it all down.