create-expo-stack 2.1.20 → 2.1.22

package/build/templates/packages/expo-router/stack/app/index.tsx.ejs

@@ -1,109 +1,109 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  import { Text, TouchableOpacity, View } from "react-native";
+	import { Text, TouchableOpacity, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack } from "tamagui";
-  import { Container, Main, Title, Subtitle, Button, ButtonText } from '../tamagui.config';
+	import { YStack } from "tamagui";
+	import { Container, Main, Title, Subtitle, Button, ButtonText } from '../tamagui.config';
 <% } else { %>
-  import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
 import { Link } from "expo-router";
 
 export default function Page() {
-  return (
-  <% if (props.stylingPackage?.name === "nativewind") { %>
-    <View className={styles.container}>
-      <View className={styles.main}>
-        <View>
-          <Text className={styles.title}>Hello World</Text>
-          <Text className={styles.subtitle}>This is the first page of your app.</Text>
-        </View>
-        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-          <TouchableOpacity className={styles.button} >
-            <Text className={styles.buttonText}>Show Details</Text>
-          </TouchableOpacity>
-        </Link>
-      </View>
-    </View>
-  <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    <Container>
-      <Main>
-        <YStack>
-          <Title>Hello World</Title>
-          <Subtitle>This is the first page of your app.</Subtitle>
-        </YStack>
-        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-          <Button><ButtonText>Show Details</ButtonText></Button>
-        </Link>
-      </Main>
-    </Container>
-  <% } else { %>
-    <View style={styles.container}>
-      <View style={styles.main}>
-        <View>
-          <Text style={styles.title}>Hello World</Text>
-          <Text style={styles.subtitle}>This is the first page of your app.</Text>
-        </View>
-        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-          <TouchableOpacity style={styles.button} >
-            <Text style={styles.buttonText}>Show Details</Text>
-          </TouchableOpacity>
-        </Link>
-      </View>
-    </View>
-  <% } %>
-  );
+	return (
+		<% if (props.stylingPackage?.name === "nativewind") { %>
+			<View className={styles.container}>
+				<View className={styles.main}>
+				<View>
+					<Text className={styles.title}>Hello World</Text>
+					<Text className={styles.subtitle}>This is the first page of your app.</Text>
+				</View>
+				<Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+					<TouchableOpacity className={styles.button} >
+					<Text className={styles.buttonText}>Show Details</Text>
+					</TouchableOpacity>
+				</Link>
+				</View>
+			</View>
+			<% } else if (props.stylingPackage?.name === "tamagui") { %>
+			<Container>
+				<Main>
+				<YStack>
+					<Title>Hello World</Title>
+					<Subtitle>This is the first page of your app.</Subtitle>
+				</YStack>
+				<Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+					<Button><ButtonText>Show Details</ButtonText></Button>
+				</Link>
+				</Main>
+			</Container>
+			<% } else { %>
+			<View style={styles.container}>
+				<View style={styles.main}>
+				<View>
+					<Text style={styles.title}>Hello World</Text>
+					<Text style={styles.subtitle}>This is the first page of your app.</Text>
+				</View>
+				<Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+					<TouchableOpacity style={styles.button} >
+					<Text style={styles.buttonText}>Show Details</Text>
+					</TouchableOpacity>
+				</Link>
+				</View>
+			</View>
+		<% } %>
+	);
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  const styles = {
-    button: "items-center bg-indigo-500 rounded-[28px] shadow-md p-4",
-    buttonText: "text-white text-lg font-semibold text-center",
-    container: "flex-1 p-6",
-    main: "flex-1 max-w-[960] justify-between",
-    title: "text-[64px] font-bold",
-    subtitle: "text-4xl text-gray-700",
-  };
+	const styles = {
+		button: "items-center bg-indigo-500 rounded-[28px] shadow-md p-4",
+		buttonText: "text-white text-lg font-semibold text-center",
+		container: "flex-1 p-6",
+		main: "flex-1 max-w-[960] justify-between",
+		title: "text-[64px] font-bold",
+		subtitle: "text-4xl text-gray-700",
+	};
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  const styles = StyleSheet.create({
-    button: {
-      alignItems: "center",
-      backgroundColor: "#6366F1",
-      borderRadius: 24,
-      elevation: 5,
-      flexDirection: "row",
-      justifyContent: "center",
-      padding: 16,
-      shadowColor: "#000",
-      shadowOffset: {
-        height: 2,
-        width: 0
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84
-    },
-    buttonText: {
-      color: "#FFFFFF",
-      fontSize: 16,
-      fontWeight: "600",
-      textAlign: "center",
-    },
-    container: {
-      flex: 1,
-      padding: 24,
-    },
-    main: {
-      flex: 1,
-      maxWidth: 960,
-      marginHorizontal: "auto",
-      justifyContent: "space-between",
-    },
-    title: {
-      fontSize: 64,
-      fontWeight: "bold",
-    },
-    subtitle: {
-      color: "#38434D",
-      fontSize: 36,
-    }
-  });
+	const styles = StyleSheet.create({
+		button: {
+			alignItems: "center",
+			backgroundColor: "#6366F1",
+			borderRadius: 24,
+			elevation: 5,
+			flexDirection: "row",
+			justifyContent: "center",
+			padding: 16,
+			shadowColor: "#000",
+			shadowOffset: {
+			height: 2,
+			width: 0
+			},
+			shadowOpacity: 0.25,
+			shadowRadius: 3.84
+		},
+		buttonText: {
+			color: "#FFFFFF",
+			fontSize: 16,
+			fontWeight: "600",
+			textAlign: "center",
+		},
+		container: {
+			flex: 1,
+			padding: 24,
+		},
+		main: {
+			flex: 1,
+			maxWidth: 960,
+			marginHorizontal: "auto",
+			justifyContent: "space-between",
+		},
+		title: {
+			fontSize: 64,
+			fontWeight: "bold",
+		},
+		subtitle: {
+			color: "#38434D",
+			fontSize: 36,
+		}
+	});
 <% } %>

package/build/templates/packages/nativewind/app.d.ts

@@ -1,2 +1,2 @@
 // @ts-ignore
-/// <reference types="nativewind/types" />
+/// <reference types="nativewind/types" />

package/build/templates/packages/react-navigation/App.tsx.ejs

@@ -1,39 +1,39 @@
 import "react-native-gesture-handler";
 <% if (props.stylingPackage?.name === "tamagui") { %>
-import React, { useEffect } from "react";
-import { TamaguiProvider } from 'tamagui';
-import * as SplashScreen from 'expo-splash-screen';
-import { useFonts } from 'expo-font';
+	import React, { useEffect } from "react";
+	import { TamaguiProvider } from 'tamagui';
+	import * as SplashScreen from 'expo-splash-screen';
+	import { useFonts } from 'expo-font';
 
-import config from './tamagui.config'
+	import config from './tamagui.config'
 
-SplashScreen.preventAutoHideAsync();
+	SplashScreen.preventAutoHideAsync();
 <% } %>
 import RootStack from "./src/navigation";
 
 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"),
-    });
+	<% 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])
+		useEffect(() => {
+			if (loaded) {
+				SplashScreen.hideAsync();
+			}
+		}, [loaded])
 
-    if (!loaded) {
-      return null;
-    }
+		if (!loaded) {
+			return null;
+		}
 
-    return (
-      <TamaguiProvider config={config}>
-        <RootStack />
-      </TamaguiProvider>
-    );
-  <% } else { %>
-    return <RootStack />;
-  <% } %>
+		return (
+			<TamaguiProvider config={config}>
+				<RootStack />
+			</TamaguiProvider>
+		);
+	<% } else { %>
+		return <RootStack />;
+	<% } %>
 }

package/build/templates/packages/react-navigation/navigation/index.tsx.ejs

@@ -1,106 +1,120 @@
 <% if (props.navigationPackage?.options.type === 'stack') { %>
-    import { Feather } from "@expo/vector-icons";
-    import { NavigationContainer } from "@react-navigation/native";
-    import { createStackNavigator } from "@react-navigation/stack";
-    <% if (props.stylingPackage?.name === "nativewind") { %>
-        import { Text, View } from "react-native";
-    <% } else if (props.stylingPackage?.name === "tamagui") { %>
-        import { Button } from "tamagui";
-    <% } else { %>
-        import { Text, View, StyleSheet } from "react-native";
-    <% } %>
+	import { Feather } from "@expo/vector-icons";
+	import { NavigationContainer } from "@react-navigation/native";
+	import { createStackNavigator } from "@react-navigation/stack";
+	<% if (props.stylingPackage?.name === "nativewind") { %>
+		import { Text, View } from "react-native";
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		import { Button, Text } from "tamagui";
+	<% } else { %>
+		import { Text, View, StyleSheet } from "react-native";
+	<% } %>
 
-    import Overview from "../screens/overview";
-    import Details from "../screens/details";
+	import Overview from "../screens/overview";
+	import Details from "../screens/details";
 
-    export type RootStackParamList = {
-    Overview: undefined;
-    Details: { name: string };
-    };
+	export type RootStackParamList = {
+		Overview: undefined;
+		Details: { name: string };
+	};
 
-    const Stack = createStackNavigator<RootStackParamList>();
+	const Stack = createStackNavigator<RootStackParamList>();
 
-    export default function RootStack() {
-    return (
-        <NavigationContainer>
-        <Stack.Navigator initialRouteName="Overview">
-            <Stack.Screen name="Overview" component={Overview} />
-            <Stack.Screen
-                name="Details"
-                component={Details}
-                <% if (props.stylingPackage?.name === "nativewind") { %>
-                    options={({ navigation }) => ({
-                        headerLeft: () => (
-                            <View className={styles.backButton}>
-                                <Feather name="chevron-left" size={16} color="#007AFF" />
-                                <Text className={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
-                            </View>
-                        )
-                    })}
-                <% } else if (props.stylingPackage?.name === "tamagui") { %>
-                    options={({ navigation }) => ({
-                        headerLeft: () => (
-                            <Button onPress={navigation.goBack} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>Back</Button>
-                        )
-                    })}
-                <% } else { %>
-                    options={({ navigation }) => ({
-                        headerLeft: () => (
-                            <View style={styles.backButton}>
-                                <Feather name="chevron-left" size={16} color="#007AFF" />
-                                <Text style={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
-                            </View>
-                        )
-                    })}
-                <% } %>
-            />
-        </Stack.Navigator>
-        </NavigationContainer>
-    );
-    }
-    <% if (props.stylingPackage?.name === "nativewind") { %>
-        const styles = {
-            backButton: "flex-row",
-            backButtonText: "text-blue-500 ml-1"
-        };
-    <% } else if (props.stylingPackage?.name === "stylesheet") { %>
-        const styles = StyleSheet.create({
-            backButton: {
-                flexDirection: "row"
-            },
-            backButtonText: {
-                color: "#007AFF",
-                marginLeft: 4
-            }
-        });
-    <% } %>
-    
+	export default function RootStack() {
+		return (
+			<NavigationContainer>
+				<Stack.Navigator initialRouteName="Overview">
+					<Stack.Screen name="Overview" component={Overview} />
+					<Stack.Screen
+						name="Details"
+						component={Details}
+						<% if (props.stylingPackage?.name === "nativewind") { %>
+							options={({ navigation }) => ({
+								headerLeft: () => (
+									<View className={styles.backButton}>
+										<Feather name="chevron-left" size={16} color="#007AFF" />
+										<Text className={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
+									</View>
+								)
+							})}
+						<% } else if (props.stylingPackage?.name === "tamagui") { %>
+							options={({ navigation }) => ({
+								headerLeft: () => (
+									<Button
+										unstyled
+										flexDirection="row"
+										backgroundColor="transparent"
+										pressStyle={{ opacity: 0.5 }}
+										paddingLeft={20}
+										onPress={navigation.goBack}
+										icon={<Feather name="chevron-left" size={16} color="#007AFF" />}
+									>
+										<Text color="#007AFF">Back</Text>
+									</Button>
+								),
+							})}
+						<% } else { %>
+							options={({ navigation }) => ({
+								headerLeft: () => (
+									<View style={styles.backButton}>
+										<Feather name="chevron-left" size={16} color="#007AFF" />
+										<Text style={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
+									</View>
+								)
+							})}
+						<% } %>
+					/>
+				</Stack.Navigator>
+			</NavigationContainer>
+		);
+	}
+
+	<% if (props.stylingPackage?.name === "nativewind") { %>
+		const styles = {
+			backButton: "flex-row",
+			backButtonText: "text-blue-500 ml-1"
+		};
+	<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+		const styles = StyleSheet.create({
+			backButton: {
+				flexDirection: "row"
+			},
+			backButtonText: {
+				color: "#007AFF",
+				marginLeft: 4
+			}
+		});
+	<% } %>
 <% } else { %>
-    import { NavigationContainer } from "@react-navigation/native";
-    import { createStackNavigator } from "@react-navigation/stack";
+	import { NavigationContainer } from "@react-navigation/native";
+	import { createStackNavigator } from "@react-navigation/stack";
 
-    import Modal from "../screens/modal";
-    import TabNavigator from "./tab-navigator";
+	import Modal from "../screens/modal";
+	import TabNavigator from "./tab-navigator";
 
-    export type RootStackParamList = {
-    TabNavigator: undefined;
-    Modal: undefined;
-    };
+	export type RootStackParamList = {
+		TabNavigator: undefined;
+		Modal: undefined;
+	};
 
-    const Stack = createStackNavigator<RootStackParamList>();
+	const Stack = createStackNavigator<RootStackParamList>();
 
-    export default function RootStack() {
-    return (
-        <NavigationContainer>
-        <Stack.Navigator initialRouteName="TabNavigator">
-            <Stack.Screen
-            name="TabNavigator"
-            component={TabNavigator}
-            options={{ headerShown: false }}
-            />
-            <Stack.Screen name="Modal" component={Modal} options={{ presentation: "modal", headerLeft: null }} />
-        </Stack.Navigator>
-        </NavigationContainer>
-    );
-    }
+	export default function RootStack() {
+		return (
+			<NavigationContainer>
+				<Stack.Navigator initialRouteName="TabNavigator">
+					<Stack.Screen
+						name="TabNavigator"
+						component={TabNavigator}
+						options={{ headerShown: false }}
+					/>
+					<Stack.Screen
+						name="Modal"
+						component={Modal}
+						options={{ presentation: "modal", headerLeft: null }}
+					/>
+				</Stack.Navigator>
+			</NavigationContainer>
+		);
+	}
 <% } %>

package/build/templates/packages/react-navigation/screens/details.tsx.ejs

@@ -1,72 +1,75 @@
 import { RouteProp, useRoute } from "@react-navigation/native";
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  import { View, Text } from "react-native";
+	import { View, Text } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Paragraph } from "tamagui";
+	import { YStack } from "tamagui";
+	import { Container, Main, Subtitle, Title } from "../../tamagui.config";
 <% } else { %>
-  import { View, StyleSheet, Text } from "react-native";
+	import { View, StyleSheet, Text } from "react-native";
 <% } %>
 import { RootStackParamList } from "../navigation";
 
 type DetailsSreenRouteProp = RouteProp<RootStackParamList, "Details">;
 
 export default function Details() {
-  const router = useRoute<DetailsSreenRouteProp>();
-  <% if (props.stylingPackage?.name === "nativewind") { %>
-    return (
-      <View className={styles.container}>
-        <View className={styles.main}>
-          <Text className={styles.title}>Details</Text>
-          <Text className={styles.subtitle}>Showing details for user {router.params.name}.</Text>
-        </View>
-      </View>
-    );
-  <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-      <YStack flex={1} paddingTop="$2">
-        <YStack flex={1} maxWidth="100%">
-          <H2>Details</H2>
-          <Paragraph>Showing details for user {router.params.name}.</Paragraph>
-        </YStack>
-      </YStack>
-    );
-  <% } else { %>
-    return (
-      <View style={styles.container}>
-        <View style={styles.main}>
-          <Text style={styles.title}>Details</Text>
-          <Text style={styles.subtitle}>Showing details for user {router.params.name}.</Text>
-        </View>
-      </View>
-    );
-  <% } %>
+	const router = useRoute<DetailsSreenRouteProp>();
+	<% if (props.stylingPackage?.name === "nativewind") { %>
+		return (
+			<View className={styles.container}>
+				<View className={styles.main}>
+					<Text className={styles.title}>Details</Text>
+					<Text className={styles.subtitle}>Showing details for user {router.params.name}.</Text>
+				</View>
+			</View>
+		);
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		return (
+			<Container>
+				<Main>
+					<YStack>
+						<Title>Details</Title>
+						<Subtitle>Showing details for user {router.params.name}.</Subtitle>
+					</YStack>
+				</Main>
+			</Container>
+		);
+	<% } else { %>
+		return (
+			<View style={styles.container}>
+				<View style={styles.main}>
+					<Text style={styles.title}>Details</Text>
+					<Text style={styles.subtitle}>Showing details for user {router.params.name}.</Text>
+				</View>
+			</View>
+		);
+	<% } %>
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  const styles = {
-    container: "flex-1 p-6",
-    main: "flex-1 max-w-[960]",
-    title: "text-[64px] font-bold",
-    subtitle: "text-4xl text-gray-700",
-  };
+	const styles = {
+		container: "flex-1 p-6",
+		main: "flex-1 max-w-[960]",
+		title: "text-[64px] font-bold",
+		subtitle: "text-4xl text-gray-700",
+	};
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 24,
-    },
-    main: {
-      flex: 1,
-      maxWidth: 960,
-      marginHorizontal: "auto",
-    },
-    title: {
-      fontSize: 64,
-      fontWeight: "bold",
-    },
-    subtitle: {
-      fontSize: 36,
-      color: "#38434D",
-    },
-  });
+	const styles = StyleSheet.create({
+		container: {
+			flex: 1,
+			padding: 24,
+		},
+		main: {
+			flex: 1,
+			maxWidth: 960,
+			marginHorizontal: "auto",
+		},
+		title: {
+			fontSize: 64,
+			fontWeight: "bold",
+		},
+		subtitle: {
+			fontSize: 36,
+			color: "#38434D",
+		},
+	});
 <% } %>