Skip to content

Commit 830bc59

Browse files
Juozas-Petkelissatya164
Juozas-Petkelis
and
satya164
authored
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 <[email protected]>
1 parent 147c921 commit 830bc59

File tree

21 files changed

+209
-27
lines changed

21 files changed

+209
-27
lines changed

‎.github/workflows/build-templates.yml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ jobs:
3535
language: kotlin-objc
3636
- name: nitro-module
3737
language: kotlin-swift
38+
- name: nitro-view
39+
language: kotlin-swift
3840
include:
3941
- os: ubuntu-latest
4042
type:
@@ -140,6 +142,11 @@ jobs:
140142
fi
141143
fi
142144
145+
- name: Generate nitrogen code
146+
if: matrix.type == 'nitro-view' || matrix.type == 'nitro-module'
147+
working-directory: ${{ env.work_dir }}
148+
run: yarn nitrogen
149+
143150
- name: Cache turborepo
144151
if: env.android_build == 1 || env.ios_build == 1
145152
uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export const FALLBACK_BOB_VERSION = '0.40.8';
2-
export const FALLBACK_NITRO_MODULES_VERSION = '0.25.2';
2+
export const FALLBACK_NITRO_MODULES_VERSION = '0.26.2';
33
export const SUPPORTED_REACT_NATIVE_VERSION = '0.79.2';

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,10 @@ export default async function generateExampleApp({
196196
'react-native-monorepo-config': `^0.1.9`,
197197
};
198198

199-
if (config.project.moduleConfig === 'nitro-modules') {
199+
if (
200+
config.project.moduleConfig === 'nitro-modules' ||
201+
config.project.viewConfig === 'nitro-view'
202+
) {
200203
const packagesToAddNitro = {
201204
'react-native-nitro-modules': `^${config.versions.nitro || 'latest'}`,
202205
};

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,8 @@ async function create(_argv: Args) {
7272
});
7373

7474
const bobVersion = await bobVersionPromise;
75-
7675
const nitroModulesVersion =
77-
answers.type === 'nitro-module'
76+
answers.type === 'nitro-module' || answers.type === 'nitro-view'
7877
? await nitroModulesVersionPromise
7978
: undefined;
8079

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export type ProjectType =
1414
| 'turbo-module'
1515
| 'fabric-view'
1616
| 'nitro-module'
17+
| 'nitro-view'
1718
| 'library';
1819

1920
const LANGUAGE_CHOICES: {
@@ -24,7 +25,7 @@ const LANGUAGE_CHOICES: {
2425
{
2526
title: 'Kotlin & Swift',
2627
value: 'kotlin-swift',
27-
types: ['nitro-module'],
28+
types: ['nitro-module', 'nitro-view'],
2829
},
2930
{
3031
title: 'Kotlin & Objective-C',
@@ -84,6 +85,12 @@ const TYPE_CHOICES: {
8485
description:
8586
'type-safe, fast integration for native APIs to JS (experimental)',
8687
},
88+
{
89+
title: 'Nitro view',
90+
value: 'nitro-view',
91+
description:
92+
'integration for native views to JS using nitro for prop parsing (experimental)',
93+
},
8794
{
8895
title: 'JavaScript library',
8996
value: 'library',

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type ModuleConfig =
1414
| 'nitro-modules'
1515
| null;
1616

17-
export type ViewConfig = 'paper-view' | 'fabric-view' | null;
17+
export type ViewConfig = 'paper-view' | 'fabric-view' | 'nitro-view' | null;
1818

1919
// Please think at least 5 times before introducing a new config key
2020
// You can just reuse the existing ones most of the time
@@ -76,6 +76,7 @@ const NATIVE_FILES = {
7676
module_new: path.resolve(__dirname, '../templates/native-library-new'),
7777
view_new: path.resolve(__dirname, '../templates/native-view-new'),
7878
module_nitro: path.resolve(__dirname, '../templates/nitro-module'),
79+
view_nitro: path.resolve(__dirname, '../templates/nitro-view'),
7980
} as const;
8081

8182
const OBJC_FILES = {
@@ -155,6 +156,7 @@ function getModuleConfig(projectType: ProjectType): ModuleConfig {
155156
return 'turbo-modules';
156157
case 'fabric-view':
157158
case 'library':
159+
case 'nitro-view':
158160
return null;
159161
}
160162
}
@@ -163,9 +165,12 @@ function getViewConfig(projectType: ProjectType): ViewConfig {
163165
switch (projectType) {
164166
case 'fabric-view':
165167
return 'fabric-view';
168+
case 'nitro-view':
169+
return 'nitro-view';
166170
case 'nitro-module':
167171
case 'turbo-module':
168172
case 'library':
173+
default:
169174
return null;
170175
}
171176
}
@@ -208,6 +213,11 @@ export async function applyTemplates(
208213
return;
209214
}
210215

216+
if (config.project.viewConfig === 'nitro-view') {
217+
await applyTemplate(config, NATIVE_FILES['view_nitro'], folder);
218+
return;
219+
}
220+
211221
if (config.project.moduleConfig !== null) {
212222
await applyTemplate(config, NATIVE_FILES[`module_new`], folder);
213223
} else {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ jobs:
6161

6262
- name: Setup
6363
uses: ./.github/actions/setup
64-
<% if (project.moduleConfig === 'nitro-modules') { -%>
64+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
6565

6666
- name: Generate nitrogen code
6767
run: yarn nitrogen
@@ -123,7 +123,7 @@ jobs:
123123

124124
- name: Setup
125125
uses: ./.github/actions/setup
126-
<% if (project.moduleConfig === 'nitro-modules') { -%>
126+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
127127

128128
- name: Generate nitrogen code
129129
run: yarn nitrogen

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"clean": "del-cli lib",
4949
<% } -%>
5050
"prepare": "bob build",
51-
<% if (project.moduleConfig === 'nitro-modules') { -%>
51+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
5252
"nitrogen": "nitro-codegen",
5353
<% } -%>
5454
"release": "release-it --only-version"
@@ -91,14 +91,14 @@
9191
"eslint-config-prettier": "^10.1.1",
9292
"eslint-plugin-prettier": "^5.2.3",
9393
"jest": "^29.7.0",
94-
<% if (project.moduleConfig === 'nitro-modules') { -%>
94+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
9595
"nitro-codegen": "^<%- versions.nitro %>",
9696
<% } -%>
9797
"prettier": "^3.0.3",
9898
"react": "19.0.0",
9999
"react-native": "0.78.1",
100100
"react-native-builder-bob": "^<%- versions.bob %>",
101-
<% if (project.moduleConfig === 'nitro-modules') { -%>
101+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
102102
"react-native-nitro-modules": "^<%- versions.nitro %>",
103103
<% } -%>
104104
"release-it": "^17.10.0",
@@ -109,7 +109,7 @@
109109
},
110110
"peerDependencies": {
111111
"react": "*",
112-
<% if (project.moduleConfig === 'nitro-modules') { -%>
112+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
113113
"react-native": "*",
114114
"react-native-nitro-modules": "^<%- versions.nitro %>"
115115
<% } else { -%>
@@ -164,7 +164,7 @@
164164
"source": "src",
165165
"output": "lib",
166166
"targets": [
167-
<% if (project.moduleConfig === "nitro-modules") { -%>
167+
<% if (project.moduleConfig === "nitro-modules" || project.viewConfig === "nitro-view") { -%>
168168
[
169169
"custom",
170170
{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ yarn
1919

2020
> Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development.
2121
22-
<% if (project.moduleConfig === 'nitro-modules') { -%>
22+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
2323
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/).
2424

2525
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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@
44

55
## Installation
66

7-
<% if (project.moduleConfig === 'nitro-modules') { -%>
7+
<% if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view') { -%>
8+
89
```sh
910
npm install <%- project.slug %> react-native-nitro-modules
1011

1112
> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
1213
```
14+
1315
<% } else { -%>
16+
1417
```sh
1518
npm install <%- project.slug %>
1619
```
20+
1721
<% } -%>
1822

1923
## Usage
@@ -28,7 +32,7 @@ import { <%- project.name -%>View } from "<%- project.slug -%>";
2832
<<%- project.name -%>View color="tomato" />
2933
```
3034

31-
<% } else if (project.moduleConfig === 'nitro-modules' || project.moduleConfig === 'turbo-modules') { -%>
35+
<% } else if (project.moduleConfig === 'nitro-modules' || project.viewConfig === 'nitro-view' || project.moduleConfig === 'turbo-modules') { -%>
3236

3337
```js
3438
import { multiply } from '<%- project.slug -%>';

0 commit comments

Comments
 (0)