Skip to content
Flagship Code

plugin-native-navigation

The “plugin-native-navigation” package serves as an indispensable plugin within the Flagship Code ecosystem, meticulously engineered to facilitate the seamless generation of native code in adherence to the stringent native code requirements imposed by react-native-navigation. This plugin is strategically crafted to alleviate the complexities associated with maintaining compliance, ensuring smooth integration with react-native-navigation. Notably, the package includes react-native-navigation as a peer dependency, acknowledging React Native’s prerequisite for linked native packages to be dependencies in the root project’s package.json. This design decision ensures compatibility and facilitates seamless integration, allowing developers to leverage the full potential of react-native-navigation while adhering to best practices in React Native development.

Install

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

Terminal window
yarn add --dev @brandingbrand/code-plugin-native-navigation
yarn add react-native-navigation

Your package.json should now be updated, @brandingbrand/code-plugin-native-navigation 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"
  },
  "dependencies": {
    "react-native-navigation": "7.37.2"
  },
  "devDependencies": {
    "@brandingbrand/code-plugin-native-navigation": "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-native-navigation",
  ],
});

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.