feat: add nitro view template

Author: Juozas-Petkelis

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

@@ -52,7 +52,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"
@@ -91,14 +91,14 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "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": "17.0.2",
     "react-native": "0.73.0",
     "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",
@@ -112,7 +112,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 { -%>
@@ -191,7 +191,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")
 <% } -%>
 }

packages/create-react-native-library/templates/native-common/{%- project.name %}.podspec

@@ -23,7 +23,7 @@ Pod::Spec.new do |s|
 <% } else { -%>
   s.source_files = "ios/**/*.{h,m,mm}"
 <% } -%>
-<% if (project.moduleConfig === "nitro-modules") { -%>
+<% if (project.moduleConfig === "nitro-modules" || project.viewConfig === "nitro-view") { -%>
 
   load 'nitrogen/generated/ios/<%- project.name -%>+autolinking.rb'
   add_nitrogen_files(s)

packages/create-react-native-library/templates/nitro-view/android/CMakeLists.txt

@@ -0,0 +1,24 @@
+project(<%- project.package_cpp -%>)
+cmake_minimum_required(VERSION 3.9.0)
+
+set(PACKAGE_NAME <%- project.package_cpp -%>)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+set(CMAKE_CXX_STANDARD 20)
+
+# Define C++ library and add all sources
+add_library(${PACKAGE_NAME} SHARED src/main/cpp/cpp-adapter.cpp)
+
+# Add Nitrogen specs :)
+include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/<%- project.package_cpp -%>+autolinking.cmake)
+
+# Set up local includes
+include_directories("src/main/cpp" "../cpp")
+
+find_library(LOG_LIB log)
+
+# Link all libraries together
+target_link_libraries(
+        ${PACKAGE_NAME}
+        ${LOG_LIB}
+        android # <-- Android core
+)

packages/create-react-native-library/templates/nitro-view/android/src/main/cpp/cpp-adapter.cpp

@@ -0,0 +1,6 @@
+#include <jni.h>
+#include "<%- project.package_cpp -%>OnLoad.hpp"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
+  return margelo::nitro::<%- project.package_cpp -%>::initialize(vm);
+}

packages/create-react-native-library/templates/nitro-view/android/src/main/java/com/margelo/nitro/{%- project.package_dir %}/{%- project.name %}.kt

@@ -0,0 +1,23 @@
+package com.margelo.nitro.<%- project.package %>
+
+import android.view.View
+import com.facebook.proguard.annotations.DoNotStrip
+import com.facebook.react.uimanager.ThemedReactContext
+import androidx.core.graphics.toColorInt
+
+@DoNotStrip
+class Hybrid<%- project.name %>(val context: ThemedReactContext) : Hybrid<%- project.name %>Spec() {
+
+  // View
+  override val view: View = View(context)
+
+  // Props
+  private var _color = "#000"
+  override var color: String
+      get() = _color
+      set(value) {
+          _color = value
+          val color = value.toColorInt()
+          view.setBackgroundColor(color)
+      }
+}

packages/create-react-native-library/templates/nitro-view/android/src/main/java/com/{%- project.package_dir %}/{%- project.name %}Package.kt

@@ -0,0 +1,28 @@
+package com.<%- project.package %>
+
+import com.facebook.react.TurboReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+import com.margelo.nitro.<%- project.package_cpp -%>.views.Hybrid<%- project.name -%>Manager
+
+class <%- project.name -%>Package : TurboReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider { HashMap() }
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(Hybrid<%- project.name -%>Manager())
+    }
+
+    companion object {
+        init {
+            System.loadLibrary("<%- project.package_cpp -%>")
+        }
+    }
+}