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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.7.6
1+
system

‎apps/tester-app/index.js

Lines changed: 4 additions & 1 deletion
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

Lines changed: 72 additions & 2 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 5 additions & 1 deletion
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

Lines changed: 9 additions & 0 deletions
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

Lines changed: 9 additions & 4 deletions
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

Lines changed: 21 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

0 commit comments

Comments
 (0)