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.

Author: danstepanov

.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.

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} />;
 };

cli/src/templates/packages/expo-router/stack/app/index.tsx.ejs

@@ -36,6 +36,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" />
           <% } %>

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`,

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, '""')}"`;
   }