From e167239f4f7eacd4afc3d5aadca09967ab8f8628 Mon Sep 17 00:00:00 2001
From: dan <dan@danstepanov.com>
Date: Thu, 2 Jul 2026 14:46:36 +0000
Subject: [PATCH] fix: nativewind home layout, TabBarIcon types, rerun-hint
 quoting

- Give EditScreenInfo's outer View w-full: ScreenContent centers its
  children, so the unconstrained View sized to the text's intrinsic
  single-line width and the description clipped at the screen edge.
- Inset the Show Details button with mx-6; the Container only has
  safe-area padding, which is zero horizontally on iPhones, so the
  stretched button touched the screen edges.
- Type TabBarIcon color as ColorValue: Expo Router's Tabs on SDK 56
  passes ColorValue to tabBarIcon, which fails typechecking against
  color: string. @expo/vector-icons accepts string | OpaqueColorValue.
- Only quote the rerun-hint project name when it contains characters
  that actually need shell quoting.
---
 .changeset/nativewind-home-layout.md                        | 6 ++++++
 cli/src/templates/base/components/TabBarIcon.tsx.ejs        | 4 ++--
 .../templates/packages/expo-router/stack/app/index.tsx.ejs  | 2 ++
 .../packages/nativewind/components/EditScreenInfo.tsx.ejs   | 3 ++-
 cli/src/utilities/systemCommand.ts                          | 5 +++++
 5 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nativewind-home-layout.md

diff --git a/.changeset/nativewind-home-layout.md b/.changeset/nativewind-home-layout.md
new file mode 100644
index 00000000..a64bc714
--- /dev/null
+++ b/.changeset/nativewind-home-layout.md
@@ -0,0 +1,6 @@
+---
+'create-expo-stack': patch
+'rn-new': patch
+---
+
+Fix Nativewind template layout: inset the Show Details button from the screen edges, constrain EditScreenInfo so its description text wraps instead of clipping, type TabBarIcon color as ColorValue for SDK 56 tabs, and only quote the rerun-hint project name when it needs shell quoting.
diff --git a/cli/src/templates/base/components/TabBarIcon.tsx.ejs b/cli/src/templates/base/components/TabBarIcon.tsx.ejs
index e75c9d3f..7da59c5d 100644
--- a/cli/src/templates/base/components/TabBarIcon.tsx.ejs
+++ b/cli/src/templates/base/components/TabBarIcon.tsx.ejs
@@ -1,9 +1,9 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { StyleSheet } from 'react-native';
+import { ColorValue, StyleSheet } from 'react-native';
 
 export const TabBarIcon = (props: {
   name: React.ComponentProps<typeof FontAwesome>['name'];
-  color: string;
+  color: ColorValue;
 }) => {
   return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
 };
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 7590c81f..5f78480d 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
@@ -33,6 +33,8 @@ export default function Home() {
         <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
           <% if (props.stylingPackage?.name === "unistyles") { %>
               <Button title="Show Details" style={styles.button} />
+          <% } else if (props.stylingPackage?.name === "nativewind") { %>
+              <Button title="Show Details" className="mx-6" />
           <% } else { %>
               <Button title="Show Details" />
           <% } %>
diff --git a/cli/src/templates/packages/nativewind/components/EditScreenInfo.tsx.ejs b/cli/src/templates/packages/nativewind/components/EditScreenInfo.tsx.ejs
index 70646934..cb9e6cb6 100644
--- a/cli/src/templates/packages/nativewind/components/EditScreenInfo.tsx.ejs
+++ b/cli/src/templates/packages/nativewind/components/EditScreenInfo.tsx.ejs
@@ -18,7 +18,7 @@ export const EditScreenInfo: React.FC<EditScreenInfoProps> = ({ path }) => {
   const description = "Change any of the text, save the file, and your app will automatically update."
 <% } %>
   return (
-    <View>
+    <View className={styles.container}>
       <View className={styles.getStartedContainer}>
         <Text className={styles.getStartedText}>{title}</Text>
         <View className={`${styles.codeHighlightContainer} ${styles.homeScreenFilename}`}>
@@ -33,6 +33,7 @@ export const EditScreenInfo: React.FC<EditScreenInfoProps> = ({ path }) => {
 };
 
 const styles = {
+  container: `w-full`,
   codeHighlightContainer: `rounded-md px-1`,
   getStartedContainer: `items-center mx-12`,
   getStartedText: `text-lg leading-6 text-center`,
diff --git a/cli/src/utilities/systemCommand.ts b/cli/src/utilities/systemCommand.ts
index 8264110c..c408bfeb 100644
--- a/cli/src/utilities/systemCommand.ts
+++ b/cli/src/utilities/systemCommand.ts
@@ -5,6 +5,11 @@ type STDIO = 'inherit' | 'ignore' | 'pipe' | 'overlapped';
 export const ONLY_ERRORS = ['ignore', 'ignore', 'inherit'] as const;
 
 export function quoteShellArg(value: string): string {
+  // Values made of safe characters don't need quoting on any platform
+  if (/^[A-Za-z0-9._-]+$/.test(value)) {
+    return value;
+  }
+
   if (process.platform === 'win32') {
     return `"${value.replace(/"/g, '""')}"`;
   }