macOS, Mobile Resource

Adding CocoaPods Dependencies to CapacitorJS iOS Plugins: A Guide

Posted on by Thao Nguyen

Learn how easy it is to add native dependencies to the CapacitorJS plugin for iOS.

As with developing native plugins for frameworks to create hybrid applications, documentation always assumes that we know how the tools used on the native side of the application work. One of them is the way we add a native plugin to the Swift code of the CapacitorJS plugin for iOS. For iOS, the plugin is basically a Pod for CocoaPods, a dependency manager for Swift. You can add dependencies to the pod’s specification file.

How does the iOS CapacitorJS plugin add CocoaPods dependencies? The specification describes a version of the pod library. It includes details about where the source should be obtained, the files to be used, the build settings to be applied, and other general metadata such as its name, version, and description. In your Capacitor Plugin, you’ll find this file in the root directory, it has a name like this, and it looks like this:PluginName.podspec

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

How the iOS CapacitorJS plugin adds CocoaPods dependencies: All you need to do is add a new property for each dependency you need in the plugin. As you can see, Capacitor itself is a required pod, so if I want to add the native Facebook login SDK to my plugin, I can simply add the following dependencies:spec.dependency

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 installing the plugin syncs the project with the following command:

npx cap sync

It will basically update the iOS native dependencies: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/app@1.0.2
       @capacitor/clipboard@1.0.2
       @capacitor/filesystem@1.0.2
[warn] @capacitor/core@3.2.0 version doesn't match @capacitor/android@3.1.2 version.
       Consider updating to a matching version, e.g. w/ npm install @capacitor/core@3.1.2
✔ 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/app@1.0.2
       @capacitor/clipboard@1.0.2
       @capacitor/filesystem@1.0.2
       capacitor-native-filepicker@0.0.1
✔ 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 ❤️!

Thao Nguyen