feat: add option to create nitro views (#805)

### Summary * Introduces the option to add a [Nitro View Component](https://nitro.margelo.com/docs/view-components) when scaffolding a new library with `create-react-native-library`. <details> <summary>Nitro View selection during setup</summary> <img src="https://github.com/user-attachments/assets/c9fc0a79-b499-4404-9d9a-cd0b7e15d8e4" alt="Nitro view selection" height="200"> </details> * Updated the fallback Nitro Modules version to `0.26.2 ` ### Test plan 1. clone branch 2. create new library with `bin/create-react-native-library` 3. generate nitrogen `yarn nitro-codegen` and build example app for both platforms <details> <summary>Example App</summary> | iOS Screenshot | Android Screenshot | |---|---| | <img src="https://github.com/user-attachments/assets/ad59d220-c7aa-444a-a42b-5b643b8a48aa" alt="iOS Screenshot" width="300"> | <img src="https://github.com/user-attachments/assets/3d824e20-8e04-47d2-886d-171decc9f569" alt="Android Screenshot" width="300"> | </details> <!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. --> --------- Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

Author: Juozas-Petkelis

.github/workflows/build-templates.yml

@@ -35,6 +35,8 @@ jobs:
  language: kotlin-objc
  - name: nitro-module
  language: kotlin-swift
+ - name: nitro-view
+ language: kotlin-swift
  include:
  - os: ubuntu-latest
  type:
@@ -140,6 +142,11 @@ jobs:
  fi
  fi
 
+ - name: Generate nitrogen code
+ if: matrix.type == 'nitro-view' || matrix.type == 'nitro-module'
+ working-directory: ${{ env.work_dir }}
+ run: yarn nitrogen
+
  - name: Cache turborepo
  if: env.android_build == 1 || env.ios_build == 1
  uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3

packages/create-react-native-library/src/constants.ts

@@ -1,3 +1,3 @@
 export const FALLBACK_BOB_VERSION = '0.40.8';
-export const FALLBACK_NITRO_MODULES_VERSION = '0.25.2';
+export const FALLBACK_NITRO_MODULES_VERSION = '0.26.2';
 export const SUPPORTED_REACT_NATIVE_VERSION = '0.79.2';

packages/create-react-native-library/src/exampleApp/generateExampleApp.ts

@@ -196,7 +196,10 @@ export default async function generateExampleApp({
  'react-native-monorepo-config': `^0.1.9`,
  };
 
- if (config.project.moduleConfig === 'nitro-modules') {
+ if (
+ config.project.moduleConfig === 'nitro-modules' ||
+ config.project.viewConfig === 'nitro-view'
+ ) {
  const packagesToAddNitro = {
  'react-native-nitro-modules': `^${config.versions.nitro || 'latest'}`,
  };

packages/create-react-native-library/src/index.ts

@@ -72,9 +72,8 @@ async function create(_argv: Args) {
  });
 
  const bobVersion = await bobVersionPromise;
-
  const nitroModulesVersion =
- answers.type === 'nitro-module'
+ answers.type === 'nitro-module' || answers.type === 'nitro-view'
  ? await nitroModulesVersionPromise
  : undefined;
 

packages/create-react-native-library/src/input.ts

@@ -14,6 +14,7 @@ export type ProjectType =
  | 'turbo-module'
  | 'fabric-view'
  | 'nitro-module'
+ | 'nitro-view'
  | 'library';
 
 const LANGUAGE_CHOICES: {
@@ -24,7 +25,7 @@ const LANGUAGE_CHOICES: {
  {
  title: 'Kotlin & Swift',
  value: 'kotlin-swift',
- types: ['nitro-module'],
+ types: ['nitro-module', 'nitro-view'],
  },
  {
  title: 'Kotlin & Objective-C',
@@ -84,6 +85,12 @@ const TYPE_CHOICES: {
  description:
  'type-safe, fast integration for native APIs to JS (experimental)',
  },
+ {
+ title: 'Nitro view',
+ value: 'nitro-view',
+ description:
+ 'integration for native views to JS using nitro for prop parsing (experimental)',
+ },
  {
  title: 'JavaScript library',
  value: 'library',

packages/create-react-native-library/src/template.ts

@@ -14,7 +14,7 @@ export type ModuleConfig =
  | 'nitro-modules'
  | null;
 
-export type ViewConfig = 'paper-view' | 'fabric-view' | null;
+export type ViewConfig = 'paper-view' | 'fabric-view' | 'nitro-view' | null;
 
 // Please think at least 5 times before introducing a new config key
 // You can just reuse the existing ones most of the time
@@ -76,6 +76,7 @@ const NATIVE_FILES = {
  module_new: path.resolve(__dirname, '../templates/native-library-new'),
  view_new: path.resolve(__dirname, '../templates/native-view-new'),
  module_nitro: path.resolve(__dirname, '../templates/nitro-module'),
+ view_nitro: path.resolve(__dirname, '../templates/nitro-view'),
 } as const;
 
 const OBJC_FILES = {
@@ -155,6 +156,7 @@ function getModuleConfig(projectType: ProjectType): ModuleConfig {
  return 'turbo-modules';
  case 'fabric-view':
  case 'library':
+ case 'nitro-view':
  return null;
  }
 }
@@ -163,9 +165,12 @@ function getViewConfig(projectType: ProjectType): ViewConfig {
  switch (projectType) {
  case 'fabric-view':
  return 'fabric-view';
+ case 'nitro-view':
+ return 'nitro-view';
  case 'nitro-module':
  case 'turbo-module':
  case 'library':
+ default:
  return null;
  }
 }
@@ -208,6 +213,11 @@ export async function applyTemplates(
  return;
  }
 
+ if (config.project.viewConfig === 'nitro-view') {
+ await applyTemplate(config, NATIVE_FILES['view_nitro'], folder);
+ return;
+ }
+
  if (config.project.moduleConfig !== null) {
  await applyTemplate(config, NATIVE_FILES[`module_new`], folder);
  } else {

packages/create-react-native-library/templates/common/$.github/workflows/ci.yml

@@ -61,7 +61,7 @@ jobs:
 
  - name: Setup
  uses: ./.github/actions/setup
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 
  - name: Generate nitrogen code
  run: yarn nitrogen
@@ -123,7 +123,7 @@ jobs:
 
  - name: Setup
  uses: ./.github/actions/setup
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 
  - name: Generate nitrogen code
  run: yarn nitrogen

packages/create-react-native-library/templates/common/$package.json

@@ -48,7 +48,7 @@
  "clean": "del-cli lib",
 <% } -%>
  "prepare": "bob build",
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
  "nitrogen": "nitro-codegen",
 <% } -%>
  "release": "release-it --only-version"
@@ -91,14 +91,14 @@
  "eslint-config-prettier": "^10.1.1",
  "eslint-plugin-prettier": "^5.2.3",
  "jest": "^29.7.0",
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
  "nitro-codegen": "^<%- versions.nitro %>",
 <% } -%>
  "prettier": "^3.0.3",
  "react": "19.0.0",
  "react-native": "0.78.1",
  "react-native-builder-bob": "^<%- versions.bob %>",
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
  "react-native-nitro-modules": "^<%- versions.nitro %>",
 <% } -%>
  "release-it": "^17.10.0",
@@ -109,7 +109,7 @@
  },
  "peerDependencies": {
  "react": "*",
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
  "react-native": "*",
  "react-native-nitro-modules": "^<%- versions.nitro %>"
 <% } else { -%>
@@ -164,7 +164,7 @@
  "source": "src",
  "output": "lib",
  "targets": [
-<% if (project.moduleConfig === "nitro-modules") { -%>
+<% if (project.moduleConfig === "nitro-modules" || project.viewConfig === "nitro-view") { -%>
  [
  "custom",
  {

packages/create-react-native-library/templates/common/CONTRIBUTING.md

@@ -19,7 +19,7 @@ yarn
 
 > Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development.
 
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 This project uses Nitro Modules. If you're not familiar with how Nitro works, make sure to check the [Nitro Modules Docs](https://nitro.margelo.com/).
 
 You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project. The example app will not build without this step.

packages/create-react-native-library/templates/common/README.md

@@ -4,16 +4,20 @@
 
 ## Installation
 
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
+
 ```sh
 npm install <%- project.slug %> react-native-nitro-modules
 
 > `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
 ```
+
 <% } else { -%>
+
 ```sh
 npm install <%- project.slug %>
 ```
+
 <% } -%>
 
 ## Usage
@@ -28,7 +32,7 @@ import { <%- project.name -%>View } from "<%- project.slug -%>";
 <<%- project.name -%>View color="tomato" />
 ```
 
-<% } else if (project.moduleConfig === 'nitro-modules' || project.moduleConfig === 'turbo-modules') { -%>
+<% } else if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view' || project.moduleConfig === 'turbo-modules') { -%>
 
 ```js
 import { multiply } from '<%- project.slug -%>';