From d16b4ac4429e1f5584e6586a8393e47ea29cac92 Mon Sep 17 00:00:00 2001 From: Dan Stepanov Date: Thu, 2 Oct 2025 17:30:20 -0700 Subject: [PATCH 1/5] add expo sdk 54 support for nativewind v4.1.21, nativewindui, and blank stack templates --- .changeset/violet-moons-tickle.md | 6 +++ .../cli-integration.test.ts.snap | 9 ++-- cli/package.json | 4 +- cli/src/constants.ts | 1 + cli/src/templates/base/babel.config.js.ejs | 2 +- cli/src/templates/base/package.json.ejs | 48 ++++++++++--------- .../nativewindui/stack/app/index.tsx.ejs | 17 ++++++- cli/src/utilities/printOutput.ts | 4 +- 8 files changed, 60 insertions(+), 31 deletions(-) create mode 100644 .changeset/violet-moons-tickle.md diff --git a/.changeset/violet-moons-tickle.md b/.changeset/violet-moons-tickle.md new file mode 100644 index 00000000..eaf3a838 --- /dev/null +++ b/.changeset/violet-moons-tickle.md @@ -0,0 +1,6 @@ +--- +'create-expo-stack': minor +'rn-new': minor +--- + +add expo sdk 54 support for nativewind v4.1.21, nativewindui, and blank stack templates diff --git a/cli/__tests__/__snapshots__/cli-integration.test.ts.snap b/cli/__tests__/__snapshots__/cli-integration.test.ts.snap index cb9c1e4a..ea2262d8 100644 --- a/cli/__tests__/__snapshots__/cli-integration.test.ts.snap +++ b/cli/__tests__/__snapshots__/cli-integration.test.ts.snap @@ -1324,6 +1324,7 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: - "react-native": "", "react-native-reanimated": "", "react-native-safe-area-context": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -1336,7 +1337,7 @@ exports[`generates a project with --nativewind --no-install --bun --overwrite: - "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -1416,6 +1417,7 @@ exports[`generates a project with --expo-router --nativewind --no-install --bun "react-native": "", "react-native-reanimated": "", "react-native-safe-area-context": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -1428,7 +1430,7 @@ exports[`generates a project with --expo-router --nativewind --no-install --bun "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -1522,6 +1524,7 @@ exports[`generates a project with --nativewindui --blank --no-install --bun --ov "react-native": "", "react-native-reanimated": "", "react-native-safe-area-context": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -1534,7 +1537,7 @@ exports[`generates a project with --nativewindui --blank --no-install --bun --ov "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { diff --git a/cli/package.json b/cli/package.json index 97d195fd..ecf80716 100644 --- a/cli/package.json +++ b/cli/package.json @@ -49,9 +49,9 @@ "useTabs": false }, "dependencies": { - "@clack/prompts": "^0.7.0", + "@clack/prompts": "^0.11.0", "ejs-lint": "^2.0.0", - "expo": "^53.0.20", + "expo": "^54.0.6", "figlet": "^1.6.0", "gluegun": "latest", "google-auth-library": "^9.11.0", diff --git a/cli/src/constants.ts b/cli/src/constants.ts index 1eda9fbc..96750d40 100644 --- a/cli/src/constants.ts +++ b/cli/src/constants.ts @@ -25,6 +25,7 @@ export const nativewindUIOptions: SelectedComponents[] = [ 'activity-indicator', 'activity-view', 'avatar', + 'button', 'date-picker', 'picker', 'progress-indicator', diff --git a/cli/src/templates/base/babel.config.js.ejs b/cli/src/templates/base/babel.config.js.ejs index d6116fcc..285015bd 100644 --- a/cli/src/templates/base/babel.config.js.ejs +++ b/cli/src/templates/base/babel.config.js.ejs @@ -22,7 +22,7 @@ module.exports = function(api) { ]); <% } %> - plugins.push('react-native-reanimated/plugin'); + plugins.push('react-native-worklets/plugin'); return { <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %> diff --git a/cli/src/templates/base/package.json.ejs b/cli/src/templates/base/package.json.ejs index 069cb5eb..a635a8f3 100644 --- a/cli/src/templates/base/package.json.ejs +++ b/cli/src/templates/base/package.json.ejs @@ -40,6 +40,8 @@ "tailwind-merge": "^2.2.1", "react-native-uitextview": "^1.1.4", "rn-icon-mapper": "^0.0.1", + "expo-haptics": "~14.1.4", + "expo-symbols": "~0.4.5", <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %> "@react-native-community/datetimepicker": "8.4.1", <% } %> @@ -83,13 +85,13 @@ <% if (props.navigationPackage?.type === "navigation") { %> "@react-navigation/native": "^7.1.6", - "react-native-gesture-handler": "~2.24.0", - "react-native-screens": "~4.11.1", + "react-native-gesture-handler": "~2.28.0", + "react-native-screens": "~4.16.0", <% } %> <% if (props.navigationPackage?.name === "react-navigation") { %> - "@react-navigation/stack": "^7.0.4", - "@expo/vector-icons": "^14.0.0", + "@react-navigation/stack": "^7.4.8", + "@expo/vector-icons": "^15.0.2", <% } %> <% if (props.analyticsPackage?.name === "vexo-analytics") { %> @@ -97,7 +99,7 @@ <% } %> <% if ((props.navigationPackage?.name === "react-navigation") && (props.stylingPackage?.name === "tamagui")) { %> - "expo-splash-screen": "~0.27.4", + "expo-splash-screen": "~31.0.9", <% } %> <% if (props.navigationPackage?.options.type === "tabs" && props.navigationPackage?.name === "react-navigation") { %> @@ -113,14 +115,14 @@ <% } %> <% if (props.navigationPackage?.name === "expo-router") { %> - "expo-linking": "~7.1.7", - "expo-haptics": "~14.1.4", - "expo-router": "~5.1.7", - "expo-constants": "~17.1.7", - "expo-symbols": "~0.4.5", - "expo-system-ui": "~5.0.11", - "react-dom": "19.0.0", - "react-native-web": "^0.20.0", + "@expo/vector-icons": "^15.0.2", + "expo-linking": "~8.0.8", + "expo-router": "~6.0.2", + "expo-constants": "~18.0.8", + "expo-system-ui": "~6.0.7", + "expo-web-browser": "~15.0.7", + "react-dom": "19.1.0", + "react-native-web": "^0.21.0", <% } %> <% if (props.authenticationPackage?.name === "supabase") { %> @@ -138,19 +140,21 @@ "expo-localization": "~14.8.3", <% } %> <% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %> - "expo-dev-client": "~5.2.4", + "expo-dev-client": "~6.0.12", <% } %> - "react-native-reanimated": "~3.17.4", - "react-native-safe-area-context": "5.4.0", - "expo": "~53.0.6", - "expo-status-bar": "~2.2.3", - "react": "19.0.0", - "react-native": "0.79.5" + "react-native-reanimated": "~4.1.1", + "react-native-worklets": "0.5.1", + + "react-native-safe-area-context": "~5.6.0", + "expo": "~54.0.4", + "expo-status-bar": "~3.0.8", + "react": "19.1.0", + "react-native": "0.81.4" }, "devDependencies": { "@babel/core": "^7.20.0", - "@types/react": "~19.0.10", + "@types/react": "~19.1.10", "eslint": "^9.25.1", "eslint-config-expo": "~10.0.0", "eslint-config-prettier": "^10.1.2", @@ -165,7 +169,7 @@ "typescript": "~5.9.2" }, <% if (props.navigationPackage?.name !== "expo-router") { %> - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", <% } %> <% if (props.packageManager === "yarn"){ %> "packageManager": "yarn@4.9.4", diff --git a/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs b/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs index 73228042..f8cdfe91 100644 --- a/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs @@ -3,7 +3,9 @@ import { FlashList } from '@shopify/flash-list'; import { cssInterop } from 'nativewind'; import * as React from 'react'; import { + <% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %> Alert, + <% } %> <% if ( props.stylingPackage?.options.selectedComponents.includes('action-sheet') || props.stylingPackage?.options.selectedComponents.includes('activity-view') @@ -24,7 +26,11 @@ import { SearchBarProps } from 'react-native-screens'; import { useActionSheet } from '@expo/react-native-action-sheet'; <% } %> import { useNavigation } from '@react-navigation/native'; +<% if (props.stylingPackage?.options.selectedComponents.includes('button')) { %> import * as Haptics from 'expo-haptics'; +<% } else { %> +// import * as Haptics from 'expo-haptics'; +<% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %> import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator'; @@ -32,7 +38,11 @@ import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator'; <% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %> import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar'; <% } %> +<% if (props.stylingPackage?.options.selectedComponents.includes('button')) { %> import { Button } from '@/components/nativewindui/Button'; +<% } else { %> +// import { Button } from '@/components/nativewindui/Button'; +<% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %> import { DatePicker } from '@/components/nativewindui/DatePicker'; <% } %> @@ -46,7 +56,11 @@ import { ProgressIndicator } from '@/components/nativewindui/ProgressIndicator'; <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %> import { Slider } from '@/components/nativewindui/Slider'; <% } %> +<% if (props.stylingPackage?.options.selectedComponents.includes('text')) { %> import { Text } from '@/components/nativewindui/Text'; +<% } else { %> +// import { Text } from '@/components/nativewindui/Text'; +<% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %> import { Toggle } from '@/components/nativewindui/Toggle'; <% } %> @@ -103,6 +117,7 @@ function useHeaderSearchBar(props: SearchBarProps = {}) { ...props, } satisfies SearchBarProps, }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [navigation, colorScheme]); return search; @@ -199,7 +214,7 @@ const COMPONENTS: ComponentItem[] = [ <% } %> // { // name: 'Button', - // component: function ProgressIndicatorExample() { + // component: function ButtonExample() { // function onPress() { // Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); // } diff --git a/cli/src/utilities/printOutput.ts b/cli/src/utilities/printOutput.ts index 0c01f16e..382edb1b 100644 --- a/cli/src/utilities/printOutput.ts +++ b/cli/src/utilities/printOutput.ts @@ -51,7 +51,7 @@ export async function printOutput( s.start(`Installing dependencies using ${packageManager}...`); // attempt to improve npm install speeds by disabling audit and progress - const additionalFlags = isNpm ? '--silent --no-audit --progress=false --legacy-peer-deps' : '--silent'; + const additionalFlags = isNpm ? '--silent --no-audit --progress=false --legacy-peer-deps' : ''; if (packageManager === 'yarn') { // create empty yarn.lock to stop yarn from complaining @@ -97,7 +97,7 @@ export async function printOutput( toolbox, command: `cd ${projectName} && ${runCommand} format`, errorMessage: 'Error formatting code', - stdio: undefined + stdio: ONLY_ERRORS }); s.stop('Project files formatted!'); From 4e535c458c71a045dc4e7eb9cae83a2c371ef811 Mon Sep 17 00:00:00 2001 From: Dan Stepanov Date: Thu, 2 Oct 2025 23:42:46 -0700 Subject: [PATCH 2/5] add expo router support for stack templates using expo sdk 54 --- .changeset/angry-cycles-marry.md | 6 +++ .../templates/base/components/Button.tsx.ejs | 1 + .../base/components/Container.tsx.ejs | 1 + .../expo-router/stack/app/details.tsx.ejs | 34 +++++++++++++-- .../expo-router/stack/app/index.tsx.ejs | 41 ++++++++++++++++--- .../nativewindui/components/Container.tsx.ejs | 1 + 6 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 .changeset/angry-cycles-marry.md diff --git a/.changeset/angry-cycles-marry.md b/.changeset/angry-cycles-marry.md new file mode 100644 index 00000000..efffb8b7 --- /dev/null +++ b/.changeset/angry-cycles-marry.md @@ -0,0 +1,6 @@ +--- +'create-expo-stack': patch +'rn-new': patch +--- + +add expo router support for stack templates using expo sdk 54 diff --git a/cli/src/templates/base/components/Button.tsx.ejs b/cli/src/templates/base/components/Button.tsx.ejs index 8d51af68..b569c8e3 100644 --- a/cli/src/templates/base/components/Button.tsx.ejs +++ b/cli/src/templates/base/components/Button.tsx.ejs @@ -23,6 +23,7 @@ const styles = StyleSheet.create({ elevation: 5, flexDirection: 'row', justifyContent: 'center', + marginHorizontal: 16, padding: 16, shadowColor: '#000', shadowOffset: { diff --git a/cli/src/templates/base/components/Container.tsx.ejs b/cli/src/templates/base/components/Container.tsx.ejs index 409b83e9..76faf545 100644 --- a/cli/src/templates/base/components/Container.tsx.ejs +++ b/cli/src/templates/base/components/Container.tsx.ejs @@ -8,6 +8,7 @@ const styles = StyleSheet.create({ container: { flex: 1, padding: 24, + backgroundColor: 'white', }, }); diff --git a/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs index 91cf4925..da2b95fb 100644 --- a/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs @@ -1,3 +1,8 @@ +<% if (props.stylingPackage?.name === "nativewind") { %> +import { View } from 'react-native'; +<% } else if (props.stylingPackage?.name === "stylesheet") { %> +import { StyleSheet, View } from 'react-native'; +<% } %> import { Stack, useLocalSearchParams } from 'expo-router'; import { Container } from '@/components/Container'; @@ -7,11 +12,34 @@ export default function Details() { const { name } = useLocalSearchParams(); return ( - <> + <% if (props.stylingPackage?.name === "nativewind") { %> + + <% } else if (props.stylingPackage?.name === "stylesheet") { %> + + <% } else { %> + <> + <% } %> - + <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> + + <% } else { %> + + <% } %> ); -} \ No newline at end of file +} + +<% if (props.stylingPackage?.name === "nativewind") { %> +const styles = { + container: "flex flex-1 bg-white", +} +<% } else if (props.stylingPackage?.name === "stylesheet") { %> +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + }, +}); +<% } %> \ No newline at end of file diff --git a/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs index c896a8b4..6203d53d 100644 --- a/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs @@ -1,5 +1,11 @@ import { Stack, Link } from 'expo-router'; +<% if (props.stylingPackage?.name === "nativewind") { %> +import { View } from 'react-native'; +<% } else if (props.stylingPackage?.name === "stylesheet") { %> +import { StyleSheet, View } from 'react-native'; +<% } %> + <% if (props.stylingPackage?.name === "unistyles") { %> import { StyleSheet } from 'react-native-unistyles'; <% } %> @@ -14,7 +20,11 @@ import { ScreenContent } from '@/components/ScreenContent'; export default function Home() { return ( - <> + <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> + + <% } else { %> + <> + <% } %> @@ -30,14 +40,33 @@ export default function Home() { <% } %> - + <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> + + <% } else { %> + + <% } %> ); } -<% if (props.stylingPackage?.name === "unistyles") { %> +<% if (props.stylingPackage?.name === "nativewind") { %> +const styles = { + container: "flex flex-1 bg-white", +} +<% } else if (props.stylingPackage?.name === "stylesheet") { %> +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + }, +} +<% } else if (props.stylingPackage?.name === "unistyles") { %> const styles = StyleSheet.create((theme) => ({ - button: { - marginHorizontal: theme.margins.xl, - }, + container: { + flex: 1, + backgroundColor: 'white', + }, + button: { + marginHorizontal: theme.margins.xl, + }, })); <% } %> diff --git a/cli/src/templates/packages/nativewindui/components/Container.tsx.ejs b/cli/src/templates/packages/nativewindui/components/Container.tsx.ejs index 409b83e9..76faf545 100644 --- a/cli/src/templates/packages/nativewindui/components/Container.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/components/Container.tsx.ejs @@ -8,6 +8,7 @@ const styles = StyleSheet.create({ container: { flex: 1, padding: 24, + backgroundColor: 'white', }, }); From 52fb9a1fb7dae791fcf325e79ab15af2691ffa34 Mon Sep 17 00:00:00 2001 From: Dan Stepanov Date: Fri, 3 Oct 2025 17:11:28 -0700 Subject: [PATCH 3/5] remove restyle and tamagui --- .changeset/tricky-rocks-check.md | 6 + README.md | 4 +- cli/README.md | 4 +- cli/__tests__/cli-integration.test.ts | 6 - cli/src/commands/create-expo-stack.ts | 18 --- cli/src/templates/base/App.tsx.ejs | 63 ++------- cli/src/templates/base/babel.config.js.ejs | 20 +-- cli/src/templates/base/package.json.ejs | 21 --- .../expo-router/drawer/app/+not-found.tsx.ejs | 79 +++-------- .../expo-router/drawer/app/_layout.tsx.ejs | 43 +----- .../expo-router/stack/app/+not-found.tsx.ejs | 94 +++++-------- .../expo-router/stack/app/_layout.tsx.ejs | 66 ++------- .../expo-router/stack/app/details.tsx.ejs | 26 ++-- .../expo-router/stack/app/index.tsx.ejs | 24 ++-- .../expo-router/tabs/app/+not-found.tsx.ejs | 81 +++-------- .../expo-router/tabs/app/_layout.tsx.ejs | 56 ++------ .../drawer/app/+not-found.tsx.ejs | 42 +----- .../nativewindui/tabs/app/+not-found.tsx.ejs | 40 ------ .../packages/react-navigation/App.tsx.ejs | 44 +----- .../restyle/components/BackButton.tsx.ejs | 15 -- .../restyle/components/Button.tsx.ejs | 40 ------ .../restyle/components/Container.tsx.ejs | 6 - .../restyle/components/EditScreenInfo.tsx.ejs | 29 ---- .../restyle/components/ScreenContent.tsx.ejs | 21 --- .../packages/restyle/theme/Box.tsx.ejs | 6 - .../packages/restyle/theme/Text.tsx.ejs | 6 - .../packages/restyle/theme/index.ts.ejs | 6 - .../packages/restyle/theme/theme.ts.ejs | 67 --------- .../tamagui/components/BackButton.tsx.ejs | 19 --- .../tamagui/components/Button.tsx.ejs | 18 --- .../tamagui/components/Container.tsx.ejs | 6 - .../tamagui/components/EditScreenInfo.tsx.ejs | 29 ---- .../tamagui/components/ScreenContent.tsx.ejs | 23 ---- .../packages/tamagui/tamagui.config.ts.ejs | 130 ------------------ cli/src/types.ts | 4 +- cli/src/utilities/configureProjectFiles.ts | 43 +----- cli/src/utilities/generateProjectFiles.ts | 6 +- cli/src/utilities/runCLI.ts | 4 - cli/src/utilities/showHelp.ts | 2 - .../Docs/FolderStructureDiagram.astro | 2 - .../components/Docs/FolderStructureForm.astro | 4 - docs/src/content/docs/en/installation.md | 2 - docs/src/content/docs/en/usage/restyle.md | 8 -- docs/src/content/docs/en/usage/tamagui.md | 20 --- packages/rn-new/README.md | 4 +- www/demo/steps/setStyles.js | 4 - .../components/landing/stack/restyle.astro | 36 ----- .../landing/stack/stackSection.astro | 4 - .../components/landing/stack/tamagui.astro | 33 ----- 49 files changed, 153 insertions(+), 1181 deletions(-) create mode 100644 .changeset/tricky-rocks-check.md delete mode 100644 cli/src/templates/packages/restyle/components/BackButton.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/components/Button.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/components/Container.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/components/EditScreenInfo.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/components/ScreenContent.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/theme/Box.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/theme/Text.tsx.ejs delete mode 100644 cli/src/templates/packages/restyle/theme/index.ts.ejs delete mode 100644 cli/src/templates/packages/restyle/theme/theme.ts.ejs delete mode 100644 cli/src/templates/packages/tamagui/components/BackButton.tsx.ejs delete mode 100644 cli/src/templates/packages/tamagui/components/Button.tsx.ejs delete mode 100644 cli/src/templates/packages/tamagui/components/Container.tsx.ejs delete mode 100644 cli/src/templates/packages/tamagui/components/EditScreenInfo.tsx.ejs delete mode 100644 cli/src/templates/packages/tamagui/components/ScreenContent.tsx.ejs delete mode 100644 cli/src/templates/packages/tamagui/tamagui.config.ts.ejs delete mode 100644 docs/src/content/docs/en/usage/restyle.md delete mode 100644 docs/src/content/docs/en/usage/tamagui.md delete mode 100644 www/src/components/landing/stack/restyle.astro delete mode 100644 www/src/components/landing/stack/tamagui.astro diff --git a/.changeset/tricky-rocks-check.md b/.changeset/tricky-rocks-check.md new file mode 100644 index 00000000..220cab7e --- /dev/null +++ b/.changeset/tricky-rocks-check.md @@ -0,0 +1,6 @@ +--- +'create-expo-stack': minor +'rn-new': minor +--- + +remove restyle and tamagui diff --git a/README.md b/README.md index 43d6b4d4..f18e562f 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Support this project by import './global.css'; import 'expo-dev-client'; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { ThemeProvider } from '@shopify/restyle'; - import { theme } from 'theme'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - <% if (!props.internalizationPackage) { %> - import { Text } from 'react-native'; - <% } %> - import { TamaguiProvider } from 'tamagui'; - import config from './tamagui.config'; <% } %> <% if (props.analyticsPackage?.name === "vexo-analytics") { %> @@ -31,46 +22,16 @@ import { StatusBar } from 'expo-status-bar'; vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY); <% } %> -<% if (props.stylingPackage?.name === "restyle") {%> - export default function App() { - return ( - - - <% if (props.internalizationPackage?.name === "i18next") { %> - - <% } %> - - - - ); - } -<% } else if (props.stylingPackage?.name === "tamagui") {%> - export default function App() { - return ( - - - <% if (props.internalizationPackage?.name === "i18next") { %> - - <% } else { %> - Open up App.tsx to start working on your app! - <% } %> - - - - ); - } -<% } else { %> - export default function App() { - return ( - <> - - <% if (props.internalizationPackage?.name === "i18next") { %> - - <% } %> - - - - ); - } -<% } %> +export default function App() { + return ( + <> + + <% if (props.internalizationPackage?.name === "i18next") { %> + + <% } %> + + + + ); +} diff --git a/cli/src/templates/base/babel.config.js.ejs b/cli/src/templates/base/babel.config.js.ejs index 285015bd..cc589bff 100644 --- a/cli/src/templates/base/babel.config.js.ejs +++ b/cli/src/templates/base/babel.config.js.ejs @@ -2,26 +2,16 @@ module.exports = function(api) { api.cache(true); let plugins = []; - <% if (props.stylingPackage?.name === "tamagui") { %> + <% if (props.stylingPackage?.name === "unistyles") { %> plugins.push([ - '@tamagui/babel-plugin', + 'react-native-unistyles/plugin', { - components: ['tamagui'], - config: './tamagui.config.ts', - }, + autoProcessRoot: 'app', + autoProcessImports: ['~/components'] + } ]); <% } %> - <% if (props.stylingPackage?.name === "unistyles") { %> - plugins.push([ - 'react-native-unistyles/plugin', - { - autoProcessRoot: 'app', - autoProcessImports: ['~/components'] - } - ]); - <% } %> - plugins.push('react-native-worklets/plugin'); return { diff --git a/cli/src/templates/base/package.json.ejs b/cli/src/templates/base/package.json.ejs index a635a8f3..d5cd1ccd 100644 --- a/cli/src/templates/base/package.json.ejs +++ b/cli/src/templates/base/package.json.ejs @@ -63,20 +63,6 @@ "zustand": "^4.5.1", <% } %> - <% if (props.stylingPackage?.name === "restyle") { %> - "@shopify/restyle": "^2.4.2", - <% } %> - - <% if (props.stylingPackage?.name === "tamagui") { %> - "@tamagui/font-inter": "^1.125.8", - "@tamagui/react-native-media-driver": "^1.125.8", - "@tamagui/shorthands": "^1.125.8", - "@tamagui/themes": "^1.125.8", - "tamagui": "^1.125.8", - "@tamagui/animations-react-native": "^1.125.8", - "expo-font": "~13.0.3", - <% } %> - <% if (props.stylingPackage?.name === "unistyles") { %> "react-native-unistyles": "3.0.0-rc.4", "react-native-nitro-modules": "0.25.2", @@ -98,10 +84,6 @@ "vexo-analytics": "^1.3.15", <% } %> - <% if ((props.navigationPackage?.name === "react-navigation") && (props.stylingPackage?.name === "tamagui")) { %> - "expo-splash-screen": "~31.0.9", - <% } %> - <% if (props.navigationPackage?.options.type === "tabs" && props.navigationPackage?.name === "react-navigation") { %> "@react-navigation/bottom-tabs": "^7.0.5", <% } %> @@ -163,9 +145,6 @@ "tailwindcss": "^3.4.0", "prettier-plugin-tailwindcss": "^0.5.11", <% } %> - <% if (props.stylingPackage?.name === "tamagui") { %> - "@tamagui/babel-plugin": "^1.125.8", - <% } %> "typescript": "~5.9.2" }, <% if (props.navigationPackage?.name !== "expo-router") { %> diff --git a/cli/src/templates/packages/expo-router/drawer/app/+not-found.tsx.ejs b/cli/src/templates/packages/expo-router/drawer/app/+not-found.tsx.ejs index 7eac27a8..30377a8d 100644 --- a/cli/src/templates/packages/expo-router/drawer/app/+not-found.tsx.ejs +++ b/cli/src/templates/packages/expo-router/drawer/app/+not-found.tsx.ejs @@ -11,67 +11,33 @@ import { Link, Stack } from 'expo-router'; <% } else if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, Text } from 'react-native'; - import { Container } from '~/components/Container'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - import { YStack } from "tamagui"; - import { Container, Main, Subtitle, Title } from "../tamagui.config"; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { Box, Text, makeStyles } from 'theme'; - import { Container } from '~/components/Container'; <% } %> export default function NotFoundScreen() { -<% if (props.stylingPackage?.name === "restyle") { %> - const styles = useStyles(); -<% } %> return ( - <% if (props.stylingPackage?.name === "nativewind") {%> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } else if (props.stylingPackage?.name === "tamagui") {%> + <% if (props.stylingPackage?.name === "nativewind") {%> + <> + + + {"This screen doesn't exist."} + + Go to home screen! + + + + <% } else { %> + <> + - -
- - {"This screen doesn't exist."} - - Go to home screen! - - -
+ {"This screen doesn't exist."} + + Go to home screen! + - <% } else if (props.stylingPackage?.name === "restyle") {%> - <> - - - {"This screen doesn't exist."} - - - Go to home screen! - - - - - <% } else { %> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } %> + + <% } %> ); } @@ -112,11 +78,4 @@ export default function NotFoundScreen() { color: '#2e78b7', }, }); -<% } else if (props.stylingPackage?.name === "restyle") { %> - const useStyles = makeStyles((theme) => ({ - link: { - marginTop: theme.spacing.m_16, - paddingVertical: theme.spacing.m_16, - }, - })); <% } %> diff --git a/cli/src/templates/packages/expo-router/drawer/app/_layout.tsx.ejs b/cli/src/templates/packages/expo-router/drawer/app/_layout.tsx.ejs index 0973bba1..56bf2db7 100644 --- a/cli/src/templates/packages/expo-router/drawer/app/_layout.tsx.ejs +++ b/cli/src/templates/packages/expo-router/drawer/app/_layout.tsx.ejs @@ -13,23 +13,8 @@ import 'react-native-gesture-handler'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { Stack } from 'expo-router'; -<% if (props.stylingPackage?.name==="tamagui" ) { %> - import React, { useEffect } from "react"; - import { TamaguiProvider } from 'tamagui' - import { SplashScreen } from "expo-router"; - import { useFonts } from "expo-font"; - - import config from '../tamagui.config'; - - SplashScreen.preventAutoHideAsync(); -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { ThemeProvider } from '@shopify/restyle'; - - import { theme } from '../theme'; -<% } %> - <% if (props.stylingPackage?.name === "unistyles") { %> - import { useUnistyles } from "react-native-unistyles"; + import { useUnistyles } from "react-native-unistyles"; <% } %> <% if (props.analyticsPackage?.name === "vexo-analytics") { %> @@ -44,30 +29,11 @@ export const unstable_settings = { }; export default function RootLayout() { - <% if (props.stylingPackage?.name==="tamagui" ) { %> - const [loaded] = useFonts({ - Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"), - InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf") - }); - - useEffect(() => { - if (loaded) { - SplashScreen.hideAsync(); - } - }, [loaded]); - - if (!loaded) return null; - <% } %> <% if (props.stylingPackage?.name === "unistyles") { %> const { theme } = useUnistyles(); <% } %> - return ( - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> + return ( <% if (props.stylingPackage?.name === "unistyles") { %> - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> ); } diff --git a/cli/src/templates/packages/expo-router/stack/app/+not-found.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/+not-found.tsx.ejs index f23bfc46..94d44a68 100644 --- a/cli/src/templates/packages/expo-router/stack/app/+not-found.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/+not-found.tsx.ejs @@ -1,88 +1,59 @@ import { Link, Stack } from 'expo-router'; <% if (props.stylingPackage?.name === "nativewind") {%> - import { Text } from 'react-native'; + import { Text, View } from 'react-native'; import { Container } from '@/components/Container'; <% } else if (props.stylingPackage?.name === "unistyles") { %> import { StyleSheet } from 'react-native-unistyles' - import { Text } from 'react-native'; + import { Text, View } from 'react-native'; import { Container } from '@/components/Container'; <% } else if (props.stylingPackage?.name === "stylesheet") { %> - import { StyleSheet, Text } from 'react-native'; - - import { Container } from '@/components/Container'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - import { YStack } from "tamagui"; - import { Container, Main, Subtitle, Title } from "../tamagui.config"; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { Box, Text, makeStyles } from 'theme'; + import { StyleSheet, Text, View } from 'react-native'; import { Container } from '@/components/Container'; <% } %> export default function NotFoundScreen() { -<% if (props.stylingPackage?.name === "restyle") { %> - const styles = useStyles(); -<% } %> return ( - <% if (props.stylingPackage?.name === "nativewind") {%> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } else if (props.stylingPackage?.name === "tamagui") {%> + <% if (props.stylingPackage?.name === "nativewind") { %> + + + + {"This screen doesn't exist."} + + Go to home screen! + + + + <% } else { %> + + - -
- - {"This screen doesn't exist."} - - Go to home screen! - - -
+ {"This screen doesn't exist."} + + Go to home screen! + - <% } else if (props.stylingPackage?.name === "restyle") {%> - <> - - - {"This screen doesn't exist."} - - - Go to home screen! - - - - - <% } else { %> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } %> + + <% } %> ); } <% if (props.stylingPackage?.name === "nativewind") { %> const styles = { + container: `flex flex-1 bg-white`, title: `text-xl font-bold`, link: `mt-4 pt-4`, linkText: `text-base text-[#2e78b7]`, }; <% } else if (props.stylingPackage?.name === "unistyles") { %> const styles = StyleSheet.create((theme) => ({ + container: { + flex: 1, + backgroundColor: 'white', + }, title: { fontSize: 20, fontWeight: 'bold', @@ -99,6 +70,10 @@ const styles = StyleSheet.create((theme) => ({ })); <% } else if (props.stylingPackage?.name === "stylesheet") { %> const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + }, title: { fontSize: 20, fontWeight: 'bold', @@ -112,11 +87,4 @@ const styles = StyleSheet.create({ color: '#2e78b7', }, }); -<% } else if (props.stylingPackage?.name === "restyle") { %> - const useStyles = makeStyles((theme) => ({ - link: { - marginTop: theme.spacing.m_16, - paddingVertical: theme.spacing.m_16, - }, - })); <% } %> diff --git a/cli/src/templates/packages/expo-router/stack/app/_layout.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/_layout.tsx.ejs index 1c83347e..eac81954 100644 --- a/cli/src/templates/packages/expo-router/stack/app/_layout.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/_layout.tsx.ejs @@ -8,18 +8,6 @@ <% if (props.internalizationPackage?.name === "i18next") { %> import '../translation'; <% } %> - -<% if (props.stylingPackage?.name === "tamagui") { %> - import { useFonts } from 'expo-font'; - import { SplashScreen, Stack } from 'expo-router'; - import { useEffect } from 'react'; - import { TamaguiProvider } from 'tamagui'; - - import config from '../tamagui.config'; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { ThemeProvider } from '@shopify/restyle'; - import { theme } from 'theme'; -<% } %> import { Stack } from "expo-router"; <% if (props.analyticsPackage?.name === "vexo-analytics") { %> @@ -32,46 +20,22 @@ export default function Layout() { <% if (props.stylingPackage?.name === "unistyles") { %> const { theme } = useUnistyles(); <% } %> - <% if (props.stylingPackage?.name === "tamagui") { %> - const [loaded] = useFonts({ - Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"), - InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf") - }); - - useEffect(() => { - if (loaded) { - SplashScreen.hideAsync(); - } - }, [loaded]); - - if (!loaded) return null; - <% } %> return ( - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> - <% if (props.stylingPackage?.name === "unistyles") { %> - - <% } else { %> - - <% } %> - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> + <% if (props.stylingPackage?.name === "unistyles") { %> + + <% } else { %> + + <% } %> ); } diff --git a/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs index da2b95fb..6db9aa98 100644 --- a/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/details.tsx.ejs @@ -1,7 +1,10 @@ -<% if (props.stylingPackage?.name === "nativewind") { %> -import { View } from 'react-native'; -<% } else if (props.stylingPackage?.name === "stylesheet") { %> +<% if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, View } from 'react-native'; +<% } else if (props.stylingPackage?.name === "unistyles") { %> +import { StyleSheet } from 'react-native-unistyles'; +import { View } from 'react-native'; +<% } else { %> +import { View } from 'react-native'; <% } %> import { Stack, useLocalSearchParams } from 'expo-router'; @@ -14,20 +17,14 @@ export default function Details() { return ( <% if (props.stylingPackage?.name === "nativewind") { %> - <% } else if (props.stylingPackage?.name === "stylesheet") { %> - <% } else { %> - <> + <% } %> - <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> - - <% } else { %> - - <% } %> + ); } @@ -42,4 +39,11 @@ const styles = StyleSheet.create({ backgroundColor: 'white', }, }); +<% } else if (props.stylingPackage?.name === "unistyles") { %> +const styles = StyleSheet.create((theme) => ({ + container: { + flex: 1, + backgroundColor: 'white', + }, +})); <% } %> \ No newline at end of file diff --git a/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs b/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs index 6203d53d..0645cb33 100644 --- a/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs +++ b/cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs @@ -1,13 +1,11 @@ import { Stack, Link } from 'expo-router'; - -<% if (props.stylingPackage?.name === "nativewind") { %> -import { View } from 'react-native'; -<% } else if (props.stylingPackage?.name === "stylesheet") { %> +<% if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, View } from 'react-native'; -<% } %> - -<% if (props.stylingPackage?.name === "unistyles") { %> +<% } else if (props.stylingPackage?.name === "unistyles") { %> import { StyleSheet } from 'react-native-unistyles'; +import { View } from 'react-native'; +<% } else { %> +import { View } from 'react-native'; <% } %> import { Button } from '@/components/Button'; @@ -20,10 +18,10 @@ import { ScreenContent } from '@/components/ScreenContent'; export default function Home() { return ( - <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> + <% if (props.stylingPackage?.name === "nativewind") { %> <% } else { %> - <> + <% } %> @@ -40,11 +38,7 @@ export default function Home() { <% } %> - <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> - - <% } else { %> - - <% } %> + ); } @@ -58,7 +52,7 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: 'white', }, -} +}); <% } else if (props.stylingPackage?.name === "unistyles") { %> const styles = StyleSheet.create((theme) => ({ container: { diff --git a/cli/src/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs b/cli/src/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs index 609e8ff5..826195cf 100644 --- a/cli/src/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs +++ b/cli/src/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs @@ -6,64 +6,32 @@ import { Link, Stack } from 'expo-router'; import { Text, View } from 'react-native'; <% } else if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, Text, View } from 'react-native'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - import { YStack } from "tamagui"; - import { Container, Main, Subtitle, Title } from "../tamagui.config"; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { Box, Text, makeStyles } from 'theme'; <% } %> export default function NotFoundScreen() { -<% if (props.stylingPackage?.name === "restyle") { %> - const styles = useStyles(); -<% } %> return ( - <% if (props.stylingPackage?.name === "nativewind") {%> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } else if (props.stylingPackage?.name === "tamagui") {%> - - -
- - {"This screen doesn't exist."} - - Go to home screen! - - -
- - <% } else if (props.stylingPackage?.name === "restyle") {%> - <> - - - {"This screen doesn't exist."} - - - Go to home screen! - - - - - <% } else { %> - <> - - - {"This screen doesn't exist."} - - Go to home screen! - - - - <% } %> + <% if (props.stylingPackage?.name === "nativewind") {%> + <> + + + {"This screen doesn't exist."} + + Go to home screen! + + + + <% } else { %> + <> + + + {"This screen doesn't exist."} + + Go to home screen! + + + + <% } %> ); } @@ -116,11 +84,4 @@ export default function NotFoundScreen() { color: '#2e78b7', }, }); -<% } else if (props.stylingPackage?.name === "restyle") { %> - const useStyles = makeStyles((theme) => ({ - link: { - marginTop: theme.spacing.m_16, - paddingVertical: theme.spacing.m_16, - }, - })); <% } %> diff --git a/cli/src/templates/packages/expo-router/tabs/app/_layout.tsx.ejs b/cli/src/templates/packages/expo-router/tabs/app/_layout.tsx.ejs index d63e74b2..18772c8b 100644 --- a/cli/src/templates/packages/expo-router/tabs/app/_layout.tsx.ejs +++ b/cli/src/templates/packages/expo-router/tabs/app/_layout.tsx.ejs @@ -9,23 +9,7 @@ <% if (props.internalizationPackage?.name === "i18next") { %> import '../translation'; <% } %> - -<% if (props.stylingPackage?.name === "tamagui") { %> - import React, { useEffect } from "react"; - import { TamaguiProvider } from 'tamagui' - import { SplashScreen, Stack } from "expo-router"; - import { useFonts } from "expo-font"; - - import config from '../tamagui.config' - - SplashScreen.preventAutoHideAsync(); -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { ThemeProvider } from '@shopify/restyle'; - import { Stack } from 'expo-router'; - import { theme } from 'theme'; -<% } else { %> import { Stack } from "expo-router"; -<% } %> <% if (props.analyticsPackage?.name === "vexo-analytics") { %> import { vexo } from 'vexo-analytics'; @@ -39,30 +23,11 @@ export const unstable_settings = { }; export default function RootLayout() { - <% if (props.stylingPackage?.name === "tamagui") { %> - const [loaded] = useFonts({ - Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"), - InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf") - }); - - useEffect(() => { - if (loaded) { - SplashScreen.hideAsync(); - } - }, [loaded]); - - if (!loaded) return null; - <% } %> - <% if (props.stylingPackage?.name === "unistyles") { %> - const { theme } = useUnistyles(); - <% } %> + <% if (props.stylingPackage?.name === "unistyles") { %> + const { theme } = useUnistyles(); + <% } %> - return ( - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> + return ( <% if (props.stylingPackage?.name === "unistyles") { %> <% } %> - - - - <% if (props.stylingPackage?.name === "tamagui") { %> - - <% } else if (props.stylingPackage?.name === "restyle") { %> - - <% } %> - ); + + + + ); } diff --git a/cli/src/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs b/cli/src/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs index edef7da2..2d95f231 100644 --- a/cli/src/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs @@ -11,20 +11,11 @@ import { Link, Stack } from 'expo-router'; <% } else if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, Text } from 'react-native'; - import { Container } from '@/components/Container'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - import { YStack } from "tamagui"; - import { Container, Main, Subtitle, Title } from "../tamagui.config"; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { Box, Text, makeStyles } from 'theme'; - import { Container } from '@/components/Container'; <% } %> export default function NotFoundScreen() { -<% if (props.stylingPackage?.name === "restyle") { %> - const styles = useStyles(); -<% } else if (props.stylingPackage?.name === "unistyles") {%> +<% if (props.stylingPackage?.name === "unistyles") {%> const { styles } = useStyles(stylesheet); <% } %> @@ -39,30 +30,6 @@ export default function NotFoundScreen() { - <% } else if (props.stylingPackage?.name === "tamagui") {%> - - -
- - {"This screen doesn't exist."} - - Go to home screen! - - -
- - <% } else if (props.stylingPackage?.name === "restyle") {%> - <> - - - {"This screen doesn't exist."} - - - Go to home screen! - - - - <% } else { %> <> @@ -113,11 +80,4 @@ export default function NotFoundScreen() { color: '#2e78b7', }, }); -<% } else if (props.stylingPackage?.name === "restyle") { %> - const useStyles = makeStyles((theme) => ({ - link: { - marginTop: theme.spacing.m_16, - paddingVertical: theme.spacing.m_16, - }, - })); <% } %> \ No newline at end of file diff --git a/cli/src/templates/packages/nativewindui/tabs/app/+not-found.tsx.ejs b/cli/src/templates/packages/nativewindui/tabs/app/+not-found.tsx.ejs index 79d6f3d5..54cc1793 100644 --- a/cli/src/templates/packages/nativewindui/tabs/app/+not-found.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/tabs/app/+not-found.tsx.ejs @@ -6,18 +6,9 @@ import { Link, Stack } from 'expo-router'; import { Text, View } from 'react-native'; <% } else if (props.stylingPackage?.name === "stylesheet") { %> import { StyleSheet, Text, View } from 'react-native'; -<% } else if (props.stylingPackage?.name === "tamagui") { %> - import { YStack } from "tamagui"; - import { Container, Main, Subtitle, Title } from "../tamagui.config"; -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { Box, Text, makeStyles } from 'theme'; <% } %> export default function NotFoundScreen() { -<% if (props.stylingPackage?.name === "restyle") { %> - const styles = useStyles(); -<% } %> - <% if (props.stylingPackage?.name === "unistyles") {%> const { styles } = useStyles(stylesheet); <% } %> @@ -33,30 +24,6 @@ export default function NotFoundScreen() { - <% } else if (props.stylingPackage?.name === "tamagui") {%> - - -
- - {"This screen doesn't exist."} - - Go to home screen! - - -
- - <% } else if (props.stylingPackage?.name === "restyle") {%> - <> - - - {"This screen doesn't exist."} - - - Go to home screen! - - - - <% } else { %> <> @@ -120,11 +87,4 @@ export default function NotFoundScreen() { color: '#2e78b7', }, }); -<% } else if (props.stylingPackage?.name === "restyle") { %> - const useStyles = makeStyles((theme) => ({ - link: { - marginTop: theme.spacing.m_16, - paddingVertical: theme.spacing.m_16, - }, - })); <% } %> \ No newline at end of file diff --git a/cli/src/templates/packages/react-navigation/App.tsx.ejs b/cli/src/templates/packages/react-navigation/App.tsx.ejs index 1d3cf1f1..5fe4be17 100644 --- a/cli/src/templates/packages/react-navigation/App.tsx.ejs +++ b/cli/src/templates/packages/react-navigation/App.tsx.ejs @@ -9,7 +9,7 @@ import './unistyles'; import { DefaultTheme, DarkTheme } from '@react-navigation/native'; import { useUnistyles } from 'react-native-unistyles'; import { useMemo } from 'react'; -<% } else if (props.stylingPackage?.name === "tamagui" || props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> +<% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> import { DefaultTheme, DarkTheme } from '@react-navigation/native'; import { useColorScheme } from 'react-native'; import { useMemo } from 'react'; @@ -18,19 +18,6 @@ import { useMemo } from 'react'; import './translation'; <% } %> import "react-native-gesture-handler"; -<% if (props.stylingPackage?.name === "tamagui") { %> - import React from "react"; - import { TamaguiProvider } from 'tamagui'; - import * as SplashScreen from 'expo-splash-screen'; - import { useFonts } from 'expo-font'; - - import config from './tamagui.config' - - SplashScreen.preventAutoHideAsync(); -<% } else if (props.stylingPackage?.name === "restyle") { %> - import { ThemeProvider } from '@shopify/restyle'; - import { theme } from 'theme'; -<% } %> <% if (props.analyticsPackage?.name === "vexo-analytics") { %> import { vexo } from 'vexo-analytics'; @@ -43,34 +30,7 @@ import "react-native-gesture-handler"; <% } %> export default function App() { - <% if (props.stylingPackage?.name === "tamagui") { %> - const [loaded] = useFonts({ - Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"), - InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"), - }); - - const colorScheme = useColorScheme(); - const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]); - - if (!loaded) { - return null; - } - - return ( - - SplashScreen.hideAsync()} /> - - ); - <% } else if (props.stylingPackage?.name === "restyle") { %> - const colorScheme = useColorScheme(); - const navigationTheme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]); - - return ( - - - - ); - <% } else if (props.stylingPackage?.name === "unistyles") { %> + <% if (props.stylingPackage?.name === "unistyles") { %> const { theme, rt } = useUnistyles(); const baseTheme = rt.colorScheme === 'dark' ? DarkTheme : DefaultTheme; diff --git a/cli/src/templates/packages/restyle/components/BackButton.tsx.ejs b/cli/src/templates/packages/restyle/components/BackButton.tsx.ejs deleted file mode 100644 index a23babd4..00000000 --- a/cli/src/templates/packages/restyle/components/BackButton.tsx.ejs +++ /dev/null @@ -1,15 +0,0 @@ -import { Feather } from '@expo/vector-icons'; -import { Box, Text, useTheme } from 'theme'; - -export const BackButton = ({ onPress }: { onPress: () => void }) => { - const { colors } = useTheme(); - - return ( - - - - Back - - - ); -}; diff --git a/cli/src/templates/packages/restyle/components/Button.tsx.ejs b/cli/src/templates/packages/restyle/components/Button.tsx.ejs deleted file mode 100644 index 298704f4..00000000 --- a/cli/src/templates/packages/restyle/components/Button.tsx.ejs +++ /dev/null @@ -1,40 +0,0 @@ -import { forwardRef } from 'react'; -import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native'; -import { Text, makeStyles } from 'theme'; - -type ButtonProps = { - title?: string; -} & TouchableOpacityProps; - -export const Button = forwardRef(({ title, ...touchableProps }, ref) => { - const styles = useStyles(); - - return ( - - - {title} - - - ); -}); - -Button.displayName = 'Button'; - -const useStyles = makeStyles((theme) => ({ - button: { - alignItems: 'center', - backgroundColor: theme.colors.purple, - borderRadius: theme.borderRadii.xl_24, - elevation: 5, - flexDirection: 'row', - justifyContent: 'center', - padding: theme.spacing.m_16, - shadowColor: theme.colors.black, - shadowOffset: { - height: 2, - width: 0, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - }, -})); diff --git a/cli/src/templates/packages/restyle/components/Container.tsx.ejs b/cli/src/templates/packages/restyle/components/Container.tsx.ejs deleted file mode 100644 index 1377f0d3..00000000 --- a/cli/src/templates/packages/restyle/components/Container.tsx.ejs +++ /dev/null @@ -1,6 +0,0 @@ -import { Box } from 'theme'; - -export const Container = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - diff --git a/cli/src/templates/packages/restyle/components/EditScreenInfo.tsx.ejs b/cli/src/templates/packages/restyle/components/EditScreenInfo.tsx.ejs deleted file mode 100644 index 573c2125..00000000 --- a/cli/src/templates/packages/restyle/components/EditScreenInfo.tsx.ejs +++ /dev/null @@ -1,29 +0,0 @@ -import { Box, Text } from 'theme'; - -<% if (props.internalizationPackage?.name === "i18next") { %> -import { useTranslation } from 'react-i18next'; -<% } %> - -export const EditScreenInfo = ({ path }: { path: string }) => { -<% if (props.internalizationPackage?.name === "i18next") { %> - const { t } = useTranslation(); - const title = t('getStarted'); - const description = t('changeCode') -<% } else { %> - const title = "Open up the code for this screen:" - const description = "Change any of the text, save the file, and your app will automatically update." -<% } %> - return ( - - - {title} - - - {path} - - - {description} - - - ); -}; diff --git a/cli/src/templates/packages/restyle/components/ScreenContent.tsx.ejs b/cli/src/templates/packages/restyle/components/ScreenContent.tsx.ejs deleted file mode 100644 index ab45e17b..00000000 --- a/cli/src/templates/packages/restyle/components/ScreenContent.tsx.ejs +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Box, Text } from 'theme'; - -import { EditScreenInfo } from './EditScreenInfo'; - -type ScreenContentProps = { - title: string; - path: string; - children?: React.ReactNode; -}; - -export const ScreenContent = ({ title, path, children }: ScreenContentProps ) => { - return ( - - {title} - - - {children} - - ); -}; diff --git a/cli/src/templates/packages/restyle/theme/Box.tsx.ejs b/cli/src/templates/packages/restyle/theme/Box.tsx.ejs deleted file mode 100644 index 188912c9..00000000 --- a/cli/src/templates/packages/restyle/theme/Box.tsx.ejs +++ /dev/null @@ -1,6 +0,0 @@ -import { createBox } from '@shopify/restyle'; -import { Theme } from './theme'; - -const Box = createBox(); - -export default Box; diff --git a/cli/src/templates/packages/restyle/theme/Text.tsx.ejs b/cli/src/templates/packages/restyle/theme/Text.tsx.ejs deleted file mode 100644 index b12acb19..00000000 --- a/cli/src/templates/packages/restyle/theme/Text.tsx.ejs +++ /dev/null @@ -1,6 +0,0 @@ -import { createText } from '@shopify/restyle'; -import { Theme } from './theme'; - -const Text = createText(); - -export default Text; diff --git a/cli/src/templates/packages/restyle/theme/index.ts.ejs b/cli/src/templates/packages/restyle/theme/index.ts.ejs deleted file mode 100644 index 121c7cc0..00000000 --- a/cli/src/templates/packages/restyle/theme/index.ts.ejs +++ /dev/null @@ -1,6 +0,0 @@ -import Box from './Box'; -import Text from './Text'; -import theme, { useTheme, Theme, makeStyles } from './theme'; - -export { theme, Box, Text, useTheme, Theme, makeStyles }; - diff --git a/cli/src/templates/packages/restyle/theme/theme.ts.ejs b/cli/src/templates/packages/restyle/theme/theme.ts.ejs deleted file mode 100644 index 149dfc81..00000000 --- a/cli/src/templates/packages/restyle/theme/theme.ts.ejs +++ /dev/null @@ -1,67 +0,0 @@ -import { createTheme, useTheme as useRestyleTheme } from '@shopify/restyle'; -import { ImageStyle, TextStyle, ViewStyle } from 'react-native'; - -type NamedStyles = { - [P in keyof T]: ViewStyle | TextStyle | ImageStyle; -}; - -const palette = { - gray: '#808080', - blue: '#007AFF', - darkGray: '#38434D', - white: '#FFFFFF', - black: '#000000', - purple: '#6366F1', -}; - -const theme = createTheme({ - colors: { - ...palette - }, - spacing: { - xs_4: 4, - s_8: 8, - sm_12: 12, - m_16: 16, - ml_24: 24, - l_32: 32, - xl_64: 64, - }, - borderRadii: { - s_3: 3, - m_6: 6, - l_12: 12, - xl_24: 24, - }, - textVariants: { - body: { - fontSize: 16, - }, - title: { fontSize: 20, fontWeight: 'bold' }, - large: { - fontSize: 36, - }, - extra_large: { - fontSize: 64, - fontWeight: 'bold', - }, - defaults: { - // We can define a default text variant here. - } - } -}); - -export const useTheme = () => { - return useRestyleTheme(); -}; - -export const makeStyles = | NamedStyles>( - styles: (theme: Theme) => T, -) => { - return () => { - return styles(theme); - }; -}; - -export type Theme = typeof theme; -export default theme; diff --git a/cli/src/templates/packages/tamagui/components/BackButton.tsx.ejs b/cli/src/templates/packages/tamagui/components/BackButton.tsx.ejs deleted file mode 100644 index ac2144b7..00000000 --- a/cli/src/templates/packages/tamagui/components/BackButton.tsx.ejs +++ /dev/null @@ -1,19 +0,0 @@ -import { Feather } from '@expo/vector-icons'; -import { Button, Text } from 'tamagui'; - -export const BackButton = ({ onPress }: { onPress: () => void }) => { - return ( - - ); -}; diff --git a/cli/src/templates/packages/tamagui/components/Button.tsx.ejs b/cli/src/templates/packages/tamagui/components/Button.tsx.ejs deleted file mode 100644 index 2ba7a546..00000000 --- a/cli/src/templates/packages/tamagui/components/Button.tsx.ejs +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentProps, forwardRef } from 'react'; -import { TamaguiElement } from 'tamagui'; - -import { Button as TButton } from '../tamagui.config'; - -type ButtonProps = { - title: string; -} & ComponentProps; - -export const Button = forwardRef(({ title, ...tButtonProps }, ref) => { - return ( - - {title} - - ); -}); - -Button.displayName = 'Button'; diff --git a/cli/src/templates/packages/tamagui/components/Container.tsx.ejs b/cli/src/templates/packages/tamagui/components/Container.tsx.ejs deleted file mode 100644 index 1481d88a..00000000 --- a/cli/src/templates/packages/tamagui/components/Container.tsx.ejs +++ /dev/null @@ -1,6 +0,0 @@ -import { YStack } from 'tamagui'; - -export const Container = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - diff --git a/cli/src/templates/packages/tamagui/components/EditScreenInfo.tsx.ejs b/cli/src/templates/packages/tamagui/components/EditScreenInfo.tsx.ejs deleted file mode 100644 index 7c832d68..00000000 --- a/cli/src/templates/packages/tamagui/components/EditScreenInfo.tsx.ejs +++ /dev/null @@ -1,29 +0,0 @@ -import { YStack, H4, Paragraph } from 'tamagui'; - -<% if (props.internalizationPackage?.name === "i18next") { %> -import { useTranslation } from 'react-i18next'; -<% } %> - -export const EditScreenInfo = ({ path }: { path: string }) => { -<% if (props.internalizationPackage?.name === "i18next") { %> - const { t } = useTranslation(); - const title = t('getStarted'); - const description = t('changeCode') -<% } else { %> - const title = "Open up the code for this screen:" - const description = "Change any of the text, save the file, and your app will automatically update." -<% } %> - return ( - - -

{title}

- - {path} - - - {description} - - - - ); -}; diff --git a/cli/src/templates/packages/tamagui/components/ScreenContent.tsx.ejs b/cli/src/templates/packages/tamagui/components/ScreenContent.tsx.ejs deleted file mode 100644 index 3bad0964..00000000 --- a/cli/src/templates/packages/tamagui/components/ScreenContent.tsx.ejs +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { YStack, H2, Separator, Theme } from 'tamagui'; - -import { EditScreenInfo } from './EditScreenInfo'; - -type ScreenContentProps = { - title: string; - path: string; - children?: React.ReactNode; -}; - -export const ScreenContent = ({ title, path, children}: ScreenContentProps) => { - return ( - - -

{title}

- - - {children} - - - ); -}; diff --git a/cli/src/templates/packages/tamagui/tamagui.config.ts.ejs b/cli/src/templates/packages/tamagui/tamagui.config.ts.ejs deleted file mode 100644 index a715f77e..00000000 --- a/cli/src/templates/packages/tamagui/tamagui.config.ts.ejs +++ /dev/null @@ -1,130 +0,0 @@ -import { createAnimations } from "@tamagui/animations-react-native"; -import { createInterFont } from "@tamagui/font-inter"; -import { createMedia } from "@tamagui/react-native-media-driver"; -import { shorthands } from "@tamagui/shorthands"; -import { themes, tokens } from "@tamagui/themes"; -<% if (props.navigationPackage?.type === "navigation") { %> - import { createTamagui, styled, SizableText, H1, YStack, Button as ButtonTamagui } from "tamagui"; -<% } else { %> - import { createTamagui } from "tamagui"; -<% } %> - -const animations = createAnimations({ - bouncy: { - damping: 10, - mass: 0.9, - stiffness: 100, - type: 'spring', - }, - lazy: { - damping: 20, - type: 'spring', - stiffness: 60, - }, - quick: { - damping: 20, - mass: 1.2, - stiffness: 250, - type: 'spring', - }, -}); - -const headingFont = createInterFont(); - -const bodyFont = createInterFont(); - -<% if (props.navigationPackage?.type === "navigation") { %> - export const Container = styled(YStack, { - flex: 1, - padding: 24, - }); - - export const Main = styled(YStack, { - flex: 1, - justifyContent: 'space-between', - maxWidth: 960, - }); - - export const Title = styled(H1, { - color: '#000', - size: '$12', - }); - - export const Subtitle = styled(SizableText, { - color: '#38434D', - size: '$9', - }); - - export const Button = styled(ButtonTamagui, { - backgroundColor: '#6366F1', - borderRadius: 28, - hoverStyle: { - backgroundColor: '#5a5fcf', - }, - pressStyle: { - backgroundColor: '#5a5fcf', - }, - maxWidth: 500, - - // Shaddows - shadowColor: '#000', - shadowOffset: { - height: 2, - width: 0, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - - // Button text - color: '#FFFFFF', - fontWeight: '600', // Is not passed down to the text. Probably a bug in Tamagui: https://github.com/tamagui/tamagui/issues/1156#issuecomment-1802594930 - fontSize: 16, - }); -<% } %> - -const config = createTamagui({ - light: { - color: { - background: "gray", - text: "black", - } - }, - defaultFont: "body", - animations, - shouldAddPrefersColorThemes: true, - themeClassNameOnRoot: true, - shorthands, - fonts: { - body: bodyFont, - heading: headingFont, - }, - themes, - tokens, - media: createMedia({ - xs: { maxWidth: 660 }, - sm: { maxWidth: 800 }, - md: { maxWidth: 1020 }, - lg: { maxWidth: 1280 }, - xl: { maxWidth: 1420 }, - xxl: { maxWidth: 1600 }, - gtXs: { minWidth: 660 + 1 }, - gtSm: { minWidth: 800 + 1 }, - gtMd: { minWidth: 1020 + 1 }, - gtLg: { minWidth: 1280 + 1 }, - short: { maxHeight: 820 }, - tall: { minHeight: 820 }, - hoverNone: { hover: "none" }, - pointerCoarse: { pointer: "coarse" }, - }), -}); - -type AppConfig = typeof config; - -// Enable auto-completion of props shorthand (ex: jc="center") for Tamagui templates. -// Docs: https://tamagui.dev/docs/core/configuration - -declare module "tamagui" { - interface TamaguiCustomConfig extends AppConfig {} -} - -export default config; diff --git a/cli/src/types.ts b/cli/src/types.ts index 7a16780e..db4b548e 100644 --- a/cli/src/types.ts +++ b/cli/src/types.ts @@ -24,8 +24,6 @@ export const availablePackages = [ 'reactnavigation', 'stylesheet', 'supabase', - 'tamagui', - 'restyle', 'unistyles', 'i18next', 'zustand', @@ -38,7 +36,7 @@ export type NavigationSelect = 'react-navigation' | 'expo-router' | undefined; export type NavigationTypes = 'stack' | 'tabs' | 'drawer + tabs' | undefined; -export type StylingSelect = 'nativewind' | 'restyle' | 'stylesheet' | 'tamagui' | 'unistyles' | 'nativewindui'; +export type StylingSelect = 'nativewind' | 'stylesheet' | 'unistyles' | 'nativewindui'; export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun'; diff --git a/cli/src/utilities/configureProjectFiles.ts b/cli/src/utilities/configureProjectFiles.ts index dff3309e..c1d016e9 100644 --- a/cli/src/utilities/configureProjectFiles.ts +++ b/cli/src/utilities/configureProjectFiles.ts @@ -140,35 +140,6 @@ export function configureProjectFiles( files = [...files, ...nativewindFiles]; } - // add tamagui files if needed - // modify base files with tamagui specifications - if (stylingPackage?.name === 'tamagui') { - const tamaguiFiles = [ - 'packages/tamagui/tamagui.config.ts.ejs', - 'packages/tamagui/components/Container.tsx.ejs', - 'packages/tamagui/components/ScreenContent.tsx.ejs', - 'packages/tamagui/components/EditScreenInfo.tsx.ejs' - ]; - - files = [...files, ...tamaguiFiles]; - } - - // add restyle files if needed - // modify base files with restyle specifications - if (stylingPackage?.name === 'restyle') { - const restyleFiles = [ - 'packages/restyle/components/Container.tsx.ejs', - 'packages/restyle/components/ScreenContent.tsx.ejs', - 'packages/restyle/components/EditScreenInfo.tsx.ejs', - 'packages/restyle/theme/theme.ts.ejs', - 'packages/restyle/theme/Box.tsx.ejs', - 'packages/restyle/theme/Text.tsx.ejs', - 'packages/restyle/theme/index.ts.ejs' - ]; - - files = [...files, ...restyleFiles]; - } - // add unistyles files if needed // modify base files with unis specifications if (stylingPackage?.name === 'unistyles') { @@ -193,18 +164,12 @@ export function configureProjectFiles( ]; // add the necessary components for the navigation - if (stylingPackage?.name === 'restyle') { - reactNavigationFiles.push('packages/restyle/components/Button.tsx.ejs'); - reactNavigationFiles.push('packages/restyle/components/BackButton.tsx.ejs'); - } else if (stylingPackage?.name === 'nativewind') { + if (stylingPackage?.name === 'nativewind') { reactNavigationFiles.push('packages/nativewind/components/Button.tsx.ejs'); reactNavigationFiles.push('packages/nativewind/components/BackButton.tsx.ejs'); } else if (stylingPackage?.name === 'unistyles') { reactNavigationFiles.push('packages/unistyles/components/Button.tsx.ejs'); reactNavigationFiles.push('packages/unistyles/components/BackButton.tsx.ejs'); - } else if (stylingPackage?.name === 'tamagui') { - reactNavigationFiles.push('packages/tamagui/components/Button.tsx.ejs'); - reactNavigationFiles.push('packages/tamagui/components/BackButton.tsx.ejs'); } else { reactNavigationFiles.push('base/components/Button.tsx.ejs'); reactNavigationFiles.push('base/components/BackButton.tsx.ejs'); @@ -256,15 +221,11 @@ export function configureProjectFiles( if (navigationPackage?.name === 'expo-router') { let expoRouterFiles = ['packages/expo-router/expo-env.d.ts', 'packages/expo-router/metro.config.js.ejs']; - if (stylingPackage?.name === 'restyle') { - expoRouterFiles.push('packages/restyle/components/Button.tsx.ejs'); - } else if (stylingPackage?.name === 'nativewind') { + if (stylingPackage?.name === 'nativewind') { expoRouterFiles.push('packages/nativewind/components/Button.tsx.ejs'); } else if (stylingPackage?.name === 'unistyles') { expoRouterFiles.push('packages/unistyles/components/Button.tsx.ejs'); expoRouterFiles.push('packages/expo-router/index.js.ejs'); - } else if (stylingPackage?.name === 'tamagui') { - expoRouterFiles.push('packages/tamagui/components/Button.tsx.ejs'); } else if (stylingPackage?.name === 'stylesheet') { expoRouterFiles.push('base/components/Button.tsx.ejs'); } diff --git a/cli/src/utilities/generateProjectFiles.ts b/cli/src/utilities/generateProjectFiles.ts index 431e841b..e58439f3 100644 --- a/cli/src/utilities/generateProjectFiles.ts +++ b/cli/src/utilities/generateProjectFiles.ts @@ -35,14 +35,10 @@ export function generateProjectFiles( target = target.replace('base/', ''); - if (stylingPackage?.name === 'tamagui') { - target = target.replace('packages/tamagui/', ''); - } else if (stylingPackage?.name === 'unistyles') { + if (stylingPackage?.name === 'unistyles') { target = target.replace('packages/unistyles/', ''); } else if (stylingPackage?.name === 'nativewind') { target = target.replace('packages/nativewind/', ''); - } else if (stylingPackage?.name === 'restyle') { - target = target.replace('packages/restyle/', ''); } else if (stylingPackage?.name === 'nativewindui') { target = target.replace('packages/nativewindui/', ''); } diff --git a/cli/src/utilities/runCLI.ts b/cli/src/utilities/runCLI.ts index c42905f9..bc338e9f 100644 --- a/cli/src/utilities/runCLI.ts +++ b/cli/src/utilities/runCLI.ts @@ -263,16 +263,12 @@ export async function runCLI(toolbox: Toolbox, projectName: string): Promise - restyle - restyle -
- v2 -
-

Restyle

- - Themed UI in React-Native from Shopify - - diff --git a/www/src/components/landing/stack/stackSection.astro b/www/src/components/landing/stack/stackSection.astro index e533936b..2e53f464 100644 --- a/www/src/components/landing/stack/stackSection.astro +++ b/www/src/components/landing/stack/stackSection.astro @@ -3,11 +3,9 @@ import TypeScript from "./typeScript.astro"; import Nativewind from "./nativewind.astro"; import NativewindUI from "./nativewindUI.astro"; import ReactNavigation from "./reactNavigation.astro"; -import Tamagui from "./tamagui.astro"; import ExpoRouter from "./expoRouter.astro"; import Supabase from "./supabase.astro"; import Firebase from "./firebase.astro"; -import Restyle from "./restyle.astro"; import Unistyles from "./unistyles.astro"; --- @@ -16,11 +14,9 @@ import Unistyles from "./unistyles.astro"; - -
diff --git a/www/src/components/landing/stack/tamagui.astro b/www/src/components/landing/stack/tamagui.astro deleted file mode 100644 index d766dd64..00000000 --- a/www/src/components/landing/stack/tamagui.astro +++ /dev/null @@ -1,33 +0,0 @@ ---- - ---- - - - tamagui -
- v1 -
-

- Tamagui -

- - Universal UI for React Native - - From 11da1aef1dcfa2392e92f432e0d61803490c0390 Mon Sep 17 00:00:00 2001 From: Dan Stepanov Date: Mon, 6 Oct 2025 00:04:18 -0700 Subject: [PATCH 4/5] update test snapshots after removing tamagui and restyle --- .changeset/nine-cars-look.md | 6 + .../cli-integration.test.ts.snap | 830 ++---------------- cli/__tests__/cli-integration.test.ts | 48 +- 3 files changed, 126 insertions(+), 758 deletions(-) create mode 100644 .changeset/nine-cars-look.md diff --git a/.changeset/nine-cars-look.md b/.changeset/nine-cars-look.md new file mode 100644 index 00000000..b3d466b1 --- /dev/null +++ b/.changeset/nine-cars-look.md @@ -0,0 +1,6 @@ +--- +'rn-new': patch +'create-expo-stack': patch +--- + +update test snapshots after removing tamagui and restyle diff --git a/cli/__tests__/__snapshots__/cli-integration.test.ts.snap b/cli/__tests__/__snapshots__/cli-integration.test.ts.snap index ea2262d8..a950fad3 100644 --- a/cli/__tests__/__snapshots__/cli-integration.test.ts.snap +++ b/cli/__tests__/__snapshots__/cli-integration.test.ts.snap @@ -1,24 +1,15 @@ // Bun Snapshot v1, https://bun.sh/docs/test/snapshots -exports[`generates a project with --expo-router --nativewind --bun --overwrite: --expo-router, --nativewind, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --blank --bun --overwrite: --blank, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", - "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -27,11 +18,9 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -39,7 +28,6 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -47,7 +35,7 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: } `; -exports[`generates a project with --expo-router --nativewind --bun --overwrite: --expo-router, --nativewind, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --blank --bun --overwrite: --blank, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { @@ -66,14 +54,7 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: }, "packages": [ { - "name": "expo-router", - "options": { - "type": "stack", - }, - "type": "navigation", - }, - { - "name": "nativewind", + "name": "stylesheet", "type": "styling", }, ], @@ -81,17 +62,11 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: } `; -exports[`generates a project with --expo-router --nativewind --bun --overwrite: --expo-router, --nativewind, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --blank --bun --overwrite: --blank, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", - "./myTestProject/app-env.d.ts", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/details.tsx", - "./myTestProject/app/index.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", @@ -101,40 +76,26 @@ exports[`generates a project with --expo-router --nativewind --bun --overwrite: "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", "./myTestProject/components/ScreenContent.tsx", "./myTestProject/eslint.config.js", - "./myTestProject/expo-env.d.ts", - "./myTestProject/global.css", - "./myTestProject/metro.config.js", "./myTestProject/package.json", "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --stylesheet --bun --overwrite: --expo-router, --stylesheet, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --blank --no-install --bun --overwrite: --blank, --no-install, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", - "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -143,11 +104,9 @@ exports[`generates a project with --expo-router --stylesheet --bun --overwrite: "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -155,7 +114,6 @@ exports[`generates a project with --expo-router --stylesheet --bun --overwrite: "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -163,14 +121,14 @@ exports[`generates a project with --expo-router --stylesheet --bun --overwrite: } `; -exports[`generates a project with --expo-router --stylesheet --bun --overwrite: --expo-router, --stylesheet, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --blank --no-install --bun --overwrite: --blank, --no-install, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": false, + "noInstall": true, "overwrite": true, "packageManager": "bun", "publish": false, @@ -181,13 +139,6 @@ exports[`generates a project with --expo-router --stylesheet --bun --overwrite: "version": undefined, }, "packages": [ - { - "name": "expo-router", - "options": { - "type": "stack", - }, - "type": "navigation", - }, { "name": "stylesheet", "type": "styling", @@ -197,57 +148,39 @@ exports[`generates a project with --expo-router --stylesheet --bun --overwrite: } `; -exports[`generates a project with --expo-router --stylesheet --bun --overwrite: --expo-router, --stylesheet, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --blank --no-install --bun --overwrite: --blank, --no-install, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/details.tsx", - "./myTestProject/app/index.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", "./myTestProject/assets/icon.png", "./myTestProject/assets/splash.png", "./myTestProject/babel.config.js", - "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", "./myTestProject/components/ScreenContent.tsx", "./myTestProject/eslint.config.js", - "./myTestProject/expo-env.d.ts", - "./myTestProject/metro.config.js", "./myTestProject/package.json", "./myTestProject/prettier.config.js", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --tabs --nativewind --bun --overwrite: --expo-router, --tabs, --nativewind, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --stylesheet --bun --overwrite: --stylesheet, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", - "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -256,11 +189,9 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -268,7 +199,6 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -276,7 +206,7 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over } `; -exports[`generates a project with --expo-router --tabs --nativewind --bun --overwrite: --expo-router, --tabs, --nativewind, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --stylesheet --bun --overwrite: --stylesheet, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { @@ -295,14 +225,7 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over }, "packages": [ { - "name": "expo-router", - "options": { - "type": "tabs", - }, - "type": "navigation", - }, - { - "name": "nativewind", + "name": "stylesheet", "type": "styling", }, ], @@ -310,20 +233,11 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over } `; -exports[`generates a project with --expo-router --tabs --nativewind --bun --overwrite: --expo-router, --tabs, --nativewind, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --stylesheet --bun --overwrite: --stylesheet, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", - "./myTestProject/app-env.d.ts", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(tabs)", - "./myTestProject/app/(tabs)/_layout.tsx", - "./myTestProject/app/(tabs)/index.tsx", - "./myTestProject/app/(tabs)/two.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", @@ -333,42 +247,26 @@ exports[`generates a project with --expo-router --tabs --nativewind --bun --over "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", "./myTestProject/eslint.config.js", - "./myTestProject/expo-env.d.ts", - "./myTestProject/global.css", - "./myTestProject/metro.config.js", "./myTestProject/package.json", "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --tabs --stylesheet --bun --overwrite: --expo-router, --tabs, --stylesheet, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --stylesheet --no-install --bun --overwrite: --stylesheet, --no-install, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", - "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -377,11 +275,9 @@ exports[`generates a project with --expo-router --tabs --stylesheet --bun --over "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -389,7 +285,6 @@ exports[`generates a project with --expo-router --tabs --stylesheet --bun --over "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -397,14 +292,14 @@ exports[`generates a project with --expo-router --tabs --stylesheet --bun --over } `; -exports[`generates a project with --expo-router --tabs --stylesheet --bun --overwrite: --expo-router, --tabs, --stylesheet, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --stylesheet --no-install --bun --overwrite: --stylesheet, --no-install, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": false, + "noInstall": true, "overwrite": true, "packageManager": "bun", "publish": false, @@ -415,13 +310,6 @@ exports[`generates a project with --expo-router --tabs --stylesheet --bun --over "version": undefined, }, "packages": [ - { - "name": "expo-router", - "options": { - "type": "tabs", - }, - "type": "navigation", - }, { "name": "stylesheet", "type": "styling", @@ -431,46 +319,33 @@ exports[`generates a project with --expo-router --tabs --stylesheet --bun --over } `; -exports[`generates a project with --expo-router --tabs --stylesheet --bun --overwrite: --expo-router, --tabs, --stylesheet, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --stylesheet --no-install --bun --overwrite: --stylesheet, --no-install, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(tabs)", - "./myTestProject/app/(tabs)/_layout.tsx", - "./myTestProject/app/(tabs)/index.tsx", - "./myTestProject/app/(tabs)/two.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", "./myTestProject/assets/icon.png", "./myTestProject/assets/splash.png", "./myTestProject/babel.config.js", - "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", "./myTestProject/eslint.config.js", - "./myTestProject/expo-env.d.ts", - "./myTestProject/metro.config.js", "./myTestProject/package.json", "./myTestProject/prettier.config.js", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun --overwrite: --expo-router, --drawer+tabs, --nativewind, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --stylesheet --expo-router --bun --overwrite: --stylesheet, --expo-router, --bun, --overwrite-package-json 1`] = ` { "dependencies": { + "@expo/vector-icons": "", "@react-navigation/native": "", "expo": "", "expo-constants": "", @@ -478,7 +353,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun "expo-router": "", "expo-status-bar": "", "expo-system-ui": "", - "nativewind": "", + "expo-web-browser": "", "react": "", "react-dom": "", "react-native": "", @@ -487,6 +362,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun "react-native-safe-area-context": "", "react-native-screens": "", "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -495,8 +371,6 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, "main": "expo-router/entry", @@ -507,7 +381,6 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -515,7 +388,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun --overwrite: --expo-router, --drawer+tabs, --nativewind, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --stylesheet --expo-router --bun --overwrite: --stylesheet, --expo-router, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { @@ -536,12 +409,12 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun { "name": "expo-router", "options": { - "type": "drawer + tabs", + "type": "stack", }, "type": "navigation", }, { - "name": "nativewind", + "name": "stylesheet", "type": "styling", }, ], @@ -549,23 +422,16 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun --overwrite: --expo-router, --drawer+tabs, --nativewind, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --stylesheet --expo-router --bun --overwrite: --stylesheet, --expo-router, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", "./myTestProject/app", - "./myTestProject/app-env.d.ts", "./myTestProject/app.json", "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(drawer)", - "./myTestProject/app/(drawer)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)", - "./myTestProject/app/(drawer)/(tabs)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)/index.tsx", - "./myTestProject/app/(drawer)/(tabs)/two.tsx", - "./myTestProject/app/(drawer)/index.tsx", "./myTestProject/app/+html.tsx", "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/app/details.tsx", + "./myTestProject/app/index.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", @@ -578,23 +444,20 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewind --bun "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", "./myTestProject/eslint.config.js", "./myTestProject/expo-env.d.ts", - "./myTestProject/global.css", "./myTestProject/metro.config.js", "./myTestProject/package.json", "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun --overwrite: --expo-router, --drawer+tabs, --stylesheet, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --stylesheet --expo-router --no-install --bun --overwrite: --stylesheet, --expo-router, --no-install, --bun, --overwrite-package-json 1`] = ` { "dependencies": { + "@expo/vector-icons": "", "@react-navigation/native": "", "expo": "", "expo-constants": "", @@ -602,7 +465,7 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun "expo-router": "", "expo-status-bar": "", "expo-system-ui": "", - "nativewind": "", + "expo-web-browser": "", "react": "", "react-dom": "", "react-native": "", @@ -611,6 +474,7 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun "react-native-safe-area-context": "", "react-native-screens": "", "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -619,8 +483,6 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun "eslint-config-expo": "", "eslint-config-prettier": "", "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", "typescript": "", }, "main": "expo-router/entry", @@ -631,7 +493,6 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", "ios": "expo start --ios", "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", "start": "expo start", "web": "expo start --web", }, @@ -639,14 +500,14 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun } `; -exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun --overwrite: --expo-router, --drawer+tabs, --stylesheet, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --stylesheet --expo-router --no-install --bun --overwrite: --stylesheet, --expo-router, --no-install, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": false, + "noInstall": true, "overwrite": true, "packageManager": "bun", "publish": false, @@ -660,7 +521,7 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun { "name": "expo-router", "options": { - "type": "drawer + tabs", + "type": "stack", }, "type": "navigation", }, @@ -673,37 +534,28 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun } `; -exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun --overwrite: --expo-router, --drawer+tabs, --stylesheet, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --stylesheet --expo-router --no-install --bun --overwrite: --stylesheet, --expo-router, --no-install, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", "./myTestProject/app", "./myTestProject/app.json", "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(drawer)", - "./myTestProject/app/(drawer)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)", - "./myTestProject/app/(drawer)/(tabs)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)/index.tsx", - "./myTestProject/app/(drawer)/(tabs)/two.tsx", - "./myTestProject/app/(drawer)/index.tsx", "./myTestProject/app/+html.tsx", "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/app/details.tsx", + "./myTestProject/app/index.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", "./myTestProject/assets/icon.png", "./myTestProject/assets/splash.png", "./myTestProject/babel.config.js", - "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", "./myTestProject/eslint.config.js", "./myTestProject/expo-env.d.ts", "./myTestProject/metro.config.js", @@ -713,25 +565,17 @@ exports[`generates a project with --expo-router --drawer+tabs --stylesheet --bun ] `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --selected-components=date-picker,picker,text --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --selected-components=date-picker,picker,text, --expo-router, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --nativewind --bun --overwrite: --nativewind, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -744,7 +588,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --s "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -760,7 +604,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --s } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --selected-components=date-picker,picker,text --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --selected-components=date-picker,picker,text, --expo-router, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --nativewind --bun --overwrite: --nativewind, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { @@ -779,44 +623,19 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --s }, "packages": [ { - "name": "nativewindui", - "options": { - "selectedComponents": [ - "date-picker", - "picker", - "text", - ], - }, + "name": "nativewind", "type": "styling", }, - { - "name": "expo-router", - "options": { - "type": "drawer + tabs", - }, - "type": "navigation", - }, ], "projectName": "myTestProject", } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --selected-components=date-picker,picker,text --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --selected-components=date-picker,picker,text, --expo-router, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --nativewind --bun --overwrite: --nativewind, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(drawer)", - "./myTestProject/app/(drawer)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)", - "./myTestProject/app/(drawer)/(tabs)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)/index.tsx", - "./myTestProject/app/(drawer)/(tabs)/two.tsx", - "./myTestProject/app/(drawer)/index.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", @@ -826,59 +645,31 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --s "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/BackButton.tsx", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", - "./myTestProject/components/nativewindui", - "./myTestProject/components/nativewindui/Button.tsx", - "./myTestProject/components/nativewindui/DatePicker", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.android.tsx", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.tsx", - "./myTestProject/components/nativewindui/DatePicker/index.ts", - "./myTestProject/components/nativewindui/Picker.tsx", - "./myTestProject/components/nativewindui/Text.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", - "./myTestProject/components/ThemeToggle.tsx", "./myTestProject/eslint.config.js", "./myTestProject/global.css", - "./myTestProject/lib", - "./myTestProject/lib/cn.ts", - "./myTestProject/lib/useColorScheme.tsx", - "./myTestProject/lib/useHeaderSearchBar.tsx", "./myTestProject/metro.config.js", "./myTestProject/nativewind-env.d.ts", "./myTestProject/package.json", "./myTestProject/prettier.config.js", "./myTestProject/tailwind.config.js", - "./myTestProject/theme", - "./myTestProject/theme/colors.ts", - "./myTestProject/theme/index.ts", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --expo-router, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-package-json 1`] = ` { "dependencies": { - "@react-navigation/native": "", "expo": "", - "expo-constants": "", - "expo-linking": "", - "expo-router": "", "expo-status-bar": "", - "expo-system-ui": "", "nativewind": "", "react": "", - "react-dom": "", "react-native": "", - "react-native-gesture-handler": "", "react-native-reanimated": "", "react-native-safe-area-context": "", - "react-native-screens": "", - "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -891,7 +682,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --e "tailwindcss": "", "typescript": "", }, - "main": "expo-router/entry", + "main": "node_modules/expo/AppEntry.js", "name": "myTestProject", "private": true, "scripts": { @@ -907,14 +698,14 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --e } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --expo-router, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": false, + "noInstall": true, "overwrite": true, "packageManager": "bun", "publish": false, @@ -926,104 +717,45 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --e }, "packages": [ { - "name": "nativewindui", - "options": { - "selectedComponents": [ - "action-sheet", - "activity-indicator", - "activity-view", - "avatar", - "date-picker", - "picker", - "progress-indicator", - "ratings-indicator", - "slider", - "text", - "toggle", - ], - }, + "name": "nativewind", "type": "styling", }, - { - "name": "expo-router", - "options": { - "type": "drawer + tabs", - }, - "type": "navigation", - }, ], "projectName": "myTestProject", } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --expo-router, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", - "./myTestProject/app", "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(drawer)", - "./myTestProject/app/(drawer)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)", - "./myTestProject/app/(drawer)/(tabs)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)/index.tsx", - "./myTestProject/app/(drawer)/(tabs)/two.tsx", - "./myTestProject/app/(drawer)/index.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", + "./myTestProject/App.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", "./myTestProject/assets/icon.png", "./myTestProject/assets/splash.png", "./myTestProject/babel.config.js", - "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/BackButton.tsx", - "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", - "./myTestProject/components/nativewindui", - "./myTestProject/components/nativewindui/ActivityIndicator.tsx", - "./myTestProject/components/nativewindui/Avatar.tsx", - "./myTestProject/components/nativewindui/Button.tsx", - "./myTestProject/components/nativewindui/DatePicker", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.android.tsx", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.tsx", - "./myTestProject/components/nativewindui/DatePicker/index.ts", - "./myTestProject/components/nativewindui/Picker.tsx", - "./myTestProject/components/nativewindui/ProgressIndicator.tsx", - "./myTestProject/components/nativewindui/Sheet.tsx", - "./myTestProject/components/nativewindui/Slider.tsx", - "./myTestProject/components/nativewindui/Text.tsx", - "./myTestProject/components/nativewindui/Toggle.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", - "./myTestProject/components/ThemeToggle.tsx", "./myTestProject/eslint.config.js", "./myTestProject/global.css", - "./myTestProject/lib", - "./myTestProject/lib/cn.ts", - "./myTestProject/lib/useColorScheme.tsx", - "./myTestProject/lib/useHeaderSearchBar.tsx", "./myTestProject/metro.config.js", "./myTestProject/nativewind-env.d.ts", "./myTestProject/package.json", "./myTestProject/prettier.config.js", "./myTestProject/tailwind.config.js", - "./myTestProject/theme", - "./myTestProject/theme/colors.ts", - "./myTestProject/theme/index.ts", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --nativewindui --no-install --bun --overwrite: --nativewindui, --no-install, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --nativewind --expo-router --bun --overwrite: --nativewind, --expo-router, --bun, --overwrite-package-json 1`] = ` { "dependencies": { + "@expo/vector-icons": "", "@react-navigation/native": "", "expo": "", "expo-constants": "", @@ -1031,6 +763,7 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: "expo-router": "", "expo-status-bar": "", "expo-system-ui": "", + "expo-web-browser": "", "nativewind": "", "react": "", "react-dom": "", @@ -1040,6 +773,7 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: "react-native-safe-area-context": "", "react-native-screens": "", "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -1068,14 +802,14 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: } `; -exports[`generates a project with --nativewindui --no-install --bun --overwrite: --nativewindui, --no-install, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --nativewind --expo-router --bun --overwrite: --nativewind, --expo-router, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": true, + "noInstall": false, "overwrite": true, "packageManager": "bun", "publish": false, @@ -1086,25 +820,6 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: "version": undefined, }, "packages": [ - { - "name": "nativewindui", - "options": { - "selectedComponents": [ - "action-sheet", - "activity-indicator", - "activity-view", - "avatar", - "date-picker", - "picker", - "progress-indicator", - "ratings-indicator", - "slider", - "text", - "toggle", - ], - }, - "type": "styling", - }, { "name": "expo-router", "options": { @@ -1112,12 +827,16 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: }, "type": "navigation", }, + { + "name": "nativewind", + "type": "styling", + }, ], "projectName": "myTestProject", } `; -exports[`generates a project with --nativewindui --no-install --bun --overwrite: --nativewindui, --no-install, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --nativewind --expo-router --bun --overwrite: --nativewind, --expo-router, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", "./myTestProject/app", @@ -1125,59 +844,37 @@ exports[`generates a project with --nativewindui --no-install --bun --overwrite: "./myTestProject/app/_layout.tsx", "./myTestProject/app/+html.tsx", "./myTestProject/app/+not-found.tsx", + "./myTestProject/app/details.tsx", "./myTestProject/app/index.tsx", - "./myTestProject/app/modal.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", "./myTestProject/assets/icon.png", "./myTestProject/assets/splash.png", "./myTestProject/babel.config.js", + "./myTestProject/bun.lock", "./myTestProject/cesconfig.jsonc", "./myTestProject/components", - "./myTestProject/components/BackButton.tsx", "./myTestProject/components/Button.tsx", "./myTestProject/components/Container.tsx", "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", - "./myTestProject/components/nativewindui", - "./myTestProject/components/nativewindui/ActivityIndicator.tsx", - "./myTestProject/components/nativewindui/Avatar.tsx", - "./myTestProject/components/nativewindui/Button.tsx", - "./myTestProject/components/nativewindui/DatePicker", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.android.tsx", - "./myTestProject/components/nativewindui/DatePicker/DatePicker.tsx", - "./myTestProject/components/nativewindui/DatePicker/index.ts", - "./myTestProject/components/nativewindui/Picker.tsx", - "./myTestProject/components/nativewindui/ProgressIndicator.tsx", - "./myTestProject/components/nativewindui/Sheet.tsx", - "./myTestProject/components/nativewindui/Slider.tsx", - "./myTestProject/components/nativewindui/Text.tsx", - "./myTestProject/components/nativewindui/Toggle.tsx", "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", - "./myTestProject/components/ThemeToggle.tsx", "./myTestProject/eslint.config.js", + "./myTestProject/expo-env.d.ts", "./myTestProject/global.css", - "./myTestProject/lib", - "./myTestProject/lib/cn.ts", - "./myTestProject/lib/useColorScheme.tsx", - "./myTestProject/lib/useHeaderSearchBar.tsx", "./myTestProject/metro.config.js", "./myTestProject/nativewind-env.d.ts", "./myTestProject/package.json", "./myTestProject/prettier.config.js", "./myTestProject/tailwind.config.js", - "./myTestProject/theme", - "./myTestProject/theme/colors.ts", - "./myTestProject/theme/index.ts", "./myTestProject/tsconfig.json", ] `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --blank --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --blank, --expo-router, --bun, --overwrite-package-json 1`] = ` +exports[`generates a project with --nativewind --expo-router --no-install --bun --overwrite: --nativewind, --expo-router, --no-install, --bun, --overwrite-package-json 1`] = ` { "dependencies": { + "@expo/vector-icons": "", "@react-navigation/native": "", "expo": "", "expo-constants": "", @@ -1185,6 +882,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --b "expo-router": "", "expo-status-bar": "", "expo-system-ui": "", + "expo-web-browser": "", "nativewind": "", "react": "", "react-dom": "", @@ -1194,6 +892,7 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --b "react-native-safe-area-context": "", "react-native-screens": "", "react-native-web": "", + "react-native-worklets": "", }, "devDependencies": { "@babel/core": "", @@ -1222,14 +921,14 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --b } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --blank --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --blank, --expo-router, --bun, --overwrite-ces-config-json 1`] = ` +exports[`generates a project with --nativewind --expo-router --no-install --bun --overwrite: --nativewind, --expo-router, --no-install, --bun, --overwrite-ces-config-json 1`] = ` { "cesVersion": undefined, "flags": { "eas": false, "importAlias": true, "noGit": false, - "noInstall": false, + "noInstall": true, "overwrite": true, "packageManager": "bun", "publish": false, @@ -1240,256 +939,32 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --b "version": undefined, }, "packages": [ - { - "name": "nativewindui", - "options": { - "selectedComponents": [ - "text", - ], - }, - "type": "styling", - }, { "name": "expo-router", "options": { - "type": "drawer + tabs", + "type": "stack", }, "type": "navigation", }, + { + "name": "nativewind", + "type": "styling", + }, ], "projectName": "myTestProject", } `; -exports[`generates a project with --expo-router --drawer+tabs --nativewindui --blank --expo-router --bun --overwrite: --expo-router, --drawer+tabs, --nativewindui, --blank, --expo-router, --bun, --overwrite-file-list 1`] = ` +exports[`generates a project with --nativewind --expo-router --no-install --bun --overwrite: --nativewind, --expo-router, --no-install, --bun, --overwrite-file-list 1`] = ` [ "./myTestProject", "./myTestProject/app", "./myTestProject/app.json", "./myTestProject/app/_layout.tsx", - "./myTestProject/app/(drawer)", - "./myTestProject/app/(drawer)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)", - "./myTestProject/app/(drawer)/(tabs)/_layout.tsx", - "./myTestProject/app/(drawer)/(tabs)/index.tsx", - "./myTestProject/app/(drawer)/(tabs)/two.tsx", - "./myTestProject/app/(drawer)/index.tsx", "./myTestProject/app/+html.tsx", "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/modal.tsx", - "./myTestProject/assets", - "./myTestProject/assets/adaptive-icon.png", - "./myTestProject/assets/favicon.png", - "./myTestProject/assets/icon.png", - "./myTestProject/assets/splash.png", - "./myTestProject/babel.config.js", - "./myTestProject/bun.lock", - "./myTestProject/cesconfig.jsonc", - "./myTestProject/components", - "./myTestProject/components/BackButton.tsx", - "./myTestProject/components/Button.tsx", - "./myTestProject/components/Container.tsx", - "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/HeaderButton.tsx", - "./myTestProject/components/nativewindui", - "./myTestProject/components/nativewindui/Text.tsx", - "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/components/TabBarIcon.tsx", - "./myTestProject/components/ThemeToggle.tsx", - "./myTestProject/eslint.config.js", - "./myTestProject/global.css", - "./myTestProject/lib", - "./myTestProject/lib/cn.ts", - "./myTestProject/lib/useColorScheme.tsx", - "./myTestProject/lib/useHeaderSearchBar.tsx", - "./myTestProject/metro.config.js", - "./myTestProject/nativewind-env.d.ts", - "./myTestProject/package.json", - "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", - "./myTestProject/theme", - "./myTestProject/theme/colors.ts", - "./myTestProject/theme/index.ts", - "./myTestProject/tsconfig.json", -] -`; - -exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-package-json 1`] = ` -{ - "dependencies": { - "expo": "", - "expo-status-bar": "", - "nativewind": "", - "react": "", - "react-native": "", - "react-native-reanimated": "", - "react-native-safe-area-context": "", - "react-native-worklets": "", - }, - "devDependencies": { - "@babel/core": "", - "@types/react": "", - "eslint": "", - "eslint-config-expo": "", - "eslint-config-prettier": "", - "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", - "typescript": "", - }, - "main": "node_modules/expo/AppEntry.js", - "name": "myTestProject", - "private": true, - "scripts": { - "android": "expo start --android", - "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", - "ios": "expo start --ios", - "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", - "start": "expo start", - "web": "expo start --web", - }, - "version": "1.0.0", -} -`; - -exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-ces-config-json 1`] = ` -{ - "cesVersion": undefined, - "flags": { - "eas": false, - "importAlias": true, - "noGit": false, - "noInstall": true, - "overwrite": true, - "packageManager": "bun", - "publish": false, - }, - "os": {}, - "packageManager": { - "type": "bun", - "version": undefined, - }, - "packages": [ - { - "name": "nativewind", - "type": "styling", - }, - ], - "projectName": "myTestProject", -} -`; - -exports[`generates a project with --nativewind --no-install --bun --overwrite: --nativewind, --no-install, --bun, --overwrite-file-list 1`] = ` -[ - "./myTestProject", - "./myTestProject/app.json", - "./myTestProject/App.tsx", - "./myTestProject/assets", - "./myTestProject/assets/adaptive-icon.png", - "./myTestProject/assets/favicon.png", - "./myTestProject/assets/icon.png", - "./myTestProject/assets/splash.png", - "./myTestProject/babel.config.js", - "./myTestProject/cesconfig.jsonc", - "./myTestProject/components", - "./myTestProject/components/Container.tsx", - "./myTestProject/components/EditScreenInfo.tsx", - "./myTestProject/components/ScreenContent.tsx", - "./myTestProject/eslint.config.js", - "./myTestProject/global.css", - "./myTestProject/metro.config.js", - "./myTestProject/nativewind-env.d.ts", - "./myTestProject/package.json", - "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", - "./myTestProject/tsconfig.json", -] -`; - -exports[`generates a project with --expo-router --nativewind --no-install --bun --overwrite: --expo-router, --nativewind, --no-install, --bun, --overwrite-package-json 1`] = ` -{ - "dependencies": { - "expo": "", - "expo-status-bar": "", - "nativewind": "", - "react": "", - "react-native": "", - "react-native-reanimated": "", - "react-native-safe-area-context": "", - "react-native-worklets": "", - }, - "devDependencies": { - "@babel/core": "", - "@types/react": "", - "eslint": "", - "eslint-config-expo": "", - "eslint-config-prettier": "", - "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", - "typescript": "", - }, - "main": "node_modules/expo/AppEntry.js", - "name": "myTestProject", - "private": true, - "scripts": { - "android": "expo start --android", - "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", - "ios": "expo start --ios", - "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", - "start": "expo start", - "web": "expo start --web", - }, - "version": "1.0.0", -} -`; - -exports[`generates a project with --expo-router --nativewind --no-install --bun --overwrite: --expo-router, --nativewind, --no-install, --bun, --overwrite-ces-config-json 1`] = ` -{ - "cesVersion": undefined, - "flags": { - "eas": false, - "importAlias": true, - "noGit": false, - "noInstall": true, - "overwrite": true, - "packageManager": "bun", - "publish": false, - }, - "os": {}, - "packageManager": { - "type": "bun", - "version": undefined, - }, - "packages": [ - { - "name": "expo-router", - "options": { - "type": "stack", - }, - "type": "navigation", - }, - { - "name": "nativewind", - "type": "styling", - }, - ], - "projectName": "myTestProject", -} -`; - -exports[`generates a project with --expo-router --nativewind --no-install --bun --overwrite: --expo-router, --nativewind, --no-install, --bun, --overwrite-file-list 1`] = ` -[ - "./myTestProject", - "./myTestProject/app", - "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/details.tsx", - "./myTestProject/app/index.tsx", + "./myTestProject/app/details.tsx", + "./myTestProject/app/index.tsx", "./myTestProject/assets", "./myTestProject/assets/adaptive-icon.png", "./myTestProject/assets/favicon.png", @@ -1513,126 +988,3 @@ exports[`generates a project with --expo-router --nativewind --no-install --bun "./myTestProject/tsconfig.json", ] `; - -exports[`generates a project with --nativewindui --blank --no-install --bun --overwrite: --nativewindui, --blank, --no-install, --bun, --overwrite-package-json 1`] = ` -{ - "dependencies": { - "expo": "", - "expo-status-bar": "", - "nativewind": "", - "react": "", - "react-native": "", - "react-native-reanimated": "", - "react-native-safe-area-context": "", - "react-native-worklets": "", - }, - "devDependencies": { - "@babel/core": "", - "@types/react": "", - "eslint": "", - "eslint-config-expo": "", - "eslint-config-prettier": "", - "prettier": "", - "prettier-plugin-tailwindcss": "", - "tailwindcss": "", - "typescript": "", - }, - "main": "node_modules/expo/AppEntry.js", - "name": "myTestProject", - "private": true, - "scripts": { - "android": "expo start --android", - "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write", - "ios": "expo start --ios", - "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"", - "prebuild": "expo prebuild", - "start": "expo start", - "web": "expo start --web", - }, - "version": "1.0.0", -} -`; - -exports[`generates a project with --nativewindui --blank --no-install --bun --overwrite: --nativewindui, --blank, --no-install, --bun, --overwrite-ces-config-json 1`] = ` -{ - "cesVersion": undefined, - "flags": { - "eas": false, - "importAlias": true, - "noGit": false, - "noInstall": true, - "overwrite": true, - "packageManager": "bun", - "publish": false, - }, - "os": {}, - "packageManager": { - "type": "bun", - "version": undefined, - }, - "packages": [ - { - "name": "nativewindui", - "options": { - "selectedComponents": [ - "text", - ], - }, - "type": "styling", - }, - { - "name": "expo-router", - "options": { - "type": "stack", - }, - "type": "navigation", - }, - ], - "projectName": "myTestProject", -} -`; - -exports[`generates a project with --nativewindui --blank --no-install --bun --overwrite: --nativewindui, --blank, --no-install, --bun, --overwrite-file-list 1`] = ` -[ - "./myTestProject", - "./myTestProject/app", - "./myTestProject/app.json", - "./myTestProject/app/_layout.tsx", - "./myTestProject/app/+html.tsx", - "./myTestProject/app/+not-found.tsx", - "./myTestProject/app/index.tsx", - "./myTestProject/app/modal.tsx", - "./myTestProject/assets", - "./myTestProject/assets/adaptive-icon.png", - "./myTestProject/assets/favicon.png", - "./myTestProject/assets/icon.png", - "./myTestProject/assets/splash.png", - "./myTestProject/babel.config.js", - "./myTestProject/cesconfig.jsonc", - "./myTestProject/components", - "./myTestProject/components/nativewindui", - "./myTestProject/components/nativewindui/Button.tsx", - "./myTestProject/components/nativewindui/Icon", - "./myTestProject/components/nativewindui/Icon/Icon.ios.tsx", - "./myTestProject/components/nativewindui/Icon/Icon.tsx", - "./myTestProject/components/nativewindui/Icon/index.ts", - "./myTestProject/components/nativewindui/Icon/types.ts", - "./myTestProject/components/nativewindui/Text.tsx", - "./myTestProject/components/nativewindui/ThemeToggle.tsx", - "./myTestProject/eslint.config.js", - "./myTestProject/global.css", - "./myTestProject/lib", - "./myTestProject/lib/cn.ts", - "./myTestProject/lib/useColorScheme.tsx", - "./myTestProject/metro.config.js", - "./myTestProject/nativewind-env.d.ts", - "./myTestProject/package.json", - "./myTestProject/prettier.config.js", - "./myTestProject/tailwind.config.js", - "./myTestProject/theme", - "./myTestProject/theme/colors.ts", - "./myTestProject/theme/index.ts", - "./myTestProject/theme/with-opacity.ts", - "./myTestProject/tsconfig.json", -] -`; diff --git a/cli/__tests__/cli-integration.test.ts b/cli/__tests__/cli-integration.test.ts index de4a7985..5fae2444 100644 --- a/cli/__tests__/cli-integration.test.ts +++ b/cli/__tests__/cli-integration.test.ts @@ -9,7 +9,6 @@ type InputFlag = `--${string}`; const cli = async (inputs: string[]) => { const pathToFile = `${path.join(__dirname, '../', 'bin', 'create-expo-stack.js')}`; - console.log('running', `bun ${pathToFile} ${inputs.join(' ')}`); const { stdout, exitCode, success, stderr } = Bun.spawnSync(['bun', pathToFile, ...inputs]); @@ -75,26 +74,37 @@ test(`outputs help`, async () => { // ['--react-navigation', '--drawer+tabs', '--nativewind'], // ['--react-navigation', '--drawer+tabs', '--unistyles'], -// ['--react-navigation', '--stack', '--stylesheet'], -// ['--react-navigation', '--stack', '--nativewind'], -// ['--react-navigation', '--stack', '--unistyles'] -// ] as const; +// ['--react-navigation', '--stack', '--stylesheet'], +// ['--react-navigation', '--stack', '--nativewind'], +// ['--react-navigation', '--stack', '--unistyles'] +// ] as const ; + +const styleSheetCombinations = [ + ['--blank'], + ['--blank', '--no-install'], + ['--stylesheet'], + ['--stylesheet', '--no-install'], + ['--stylesheet', '--expo-router'], + ['--stylesheet', '--expo-router', '--no-install'] +] as const; -// Core combinations that run by default - only testing specific configurations -const coreCombinations = [ - // --nativewind --no-install --bun --overwrite +const nativewindCombinations = [ + ['--nativewind'], ['--nativewind', '--no-install'], - // --nativewind --expo-router --no-install --bun --overwrite - ['--expo-router', '--nativewind', '--no-install'], - // --nativewindui --blank --no-install --bun --overwrite - ['--nativewindui', '--blank', '--no-install'] - // --nativewindui --no-install --bun --overwrite - // ['--nativewindui', '--no-install'] + ['--nativewind', '--expo-router'], + ['--nativewind', '--expo-router', '--no-install'] ] as const; +// const nativewinduiCombinations = [ +// ['--nativewindui'], +// ['--nativewindui', '--no-install'], +// ['--nativewindui', '--blank'], +// ['--nativewindui', '--blank', '--no-install'] +// ] as const; + // Combine all combinations based on environment variables // UPDATED - Only using core combinations since React Navigation tests are commented out -const popularCombinations = coreCombinations; +const popularCombinations = [...styleSheetCombinations, ...nativewindCombinations]; const projectName = `myTestProject`; const pathToProject = `./${projectName}`; @@ -123,17 +133,17 @@ for (const packageManager of packageManagers) { expect(output).toContain('Installing dependencies'); } - const pkgjson = await import(path.resolve(pathToProject, 'package.json')); + const pkgjson = await Bun.file(`${pathToProject}/package.json`).json(); const pkgJsonWithoutVersions = { - ...pkgjson.default, - dependencies: Object.keys(pkgjson.default.dependencies).reduce((acc, key) => { + ...pkgjson, + dependencies: Object.keys(pkgjson.dependencies).reduce((acc, key) => { return { ...acc, [key]: '' }; }, {}), - devDependencies: Object.keys(pkgjson.default.devDependencies).reduce((acc, key) => { + devDependencies: Object.keys(pkgjson.devDependencies).reduce((acc, key) => { return { ...acc, [key]: '' From da13476e6534aa689acfd55754a53ae3d42f4701 Mon Sep 17 00:00:00 2001 From: Dan Stepanov Date: Mon, 6 Oct 2025 11:11:15 -0700 Subject: [PATCH 5/5] update nativewindui templates to support sdk 54 --- .changeset/silver-trees-ask.md | 6 ++++++ cli/__tests__/cli-integration.test.ts | 14 ++++++------- cli/src/templates/base/package.json.ejs | 21 ++++++++++--------- .../nativewindui/stack/app/_layout.tsx.ejs | 11 +++++++--- .../nativewindui/stack/app/index.tsx.ejs | 7 +++---- .../nativewindui/stack/app/modal.tsx.ejs | 2 +- 6 files changed, 36 insertions(+), 25 deletions(-) create mode 100644 .changeset/silver-trees-ask.md diff --git a/.changeset/silver-trees-ask.md b/.changeset/silver-trees-ask.md new file mode 100644 index 00000000..5daadf95 --- /dev/null +++ b/.changeset/silver-trees-ask.md @@ -0,0 +1,6 @@ +--- +'rn-new': minor +'create-expo-stack': minor +--- + +update nativewindui templates to support sdk 54 diff --git a/cli/__tests__/cli-integration.test.ts b/cli/__tests__/cli-integration.test.ts index 5fae2444..586ef658 100644 --- a/cli/__tests__/cli-integration.test.ts +++ b/cli/__tests__/cli-integration.test.ts @@ -95,16 +95,16 @@ const nativewindCombinations = [ ['--nativewind', '--expo-router', '--no-install'] ] as const; -// const nativewinduiCombinations = [ -// ['--nativewindui'], -// ['--nativewindui', '--no-install'], -// ['--nativewindui', '--blank'], -// ['--nativewindui', '--blank', '--no-install'] -// ] as const; +const nativewinduiCombinations = [ + ['--nativewindui'], + ['--nativewindui', '--no-install'], + ['--nativewindui', '--blank'], + ['--nativewindui', '--blank', '--no-install'] +] as const; // Combine all combinations based on environment variables // UPDATED - Only using core combinations since React Navigation tests are commented out -const popularCombinations = [...styleSheetCombinations, ...nativewindCombinations]; +const popularCombinations = [...styleSheetCombinations, ...nativewindCombinations, ...nativewinduiCombinations]; const projectName = `myTestProject`; const pathToProject = `./${projectName}`; diff --git a/cli/src/templates/base/package.json.ejs b/cli/src/templates/base/package.json.ejs index d5cd1ccd..e26e7ac4 100644 --- a/cli/src/templates/base/package.json.ejs +++ b/cli/src/templates/base/package.json.ejs @@ -34,16 +34,16 @@ "nativewind": "4.1.21", <% } %> <% if (props.stylingPackage?.name === "nativewindui") { %> - "@shopify/flash-list": "1.7.6", + "@shopify/flash-list": "2.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "tailwind-merge": "^2.2.1", "react-native-uitextview": "^1.1.4", "rn-icon-mapper": "^0.0.1", - "expo-haptics": "~14.1.4", - "expo-symbols": "~0.4.5", + "expo-haptics": "~15.0.7", + "expo-symbols": "~1.0.7", <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %> - "@react-native-community/datetimepicker": "8.4.1", + "@react-native-community/datetimepicker": "8.4.4", <% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %> "@react-native-picker/picker": "2.11.1", @@ -52,10 +52,10 @@ "@expo/react-native-action-sheet": "^4.0.1", <% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %> - "expo-store-review": "~8.1.5", + "expo-store-review": "~9.0.8", <% } %> <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %> - "@react-native-community/slider": "4.5.6", + "@react-native-community/slider": "5.0.1", <% } %> <% } %> @@ -99,8 +99,8 @@ <% if (props.navigationPackage?.name === "expo-router") { %> "@expo/vector-icons": "^15.0.2", "expo-linking": "~8.0.8", - "expo-router": "~6.0.2", - "expo-constants": "~18.0.8", + "expo-router": "~6.0.10", + "expo-constants": "~18.0.9", "expo-system-ui": "~6.0.7", "expo-web-browser": "~15.0.7", "react-dom": "19.1.0", @@ -122,14 +122,15 @@ "expo-localization": "~14.8.3", <% } %> <% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %> - "expo-dev-client": "~6.0.12", + "expo-dev-client": "~6.0.13", + "expo-device": "~8.0.9", <% } %> "react-native-reanimated": "~4.1.1", "react-native-worklets": "0.5.1", "react-native-safe-area-context": "~5.6.0", - "expo": "~54.0.4", + "expo": "^54.0.0", "expo-status-bar": "~3.0.8", "react": "19.1.0", "react-native": "0.81.4" diff --git a/cli/src/templates/packages/nativewindui/stack/app/_layout.tsx.ejs b/cli/src/templates/packages/nativewindui/stack/app/_layout.tsx.ejs index 74ef0f88..f98642da 100644 --- a/cli/src/templates/packages/nativewindui/stack/app/_layout.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/stack/app/_layout.tsx.ejs @@ -4,13 +4,15 @@ import '@/global.css'; import { ActionSheetProvider } from '@expo/react-native-action-sheet'; <% } %> import { ThemeProvider as NavThemeProvider } from '@react-navigation/native'; +import * as Device from 'expo-device'; import { Link, Stack } from 'expo-router'; import { StatusBar } from 'expo-status-bar'; -import { Pressable } from 'react-native'; +import { Platform, Pressable } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { Icon } from '@/components/nativewindui/Icon'; import { ThemeToggle } from '@/components/nativewindui/ThemeToggle'; +import { cn } from '@/lib/cn'; import { useColorScheme } from '@/lib/useColorScheme'; import { NAV_THEME } from '@/theme'; @@ -19,6 +21,8 @@ export { ErrorBoundary, } from 'expo-router'; +const isIos26 = Platform.select({ default: false, ios: Device.osVersion?.startsWith('26.' )}); + export default function RootLayout() { const { colorScheme, isDarkColorScheme } = useColorScheme(); @@ -51,6 +55,7 @@ export default function RootLayout() { const INDEX_OPTIONS = { headerLargeTitle: true, + headerTransparent: isIos26, title: 'NativewindUI', headerRight: () => , } as const; @@ -58,8 +63,8 @@ const INDEX_OPTIONS = { function SettingsIcon() { return ( - - + + ); diff --git a/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs b/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs index f8cdfe91..8392ccf9 100644 --- a/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/stack/app/index.tsx.ejs @@ -84,7 +84,6 @@ export default function Screen() { contentInsetAdjustmentBehavior="automatic" keyboardShouldPersistTaps="handled" data={data} - estimatedItemSize={200} contentContainerClassName="py-4 android:pb-12" extraData={searchValue} removeClippedSubviews={false} // used for slecting text on android @@ -105,7 +104,6 @@ function useHeaderSearchBar(props: SearchBarProps = {}) { navigation.setOptions({ headerSearchBarOptions: { placeholder: 'Search...', - barTintColor: colorScheme === 'dark' ? COLORS.black : COLORS.white, textColor: colors.foreground, tintColor: colors.primary, headerIconColor: colors.foreground, @@ -317,8 +315,9 @@ const COMPONENTS: ComponentItem[] = [ name: 'Progress Indicator', component: function ProgressIndicatorExample() { const [progress, setProgress] = React.useState(13); - let id: ReturnType | null = null; + React.useEffect(() => { + let id: ReturnType | null = null; if (!id) { id = setInterval(() => { setProgress((prev) => (prev >= 99 ? 0 : prev + 5)); @@ -478,7 +477,7 @@ const COMPONENTS: ComponentItem[] = [ const [switchValue, setSwitchValue] = React.useState(true); return ( - + ); } diff --git a/cli/src/templates/packages/nativewindui/stack/app/modal.tsx.ejs b/cli/src/templates/packages/nativewindui/stack/app/modal.tsx.ejs index a9dd0c62..f38bf6bd 100644 --- a/cli/src/templates/packages/nativewindui/stack/app/modal.tsx.ejs +++ b/cli/src/templates/packages/nativewindui/stack/app/modal.tsx.ejs @@ -12,7 +12,7 @@ export default function ModalScreen() { - + NativewindUI