Learn how to easily add a native dependency to your CapacitorJS plugin for iOS.

As always with the development of native plugins for frameworks to create hybrid applications, the documentation always assumes that we know how the tools that are used in the native side of the application work. One of these things is the way in which we add native plugins to our Swift code of the CapacitorJS plugin for iOS. For iOS, the plugin is basically a Pod for CocoaPods, the dependency manager for Swift. Dependencies can be added in the specification file of the Pod.

A specification describes a version of Pod library. It includes details about where the source should be fetched from, what files to use, the build settings to apply, and other general metadata such as its name, version, and description. In your Capacitor Plugin, you will find this file in the root directory with a name like PluginName.podspec and it looks something like this:

require 'json'

package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

Pod::Spec.new do |s|
  s.name = 'CapacitorNativeFilepicker'
  s.version = package['version']
  s.summary = package['description']
  s.license = package['license']
  s.homepage = package['repository']['url']
  s.author = package['author']
  s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
  s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
  s.ios.deployment_target  = '12.0'
  s.dependency 'Capacitor'
  s.swift_version = '5.1'
end

All you need to do is to add a new spec.dependency property for every dependency that you need in your plugin. As you can see, Capacitor itself is a required pod, so if I want to add the native Facebook login SDK in my plugin, I would simply add the dependencies like this:

require 'json'

package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

Pod::Spec.new do |s|
  # Rest of the file
  
  s.dependency 'FacebookShare'
  s.dependency 'FacebookLogin'
  s.dependency 'FacebookCore'

  # If you need to specify a version, you only need to separate it with a comma
  s.dependency 'GoogleAnalytics', '~> 1.0.0'

  # Rest of the file
end

So when the developer that installs the plugin synchronizes the project with the following command:

npx cap sync

It will basically update the iOS native dependencies with pod install:

✔ Copying web assets from dist to android/app/src/main/assets/public in 736.17ms
✔ Creating capacitor.config.json in android/app/src/main/assets in 1.56ms
✔ copy android in 748.20ms
✔ Updating Android plugins in 1.47ms
[info] Found 4 Capacitor plugins for android:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
[warn] @capacitor/[email protected] version doesn't match @capacitor/[email protected] version.
       Consider updating to a matching version, e.g. w/ npm install @capacitor/[email protected]
✔ update android in 28.47ms
✔ Copying web assets from dist to ios/App/App/public in 525.16ms
✔ Creating capacitor.config.json in ios/App/App in 223.17μp
✔ copy ios in 528.59ms
✔ Updating iOS plugins in 1.41ms
[info] Found 4 Capacitor plugins for ios:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       [email protected]
✔ Updating iOS native dependencies with pod install in 8.06s
✔ update ios in 8.07s
✔ copy web in 205.46μp
✔ update web in 160.33μp
[info] Sync finished in 9.376s

Happy coding ❤️!


Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Sponsors