Skip to content

Commit 1a31210

Browse files
borisyankovborisyankov
committed
[WIP] feat: add NativeWind plugin
1 parent 6a210ed commit 1a31210

25 files changed

+1013
-19
lines changed

‎.npmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
auto-install-peers=false
22
link-workspace-packages=true
3-
package-manager-strict-version=true
3+
package-manager-strict-version=false
44
update-notifier=false

‎apps/tester-app/.ruby-version

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.7.6
1+
system

‎apps/tester-app/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import { AppRegistry } from 'react-native';
44
import { name as appName } from './app.json';
55
import App from './src/App';
66

7-
ScriptManager.shared.setStorage(AsyncStorage);
7+
if (!__DEV__) {
8+
ScriptManager.shared.setStorage(AsyncStorage);
9+
}
10+
811
ScriptManager.shared.addResolver((scriptId, _caller) => {
912
if (__DEV__) {
1013
return {

‎apps/tester-app/ios/Podfile.lock

+72-2
Original file line numberDiff line numberDiff line change
@@ -1266,6 +1266,72 @@ PODS:
12661266
- ReactCommon/turbomodule/bridging
12671267
- ReactCommon/turbomodule/core
12681268
- Yoga
1269+
- react-native-safe-area-context (4.14.0):
1270+
- DoubleConversion
1271+
- glog
1272+
- hermes-engine
1273+
- RCT-Folly (= 2024.01.01.00)
1274+
- RCTRequired
1275+
- RCTTypeSafety
1276+
- React-Core
1277+
- React-debug
1278+
- React-Fabric
1279+
- React-featureflags
1280+
- React-graphics
1281+
- React-ImageManager
1282+
- react-native-safe-area-context/common (= 4.14.0)
1283+
- react-native-safe-area-context/fabric (= 4.14.0)
1284+
- React-NativeModulesApple
1285+
- React-RCTFabric
1286+
- React-rendererdebug
1287+
- React-utils
1288+
- ReactCodegen
1289+
- ReactCommon/turbomodule/bridging
1290+
- ReactCommon/turbomodule/core
1291+
- Yoga
1292+
- react-native-safe-area-context/common (4.14.0):
1293+
- DoubleConversion
1294+
- glog
1295+
- hermes-engine
1296+
- RCT-Folly (= 2024.01.01.00)
1297+
- RCTRequired
1298+
- RCTTypeSafety
1299+
- React-Core
1300+
- React-debug
1301+
- React-Fabric
1302+
- React-featureflags
1303+
- React-graphics
1304+
- React-ImageManager
1305+
- React-NativeModulesApple
1306+
- React-RCTFabric
1307+
- React-rendererdebug
1308+
- React-utils
1309+
- ReactCodegen
1310+
- ReactCommon/turbomodule/bridging
1311+
- ReactCommon/turbomodule/core
1312+
- Yoga
1313+
- react-native-safe-area-context/fabric (4.14.0):
1314+
- DoubleConversion
1315+
- glog
1316+
- hermes-engine
1317+
- RCT-Folly (= 2024.01.01.00)
1318+
- RCTRequired
1319+
- RCTTypeSafety
1320+
- React-Core
1321+
- React-debug
1322+
- React-Fabric
1323+
- React-featureflags
1324+
- React-graphics
1325+
- React-ImageManager
1326+
- react-native-safe-area-context/common
1327+
- React-NativeModulesApple
1328+
- React-RCTFabric
1329+
- React-rendererdebug
1330+
- React-utils
1331+
- ReactCodegen
1332+
- ReactCommon/turbomodule/bridging
1333+
- ReactCommon/turbomodule/core
1334+
- Yoga
12691335
- React-nativeconfig (0.76.3)
12701336
- React-NativeModulesApple (0.76.3):
12711337
- glog
@@ -1756,6 +1822,7 @@ DEPENDENCIES:
17561822
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
17571823
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
17581824
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
1825+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
17591826
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
17601827
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
17611828
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1871,6 +1938,8 @@ EXTERNAL SOURCES:
18711938
:path: "../node_modules/react-native/ReactCommon"
18721939
React-microtasksnativemodule:
18731940
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
1941+
react-native-safe-area-context:
1942+
:path: "../node_modules/react-native-safe-area-context"
18741943
React-nativeconfig:
18751944
:path: "../node_modules/react-native/ReactCommon"
18761945
React-NativeModulesApple:
@@ -1978,6 +2047,7 @@ SPEC CHECKSUMS:
19782047
React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
19792048
React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
19802049
React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
2050+
react-native-safe-area-context: 2500e4fe998caad50ad3bc51ec23ef951308569e
19812051
React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
19822052
React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
19832053
React-perflogger: 6afb7eebf7d9521cc70481688ccddf212970e9d3
@@ -2013,8 +2083,8 @@ SPEC CHECKSUMS:
20132083
RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
20142084
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
20152085
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
2016-
Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
2086+
Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
20172087

20182088
PODFILE CHECKSUM: 591811811bdab95f1675c6871b0554706bf77020
20192089

2020-
COCOAPODS: 1.15.2
2090+
COCOAPODS: 1.16.2

‎apps/tester-app/nativewind-env.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="nativewind/types" />
2+
3+
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

‎apps/tester-app/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,18 @@
1818
},
1919
"dependencies": {
2020
"@react-native-async-storage/async-storage": "^1.23.1",
21+
"nativewind": "^4.1.23",
2122
"react": "18.3.1",
2223
"react-native": "0.76.3",
2324
"react-native-reanimated": "^3.16.3",
24-
"react-native-svg": "15.8.0"
25+
"react-native-safe-area-context": "^4.14.0",
26+
"react-native-svg": "15.8.0",
27+
"tailwindcss": "^3.4.17"
2528
},
2629
"devDependencies": {
2730
"@babel/core": "^7.25.2",
2831
"@callstack/repack": "workspace:*",
32+
"@callstack/repack-plugin-nativewind": "workspace:*",
2933
"@callstack/repack-plugin-reanimated": "workspace:*",
3034
"@react-native-community/cli": "15.0.1",
3135
"@react-native-community/cli-platform-android": "15.0.1",

‎apps/tester-app/rspack.config.mjs

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { createRequire } from 'node:module';
33
import path from 'node:path';
44
import * as Repack from '@callstack/repack';
5+
import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
56
import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
67
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
78

@@ -73,6 +74,7 @@ export default (env) => {
7374
transform: {
7475
react: {
7576
runtime: 'automatic',
77+
importSource: 'react-native-css-interop',
7678
},
7779
},
7880
},
@@ -197,6 +199,13 @@ export default (env) => {
197199
// }),
198200
process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
199201
new ReanimatedPlugin(),
202+
new NativeWindPlugin({
203+
input: './src/nativewind/global.css',
204+
}),
200205
].filter(Boolean),
206+
207+
experiments: {
208+
css: true,
209+
},
201210
};
202211
};

‎apps/tester-app/src/App.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { Appearance } from 'react-native';
22

3-
import { AppContainer } from './ui/AppContainer';
4-
import { Section } from './ui/Section';
5-
import { SectionContainer } from './ui/SectionContainer';
6-
3+
import { verifyInstallation } from 'nativewind';
74
import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
85
import { AsyncContainer } from './asyncChunks/AsyncContainer';
96
import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
7+
import { NativeWindView } from './nativewind/NativeWindView';
108
import { ReanimatedBox } from './reanimated/ReanimatedBox';
119
import { RemoteContainer } from './remoteChunks/RemoteContainer';
10+
import { AppContainer } from './ui/AppContainer';
11+
import { Section } from './ui/Section';
12+
import { SectionContainer } from './ui/SectionContainer';
1213

1314
Appearance.setColorScheme('light');
1415

1516
const App = () => {
17+
verifyInstallation();
1618
return (
1719
<AppContainer>
1820
<SectionContainer>
@@ -31,6 +33,9 @@ const App = () => {
3133
<Section title="Reanimated test">
3234
<ReanimatedBox />
3335
</Section>
36+
<Section title="NativeWind test">
37+
<NativeWindView />
38+
</Section>
3439
</SectionContainer>
3540
</AppContainer>
3641
);

‎apps/tester-app/src/nativewind/NativeWindView.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { StyleSheet, Text, View } from 'react-native';
2+
3+
import './global.css';
4+
5+
export function NativeWindView() {
6+
return (
7+
<View style={styles.container}>
8+
<View className="bg-red-500">
9+
<Text className="text-white">Hello, World!</Text>
10+
</View>
11+
</View>
12+
);
13+
}
14+
15+
const styles = StyleSheet.create({
16+
container: {
17+
flex: 1,
18+
alignItems: 'center',
19+
marginVertical: 16,
20+
},
21+
});

‎apps/tester-app/src/nativewind/global.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎apps/tester-app/tailwind.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./src/*.{js,jsx,ts,tsx}'],
4+
presets: [require('nativewind/preset')],
5+
theme: {
6+
extend: {},
7+
fontFamily: {
8+
mono: ['monospace'],
9+
},
10+
},
11+
plugins: [],
12+
};

‎apps/tester-app/tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"extends": "@react-native/typescript-config/tsconfig.json",
33
"compilerOptions": {
4+
"jsxImportSource": "nativewind",
45
"module": "ES2022" // for dynamic imports & top-level await
56
}
67
}

‎apps/tester-federation-v2/ios/Podfile.lock

+1-1
Original file line numberDiff line numberDiff line change
@@ -1964,7 +1964,7 @@ SPEC CHECKSUMS:
19641964
RNScreens: e389d6a6a66a4f0d3662924ecae803073ccce8ec
19651965
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
19661966
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
1967-
Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
1967+
Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
19681968

19691969
PODFILE CHECKSUM: a2fe66c9f356ead5b62cb5a645336db60f03a64d
19701970

‎packages/plugin-nativewind/CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# @callstack/repack-plugin-nativewind

‎packages/plugin-nativewind/README.md

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<p align="center">
2+
<img src="https://raw.githubusercontent.com/callstack/repack/HEAD/logo.png">
3+
</p>
4+
<p align="center">
5+
A toolkit to build your React Native application with Rspack or Webpack.
6+
</p>
7+
8+
---
9+
10+
[![Build Status][build-badge]][build]
11+
[![Version][version-badge]][version]
12+
[![MIT License][license-badge]][license]
13+
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
14+
[![Code of Conduct][coc-badge]][coc]
15+
16+
`@callstack/repack-plugin-nativewind` is a plugin for `@callstack/repack` that integrates [NativeWind](https://github.com/nativewind/nativewind) into your React Native projects.
17+
18+
## About
19+
20+
Use NativeWind in Re.Pack projects.
21+
22+
## Installation
23+
24+
```sh
25+
npm install -D @callstack/repack-plugin-nativewind
26+
```
27+
28+
## Usage
29+
30+
### Plugin
31+
32+
To add the plugin to your Re.Pack configuration follow this guide: https://www.nativewind.dev/getting-started/react-native
33+
34+
- Follow step 1, 2, and 5 (and optionally 7)
35+
- At step 3 and 4, instead of editing `babel.config.js` (which is not used) or changing Metro config (again, not used) update your `rspack.config.js` or `webpack.config.js` as follows:
36+
37+
```js
38+
import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";
39+
40+
export default (env) => {
41+
// ...
42+
return {
43+
// ...
44+
plugins: [
45+
// ...
46+
new NativeWindPlugin({
47+
input: "./global.css",
48+
}),
49+
],
50+
};
51+
};
52+
```
53+
54+
### Loader
55+
56+
The plugin also comes with it's own loader, which you can use on it's own inside `rspack.config.js` or `webpack.config.js` like this:
57+
58+
```js
59+
export default (env) => {
60+
// ...
61+
return {
62+
// ...
63+
module: {
64+
rules: [
65+
{
66+
test: /\.ts$/,
67+
use: {
68+
loader: "@callstack/repack-plugin-nativewind/loader",
69+
options: {
70+
babelPlugins: [
71+
[
72+
"@babel/plugin-syntax-typescript",
73+
{ isTSX: false, allowNamespaces: true },
74+
],
75+
"nativewind/babel",
76+
],
77+
},
78+
},
79+
},
80+
],
81+
},
82+
};
83+
};
84+
```
85+
86+
---
87+
88+
Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.
89+
90+
<!-- badges -->
91+
92+
[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=readme-with-love
93+
[build-badge]: https://img.shields.io/github/workflow/status/callstack/repack/CI/main?style=flat-square
94+
[build]: https://github.com/callstack/repack/actions/workflows/main.yml
95+
[version-badge]: https://img.shields.io/npm/v/@callstack/repack-plugin-nativewind?style=flat-square
96+
[version]: https://www.npmjs.com/package/@callstack/repack-plugin-nativewind
97+
[license-badge]: https://img.shields.io/npm/l/@callstack/repack-plugin-nativewind?style=flat-square
98+
[license]: https://github.com/callstack/repack/blob/master/LICENSE
99+
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
100+
[prs-welcome]: ./CONTRIBUTING.md
101+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
102+
[coc]: https://github.com/callstack/repack/blob/master/CODE_OF_CONDUCT.md

‎packages/plugin-nativewind/loader/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '../dist/loader.js';

‎packages/plugin-nativewind/loader/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../dist/loader.js');

0 commit comments

Comments
 (0)