How to Embed Third Party Framework on Ionic Capacitor Custom Plugin

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

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.

How to use third party javascript library with ionic4 and capacitor?

Open angular.json and add script into scripts section.

"scripts": [
  "../node_modules/crunker/dist/crunker.js"
]

Important thing is to do npx cap copy after rebuild project

How to properly reference an iOS 3rd party framework in Ionic/Cordova build so it doesn't throw dyld: Library not loaded: @rpath error

Finally figured it out.

  <platform name="ios">
    <config-file parent="/*" target="config.xml">
        <feature name="MyCustomPlugin">
            <param name="ios-package" value="MyCustomPlugin"/>
        </feature>
    </config-file>
    <source-file src="src/ios/MyCustomPlugin.m"/>
    <source-file src="src/ios/MyCustomPlugin.framework" target-dir="lib" framework="true" />
    <framework src="src/ios/MyCustomPlugin.framework" embed="true" custom="true" />
    <header-file src="src/ios/MyCustomPlugin.framework/Headers/MobileAPI.h" target-dir="MyCustomPlugin" />
 </platform>

How to register a local Ionic Capacitor plugin

You dont need to publish on npm to install it. You could do "npm pack" on your plugin folder and later on your app folder "npm install ../my-package/my-package-0.0.1.tgz"

Also, I answered a similar questions about making plugins. Please look:

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

How to embed an Android library (AAR file) into a capacitor plugin?

how can i install the plugin cordova-plugin-iosrtc on a ionic capacitor project

Finally i found the solution.
the iosrtc plugins works with capacitor with this part in your podfile :

def disable_bitcode_for_target(target)
  target.build_configurations.each do |config|
    config.build_settings['ENABLE_BITCODE'] = 'NO'

    remove_cflags_matching(config.build_settings, ['-fembed-bitcode', '-fembed-bitcode-marker'])
  end
end

def remove_cflags_matching(build_settings, cflags)
  existing_cflags = build_settings['OTHER_CFLAGS']

  removed_cflags = []
  if !existing_cflags.nil?
    cflags.each do |cflag|
      existing_cflags.delete_if { |existing_cflag| existing_cflag == cflag && removed_cflags << cflag }
    end
  end

  if removed_cflags.length > 0
    build_settings['OTHER_CFLAGS'] = existing_cflags
  end
end



post_install do |installer|
  project_name = Dir.glob("*.xcodeproj").first
  project = Xcodeproj::Project.open(project_name)
  project.targets.each do |target|
    disable_bitcode_for_target(target)
  end
  project.save

  installer.pods_project.targets.each do |target|
    disable_bitcode_for_target(target)
  end

  installer.pods_project.save
end

If that can help someone :)

---

Related Topics