Skip to content
Flagship Code

plugin-asset

The “plugin-asset” package holds pivotal significance within the Flagship Code ecosystem, strategically engineered to optimize the integration of assets into native iOS and Android projects. A fundamental illustration of its utility lies in managing assets like fonts, which must be incorporated into native projects to enable their utilization. This plugin excels in automating the linking process, sparing developers the intricacies of manual configuration. By seamlessly integrating asset linking, it empowers developers to streamline their workflow, enhancing efficiency and productivity while ensuring seamless asset utilization across platforms.

Install

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

Terminal window
yarn add --dev @brandingbrand/code-plugin-asset

Your package.json should now be updated, @brandingbrand/code-plugin-asset 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-asset": "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-asset",
  ],
});

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, there might be additional configuration required. Specifically, for the plugin-asset, additional build configuration is necessary to locate app assets. An exemplary type of app asset could be font files. The plugin configuration provides a list of directories where these assets are stored.

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 CodePluginAsset } from "@brandingbrand/code-plugin-asset";


export default defineBuild<CodePluginAsset>({
  ios: {
    bundleId: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  android: {
    packageName: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  codePluginAsset: {
    plugin: {
      assetPath: ["./coderc/assets/fonts"],
    },
  },
});

The layout of assets directory will take the following form:

├── Roboto-Black.ttf
├── Roboto-BlackItalic.ttf
├── Roboto-Bold.ttf
├── Roboto-BoldItalic.ttf
├── Roboto-Italic.ttf
├── Roboto-Light.ttf
├── Roboto-LightItalic.ttf
├── Roboto-Medium.ttf
├── Roboto-MediumItalic.ttf
├── Roboto-Regular.ttf
├── Roboto-Thin.ttf
└── Roboto-ThinItalic.ttf

Options

assetsPath

type: string[]

required

An array of paths relative to the root of the project is expected, containing assets that require linking to your native iOS and Android projects.