Skip to content
Flagship Code

plugin-target-extension

The “plugin-target-extension” package assumes a pivotal role within the Flagship Code ecosystem, meticulously crafted to streamline the process of generating a new iOS target extension. Its comprehensive functionality encompasses various crucial tasks, including the creation of essential target requirements, linking of source and resource files, and updating code-signing configurations. By automating these intricate steps, the plugin significantly simplifies the task of integrating new target extensions into iOS projects, enhancing developer productivity and ensuring consistency across the project architecture.

Install

Add @brandingbrand/code-plugin-target-extension as a development dependency to your React Native project.

Terminal window
yarn add --dev @brandingbrand/code-plugin-target-extension

Your package.json should now be updated, @brandingbrand/code-plugin-target-extension should be listed as a devDependency.

package.json
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "author": "Your Name <email@example.com>",
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "~0.72.0"
  },
  "devDependencies": {
    "@brandingbrand/code-plugin-target-extension": "2.0.0"
  }
}

Configure

Flagship Code Configuration

Upon installing the dependency, it is imperative to update the flagship-code.config.ts file. Specifically, ensure that the plugins array includes the newly installed dependency. This step is crucial, as Flagship Code will only invoke the plugin if it is listed within this array. By including the dependency in the plugins array, you enable Flagship Code to recognize and utilize the functionality provided by the plugin during project execution.

flagship-code.config.ts
import { defineConfig } from "@brandingbrand/code-cli-kit";


export default defineConfig({
  buildPath: "./coderc/build",
  envPath: "./coderc/env",
  pluginPath: "./coderc/plugins",
  plugins: [
    // other plugins
    "@brandingbrand/code-plugin-target-extension",
  ],
});

For more detailed guidance and information, please refer to the Flagship Code Configuration guide. This resource offers comprehensive instructions and insights to assist you in configuring Flagship Code effectively.

Build Configuration

Depending on the plugin being utilized, additional configuration may be required. In the case of the plugin-target-extension, it’s essential to incorporate a mandatory configuration into the build settings. This configuration involves specifying the target assets.

For the purpose of illustration, the build.internal.ts configuration shall be presented as follows:

build.internal.ts
import { defineBuild } from "@brandingbrand/code-cli-kit";
import { type CodePluginTargetExtension } from "@brandingbrand/code-plugin-target-extension";


export default defineBuild<CodePluginTargetExtension>({
  ios: {
    bundleId: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  android: {
    packageName: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  codePluginTargetExtension: {
    plugin: [
      {
        assetsPath: "./coderc/Notifications",
        bundleId: "com.brandingbrand.notifications",
        provisioningProfileName:
          "Branding Brand Notification Extension Provisioning Profile",
      },
    ],
  },
});

Options

codePluginTargetExtension.plugin

type: CodePluginTargetExtension

Optional iOS splash screen configuration.

CodePluginTargetExtension
assetsPath

type: string

required

Path to assets for the extension.

bundleId

type: string

required

Bundle identifier for the extension.

provisioningProfileName

type: string

required

Name of the provisioning profile for the extension.