Skip to content

Commit f093546

Browse files
danstepanovdanstepanov
committed
add expo sdk 54 support for nativewind v4.1.21, nativewindui, and blank stack templates
1 parent bf56952 commit f093546

File tree

8 files changed

+60
-31
lines changed

8 files changed

+60
-31
lines changed

‎.changeset/violet-moons-tickle.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'create-expo-stack': minor
3+
'rn-new': minor
4+
---
5+
6+
add expo sdk 54 support for nativewind v4.1.21, nativewindui, and blank stack templates

‎cli/__tests__/__snapshots__/cli-integration.test.ts.snap‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1324,6 +1324,7 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: -
13241324
"react-native": "",
13251325
"react-native-reanimated": "",
13261326
"react-native-safe-area-context": "",
1327+
"react-native-worklets": "",
13271328
},
13281329
"devDependencies": {
13291330
"@babel/core": "",
@@ -1336,7 +1337,7 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: -
13361337
"tailwindcss": "",
13371338
"typescript": "",
13381339
},
1339-
"main": "expo-router/entry",
1340+
"main": "node_modules/expo/AppEntry.js",
13401341
"name": "myTestProject",
13411342
"private": true,
13421343
"scripts": {
@@ -1416,6 +1417,7 @@ exports[`generates a project with --expo-router --nativewind --no-install --bun
14161417
"react-native": "",
14171418
"react-native-reanimated": "",
14181419
"react-native-safe-area-context": "",
1420+
"react-native-worklets": "",
14191421
},
14201422
"devDependencies": {
14211423
"@babel/core": "",
@@ -1428,7 +1430,7 @@ exports[`generates a project with --expo-router --nativewind --no-install --bun
14281430
"tailwindcss": "",
14291431
"typescript": "",
14301432
},
1431-
"main": "expo-router/entry",
1433+
"main": "node_modules/expo/AppEntry.js",
14321434
"name": "myTestProject",
14331435
"private": true,
14341436
"scripts": {
@@ -1522,6 +1524,7 @@ exports[`generates a project with --nativewindui --blank --no-install --bun --ov
15221524
"react-native": "",
15231525
"react-native-reanimated": "",
15241526
"react-native-safe-area-context": "",
1527+
"react-native-worklets": "",
15251528
},
15261529
"devDependencies": {
15271530
"@babel/core": "",
@@ -1534,7 +1537,7 @@ exports[`generates a project with --nativewindui --blank --no-install --bun --ov
15341537
"tailwindcss": "",
15351538
"typescript": "",
15361539
},
1537-
"main": "expo-router/entry",
1540+
"main": "node_modules/expo/AppEntry.js",
15381541
"name": "myTestProject",
15391542
"private": true,
15401543
"scripts": {

‎cli/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@
4949
"useTabs": false
5050
},
5151
"dependencies": {
52-
"@clack/prompts": "^0.7.0",
52+
"@clack/prompts": "^0.11.0",
5353
"ejs-lint": "^2.0.0",
54-
"expo": "^53.0.20",
54+
"expo": "^54.0.6",
5555
"figlet": "^1.6.0",
5656
"gluegun": "latest",
5757
"google-auth-library": "^9.11.0",

‎cli/src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const nativewindUIOptions: SelectedComponents[] = [
2525
'activity-indicator',
2626
'activity-view',
2727
'avatar',
28+
'button',
2829
'date-picker',
2930
'picker',
3031
'progress-indicator',

‎cli/src/templates/base/babel.config.js.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ module.exports = function(api) {
2222
]);
2323
<% } %>
2424
25-
plugins.push('react-native-reanimated/plugin');
25+
plugins.push('react-native-worklets/plugin');
2626
2727
return {
2828
<% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>

‎cli/src/templates/base/package.json.ejs‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
"tailwind-merge": "^2.2.1",
4141
"react-native-uitextview": "^1.1.4",
4242
"rn-icon-mapper": "^0.0.1",
43+
"expo-haptics": "~14.1.4",
44+
"expo-symbols": "~0.4.5",
4345
<% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
4446
"@react-native-community/datetimepicker": "8.4.1",
4547
<% } %>
@@ -83,21 +85,21 @@
8385
8486
<% if (props.navigationPackage?.type === "navigation") { %>
8587
"@react-navigation/native": "^7.1.6",
86-
"react-native-gesture-handler": "~2.24.0",
87-
"react-native-screens": "~4.11.1",
88+
"react-native-gesture-handler": "~2.28.0",
89+
"react-native-screens": "~4.16.0",
8890
<% } %>
8991
9092
<% if (props.navigationPackage?.name === "react-navigation") { %>
91-
"@react-navigation/stack": "^7.0.4",
92-
"@expo/vector-icons": "^14.0.0",
93+
"@react-navigation/stack": "^7.4.8",
94+
"@expo/vector-icons": "^15.0.2",
9395
<% } %>
9496
9597
<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
9698
"vexo-analytics": "^1.3.15",
9799
<% } %>
98100
99101
<% if ((props.navigationPackage?.name === "react-navigation") && (props.stylingPackage?.name === "tamagui")) { %>
100-
"expo-splash-screen": "~0.27.4",
102+
"expo-splash-screen": "~31.0.9",
101103
<% } %>
102104
103105
<% if (props.navigationPackage?.options.type === "tabs" && props.navigationPackage?.name === "react-navigation") { %>
@@ -113,14 +115,14 @@
113115
<% } %>
114116
115117
<% if (props.navigationPackage?.name === "expo-router") { %>
116-
"expo-linking": "~7.1.7",
117-
"expo-haptics": "~14.1.4",
118-
"expo-router": "~5.1.7",
119-
"expo-constants": "~17.1.7",
120-
"expo-symbols": "~0.4.5",
121-
"expo-system-ui": "~5.0.11",
122-
"react-dom": "19.0.0",
123-
"react-native-web": "^0.20.0",
118+
"@expo/vector-icons": "^15.0.2",
119+
"expo-linking": "~8.0.8",
120+
"expo-router": "~6.0.2",
121+
"expo-constants": "~18.0.8",
122+
"expo-system-ui": "~6.0.7",
123+
"expo-web-browser": "~15.0.7",
124+
"react-dom": "19.1.0",
125+
"react-native-web": "^0.21.0",
124126
<% } %>
125127
126128
<% if (props.authenticationPackage?.name === "supabase") { %>
@@ -138,19 +140,21 @@
138140
"expo-localization": "~14.8.3",
139141
<% } %>
140142
<% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %>
141-
"expo-dev-client": "~5.2.4",
143+
"expo-dev-client": "~6.0.12",
142144
<% } %>
143145
144-
"react-native-reanimated": "~3.17.4",
145-
"react-native-safe-area-context": "5.4.0",
146-
"expo": "~53.0.6",
147-
"expo-status-bar": "~2.2.3",
148-
"react": "19.0.0",
149-
"react-native": "0.79.5"
146+
"react-native-reanimated": "~4.1.1",
147+
"react-native-worklets": "0.5.1",
148+
149+
"react-native-safe-area-context": "~5.6.0",
150+
"expo": "~54.0.4",
151+
"expo-status-bar": "~3.0.8",
152+
"react": "19.1.0",
153+
"react-native": "0.81.4"
150154
},
151155
"devDependencies": {
152156
"@babel/core": "^7.20.0",
153-
"@types/react": "~19.0.10",
157+
"@types/react": "~19.1.10",
154158
"eslint": "^9.25.1",
155159
"eslint-config-expo": "~10.0.0",
156160
"eslint-config-prettier": "^10.1.2",
@@ -165,7 +169,7 @@
165169
"typescript": "~5.9.2"
166170
},
167171
<% if (props.navigationPackage?.name !== "expo-router") { %>
168-
"main": "expo-router/entry",
172+
"main": "node_modules/expo/AppEntry.js",
169173
<% } %>
170174
<% if (props.packageManager === "yarn"){ %>
171175
"packageManager": "[email protected]",

‎cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { FlashList } from '@shopify/flash-list';
33
import { cssInterop } from 'nativewind';
44
import * as React from 'react';
55
import {
6+
<% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
67
Alert,
8+
<% } %>
79
<% if (
810
props.stylingPackage?.options.selectedComponents.includes('action-sheet') ||
911
props.stylingPackage?.options.selectedComponents.includes('activity-view')
@@ -24,15 +26,23 @@ import { SearchBarProps } from 'react-native-screens';
2426
import { useActionSheet } from '@expo/react-native-action-sheet';
2527
<% } %>
2628
import { useNavigation } from '@react-navigation/native';
29+
<% if (props.stylingPackage?.options.selectedComponents.includes('button')) { %>
2730
import * as Haptics from 'expo-haptics';
31+
<% } else { %>
32+
// import * as Haptics from 'expo-haptics';
33+
<% } %>
2834
2935
<% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
3036
import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';
3137
<% } %>
3238
<% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
3339
import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar';
3440
<% } %>
41+
<% if (props.stylingPackage?.options.selectedComponents.includes('button')) { %>
3542
import { Button } from '@/components/nativewindui/Button';
43+
<% } else { %>
44+
// import { Button } from '@/components/nativewindui/Button';
45+
<% } %>
3646
<% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
3747
import { DatePicker } from '@/components/nativewindui/DatePicker';
3848
<% } %>
@@ -46,7 +56,11 @@ import { ProgressIndicator } from '@/components/nativewindui/ProgressIndicator';
4656
<% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
4757
import { Slider } from '@/components/nativewindui/Slider';
4858
<% } %>
59+
<% if (props.stylingPackage?.options.selectedComponents.includes('text')) { %>
4960
import { Text } from '@/components/nativewindui/Text';
61+
<% } else { %>
62+
// import { Text } from '@/components/nativewindui/Text';
63+
<% } %>
5064
<% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
5165
import { Toggle } from '@/components/nativewindui/Toggle';
5266
<% } %>
@@ -103,6 +117,7 @@ function useHeaderSearchBar(props: SearchBarProps = {}) {
103117
...props,
104118
} satisfies SearchBarProps,
105119
});
120+
// eslint-disable-next-line react-hooks/exhaustive-deps
106121
}, [navigation, colorScheme]);
107122
108123
return search;
@@ -199,7 +214,7 @@ const COMPONENTS: ComponentItem[] = [
199214
<% } %>
200215
// {
201216
// name: 'Button',
202-
// component: function ProgressIndicatorExample() {
217+
// component: function ButtonExample() {
203218
// function onPress() {
204219
// Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
205220
// }

‎cli/src/utilities/printOutput.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export async function printOutput(
5151
s.start(`Installing dependencies using ${packageManager}...`);
5252
// attempt to improve npm install speeds by disabling audit and progress
5353

54-
const additionalFlags = isNpm ? '--silent --no-audit --progress=false --legacy-peer-deps' : '--silent';
54+
const additionalFlags = isNpm ? '--silent --no-audit --progress=false --legacy-peer-deps' : '';
5555

5656
if (packageManager === 'yarn') {
5757
// create empty yarn.lock to stop yarn from complaining
@@ -97,7 +97,7 @@ export async function printOutput(
9797
toolbox,
9898
command: `cd ${projectName} && ${runCommand} format`,
9999
errorMessage: 'Error formatting code',
100-
stdio: undefined
100+
stdio: ONLY_ERRORS
101101
});
102102

103103
s.stop('Project files formatted!');

0 commit comments

Comments
 (0)