feat: option to add nitro views

.github/workflows/build-templates.yml

@@ -35,6 +35,7 @@ jobs:
           - legacy-module
           - legacy-view
           - nitro-module
+          - nitro-view
         language:
           - kotlin-objc
           - kotlin-swift
@@ -52,6 +53,10 @@ jobs:
             language: kotlin-objc
           - type: nitro-module
             language: cpp
+          - type: nitro-view
+            language: kotlin-objc
+          - type: nitro-view
+            language: cpp
         include:
           - os: ubuntu
             type: library
@@ -147,6 +152,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@v4

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

@@ -180,7 +180,10 @@ export default async function generateExampleApp({
     'react-native-builder-bob': `^${config.versions.bob}`,
   };
 
-  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.nitroModules}`,
     };
@@ -296,6 +299,76 @@ export default async function generateExampleApp({
       }
     }
 
+    // nitro modules on xcode 16.2 requires ios 16 version because of the bug https://github.com/swiftlang/swift/issues/77909
+    // full thread in https://github.com/mrousavy/nitro/issues/422
+    if (
+      config.project.viewConfig === 'nitro-view' ||
+      config.project.moduleConfig === 'nitro-modules'
+    ) {
+      const newTargetVersion = 16.0;
+
+      const podfile = await fs.readFile(
+        path.join(directory, 'ios', 'Podfile'),
+        'utf8'
+      );
+
+      const postInstallLine = 'post_install do |installer|';
+      // set pods deployement min version
+      const podVersionOverride = `
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '${newTargetVersion}'
+      end
+    end
+    `;
+
+      const insertionIndex = podfile.indexOf(postInstallLine);
+
+      if (insertionIndex !== -1) {
+        const endOfMarkerLineIndex = podfile.indexOf('\n', insertionIndex);
+
+        if (endOfMarkerLineIndex !== -1) {
+          const updatedPodfileContent =
+            podfile.slice(0, endOfMarkerLineIndex) +
+            podVersionOverride +
+            podfile.slice(endOfMarkerLineIndex);
+
+          await fs.writeFile(
+            path.join(directory, 'ios', 'Podfile'),
+            updatedPodfileContent
+          );
+        }
+      }
+
+      // set project deployement min version
+      const project = await fs.readFile(
+        path.join(
+          directory,
+          `ios/${config.project.name}Example.xcodeproj`,
+          'project.pbxproj'
+        ),
+        'utf8'
+      );
+
+      // match whole IPHONEOS_DEPLOYMENT_TARGET line
+      const deployementLineRegex =
+        /^(\s*)IPHONEOS_DEPLOYMENT_TARGET\s*=\s*[^;]+;$/gm;
+      const replacementPattern = `$1IPHONEOS_DEPLOYMENT_TARGET = ${newTargetVersion};`;
+      const updatedContent = project.replace(
+        deployementLineRegex,
+        replacementPattern
+      );
+
+      await fs.writeFile(
+        path.join(
+          directory,
+          `ios/${config.project.name}Example.xcodeproj`,
+          'project.pbxproj'
+        ),
+        updatedContent
+      );
+    }
+
     await fs.writeFile(
       path.join(directory, 'android', 'gradle.properties'),
       gradleProperties

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

@@ -21,7 +21,7 @@ import { prompt } from './utils/prompt';
 import { resolveNpmPackageVersion } from './utils/resolveNpmPackageVersion';
 
 const FALLBACK_BOB_VERSION = '0.38.3';
-const FALLBACK_NITRO_MODULES_VERSION = '0.22.1';
+const FALLBACK_NITRO_MODULES_VERSION = '0.25.2';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
 yargs
@@ -75,9 +75,8 @@ async function create(_argv: yargs.Arguments<Args>) {
   assertUserInput(questions, answers);
 
   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

@@ -26,6 +26,7 @@ export type ProjectType =
   | 'legacy-module'
   | 'legacy-view'
   | 'nitro-module'
+  | 'nitro-view'
   | 'library';
 
 const LANGUAGE_CHOICES: {
@@ -36,7 +37,7 @@ const LANGUAGE_CHOICES: {
   {
     title: 'Kotlin & Swift',
     value: 'kotlin-swift',
-    types: ['nitro-module', 'legacy-module', 'legacy-view'],
+    types: ['nitro-view', 'nitro-module', 'legacy-module', 'legacy-view'],
   },
   {
     title: 'Kotlin & Objective-C',
@@ -101,6 +102,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: 'Legacy Native module',
     value: 'legacy-module',

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

@@ -20,7 +20,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
@@ -90,6 +90,7 @@ const NATIVE_FILES = {
   view_legacy: path.resolve(__dirname, '../templates/native-view-legacy'),
   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 = {
@@ -195,6 +196,8 @@ function getViewConfig(projectType: ProjectType): ViewConfig {
       return 'paper-view';
     case 'fabric-view':
       return 'fabric-view';
+    case 'nitro-view':
+      return 'nitro-view';
     default:
       return null;
   }
@@ -241,6 +244,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,

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
@@ -122,7 +122,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

@@ -53,7 +53,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"
@@ -95,14 +95,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.nitroCodegen %>",
 <% } -%>
     "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.nitroModules %>",
 <% } -%>
     "release-it": "^17.10.0",
@@ -113,7 +113,7 @@
   },
   "peerDependencies": {
     "react": "*",
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
     "react-native": "*",
     "react-native-nitro-modules": "^<%- versions.nitroModules %>"
 <% } else { -%>
@@ -168,7 +168,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

@@ -18,13 +18,14 @@ 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.
 
 Run **Nitrogen** in following cases:
+
 - When you make changes to any `*.nitro.ts` files.
 - When running the project for the first time (since the generated files are not committed to the repository).
 
@@ -33,6 +34,7 @@ To invoke **Nitrogen**, use the following command:
 ```sh
 yarn nitrogen
 ```
+
 <% } -%>
 
 The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.

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 -%>';

packages/create-react-native-library/templates/native-common/android/build.gradle

@@ -15,7 +15,7 @@ buildscript {
   }
 }
 
-<% if (project.cpp || project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.cpp || project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 def reactNativeArchitectures() {
   def value = rootProject.getProperties().get("reactNativeArchitectures")
   return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
@@ -24,7 +24,7 @@ def reactNativeArchitectures() {
 
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 apply from: '../nitrogen/generated/android/<%- project.package_cpp -%>+autolinking.gradle'
 <% } -%>
 
@@ -47,7 +47,7 @@ def supportsNamespace() {
 
 android {
   if (supportsNamespace()) {
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
     namespace "com.margelo.nitro.<%- project.package -%>"
 <% } else { -%>
     namespace "com.<%- project.package -%>"
@@ -68,7 +68,7 @@ android {
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-<% if (project.cpp || project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.cpp || project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 
     externalNativeBuild {
       cmake {
@@ -88,15 +88,15 @@ android {
     }
 <% } -%>
   }
-<% if (project.cpp || project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.cpp || project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 
   externalNativeBuild {
     cmake {
       path "CMakeLists.txt"
     }
   }
 <% } -%>
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
 
   packagingOptions {
     excludes = [
@@ -123,7 +123,7 @@ android {
 
   buildFeatures {
     buildConfig true
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
     prefab true
 <% } -%>
   }
@@ -166,7 +166,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-<% if (project.moduleConfig === 'nitro-modules') { -%>
+<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
   implementation project(":react-native-nitro-modules")
 <% } -%>
 }