create-expo-stack 2.0.7 → 2.0.9

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

@@ -0,0 +1,96 @@
+<% if (props.useNativewind) { %>
+  import { Text, TouchableOpacity, View } from "react-native";
+<% } else { %>
+  import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+<% } %>
+import { Link } from "expo-router";
+
+export default function Page() {
+  <% if (props.useNativewind) { %>
+    return (
+      <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 { %>
+    return (
+      <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.useNativewind) { %>
+  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 { %>
+  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/expo-router/tabs/app/(tabs)/_layout.tsx.ejs

@@ -0,0 +1,57 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Link, Tabs } from "expo-router";
+import { Pressable, StyleSheet } from "react-native";
+
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>["name"];
+  color: string;
+}) {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+}
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: "black",
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Tab One",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="info-circle"
+                    size={25}
+                    color="gray"
+                    style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: "Tab Two",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});

package/build/templates/packages/expo-router/tabs/app/(tabs)/index.tsx.ejs

@@ -0,0 +1,52 @@
+<% if (props.useNativewind) { %>
+    import { Text, View } from "react-native";
+<% } else { %>
+    import { StyleSheet, Text, View } from "react-native";
+<% } %>
+
+import EditScreenInfo from "../../components/edit-screen-info";
+
+export default function TabOneScreen() {
+    <% if (props.useNativewind) { %>
+        return (
+            <View className={styles.container}>
+                <Text className={styles.title}>Tab One</Text>
+                <View className={styles.separator} />
+                <EditScreenInfo path="app/(tabs)/index.tsx" />
+            </View>
+        );
+    <% } else { %>
+        return (
+            <View style={styles.container}>
+                <Text style={styles.title}>Tab One</Text>
+                <View style={styles.separator} />
+                <EditScreenInfo path="app/(tabs)/index.tsx" />
+            </View>
+        );
+    <% } %>
+}
+
+<% if (props.useNativewind) { %>
+    const styles = {
+        container: `items-center flex-1 justify-center`,
+        separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+        title: `text-xl font-bold`
+    };
+<% } else { %>
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: "center",
+            flex: 1,
+            justifyContent: "center",
+        },
+        separator: {
+            height: 1,
+            marginVertical: 30,
+            width: "80%",
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "bold",
+        }
+    });
+<% } %>

package/build/templates/packages/expo-router/tabs/app/(tabs)/two.tsx.ejs

@@ -0,0 +1,52 @@
+<% if (props.useNativewind) { %>
+    import { Text, View } from "react-native";
+<% } else { %>
+    import { StyleSheet, Text, View } from "react-native";
+<% } %>
+
+import EditScreenInfo from "../../components/edit-screen-info";
+
+export default function TabTwoScreen() {
+    <% if (props.useNativewind) { %>
+        return (
+            <View className={styles.container}>
+                <Text className={styles.title}>Tab Two</Text>
+                <View className={styles.separator} />
+                <EditScreenInfo path="app/(tabs)/index.tsx" />
+            </View>
+        );
+    <% } else { %>
+        return (
+            <View style={styles.container}>
+                <Text style={styles.title}>Tab Two</Text>
+                <View style={styles.separator} />
+                <EditScreenInfo path="app/(tabs)/two.tsx" />
+            </View>
+        );
+    <% } %>
+}
+
+<% if (props.useNativewind) { %>
+    const styles = {
+        container: `items-center flex-1 justify-center`,
+        separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+        title: `text-xl font-bold`
+    };
+<% } else { %>
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: "center",
+            flex: 1,
+            justifyContent: "center",
+        },
+        separator: {
+            height: 1,
+            marginVertical: 30,
+            width: "80%",
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "bold",
+        }
+    });
+<% } %>

package/build/templates/packages/expo-router/tabs/app/_layout.tsx.ejs

@@ -0,0 +1,15 @@
+import { Stack } from "expo-router";
+
+export const unstable_settings = {
+  // Ensure that reloading on `/modal` keeps a back button present.
+  initialRouteName: "(tabs)",
+};
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+    </Stack>
+  );
+}

package/build/templates/packages/expo-router/tabs/app/modal.tsx.ejs

@@ -0,0 +1,55 @@
+ <% if (props.useNativewind) { %>
+    import { Platform, Text, View } from "react-native";
+<% } else { %>
+    import { Platform, StyleSheet, Text, View } from "react-native";
+<% } %>
+import { StatusBar } from "expo-status-bar";
+
+import EditScreenInfo from "../components/edit-screen-info";
+
+export default function ModalScreen() {
+    <% if (props.useNativewind) { %>
+        return (
+            <View className={styles.container}>
+                <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+                <Text className={styles.title}>Modal</Text>
+                <View className={styles.separator} />
+                <EditScreenInfo path="app/modal.tsx" />
+            </View>
+        );
+    <% } else { %>
+        return (
+            <View style={styles.container}>
+                <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+                <Text style={styles.title}>Modal</Text>
+                <View style={styles.separator} />
+                <EditScreenInfo path="app/modal.tsx" />
+            </View>
+        );
+    <% } %>
+}
+
+<% if (props.useNativewind) { %>
+    const styles = {
+        container: `items-center flex-1 justify-center`,
+        separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+        title: `text-xl font-bold`
+    };
+<% } else { %>
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: "center",
+            flex: 1,
+            justifyContent: "center"
+        },
+        separator: {
+            height: 1,
+            marginVertical: 30,
+            width: "80%"
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "bold"
+        }
+    });
+<% } %>

package/build/templates/packages/expo-router/tabs/components/edit-screen-info.tsx.ejs

@@ -0,0 +1,84 @@
+import React from "react";
+<% if (props.useNativewind) { %>
+    import { Text, View } from "react-native";
+<% } else { %>
+    import { StyleSheet, Text, View } from "react-native";
+<% } %>
+
+export default function EditScreenInfo({ path }: { path: string }) {
+    <% if (props.useNativewind) { %>
+        return (
+            <View>
+                <View className={styles.getStartedContainer}>
+                    <Text className={styles.getStartedText}>
+                        Open up the code for this screen:
+                    </Text>
+                    <View className={styles.codeHighlightContainer + styles.homeScreenFilename}>
+                        <Text>{path}</Text>
+                    </View>
+                    <Text className={styles.getStartedText}>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Text>
+                </View>
+            </View>
+        );
+    <% } else { %>
+        return (
+            <View>
+                <View style={styles.getStartedContainer}>
+                    <Text style={styles.getStartedText}>
+                        Open up the code for this screen:
+                    </Text>
+                    <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+                        <Text>{path}</Text>
+                    </View>
+                    <Text style={styles.getStartedText}>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Text>
+                </View>
+            </View>
+        );
+    <% } %>
+}
+
+<% if (props.useNativewind) { %>
+    const styles = {
+    codeHighlightContainer: `rounded-md px-1`,
+    getStartedContainer: `items-center mx-12`,
+    getStartedText: `text-lg leading-6 text-center`,
+    helpContainer: `items-center mx-5 mt-4`,
+    helpLink: `py-4`,
+    helpLinkText: `text-center`,
+    homeScreenFilename: `my-2`,
+    };
+<% } else { %>
+    const styles = StyleSheet.create({
+    codeHighlightContainer: {
+        borderRadius: 3,
+        paddingHorizontal: 4
+    },
+    getStartedContainer: {
+        alignItems: "center",
+        marginHorizontal: 50
+    },
+    getStartedText: {
+        fontSize: 17,
+        lineHeight: 24,
+        textAlign: "center"
+    },
+    helpContainer: {
+        alignItems: "center",
+        marginHorizontal: 20,
+        marginTop: 15
+    },
+    helpLink: {
+        paddingVertical: 15
+    },
+    helpLinkText: {
+        textAlign: "center"
+    },
+    homeScreenFilename: {
+        marginVertical: 7
+    }
+    });
+<% } %>

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

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

package/build/templates/packages/nativewind/tailwind.config.js.ejs

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    <% if (props.navigationPackage?.name === "react-navigation") { %>
+      content: ["./App.{js,ts,tsx}", "./src/**/*.{js,ts,tsx}"],
+    <% } else if (props.navigationPackage?.name === "expo-router" && props.navigationPackage?.options === 'tabs') { %>
+      content: ["./index.{js,ts,tsx}", "./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+    <% } else if (props.navigationPackage?.name === "expo-router") { %>
+      content: ["./index.{js,ts,tsx}", "./app/**/*.{js,ts,tsx}"],
+    <% } else { %>
+      content: ["./App.{js,ts,tsx}"],
+    <% } %>
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }

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

@@ -0,0 +1,8 @@
+import "react-native-gesture-handler";
+import RootStack from "./src/navigation";
+
+export default function App() {
+  return (
+    <RootStack />
+  );
+}

package/build/templates/packages/react-navigation/components/edit-screen-info.tsx.ejs

@@ -0,0 +1,99 @@
+import React from "react";
+<% if (props.useNativewind) { %>
+  import { Text, View } from "react-native";
+<% } else { %>
+  import { StyleSheet, Text, View } from "react-native";
+<% } %>
+
+<% if (props.useNativewind) { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    return (
+      <View>
+        <View className={styles.getStartedContainer}>
+          <Text
+            className={styles.getStartedText}>
+            Open up the code for this screen:
+          </Text>
+
+          <View
+            className={styles.codeHighlightContainer}
+            >
+            <Text>{path}</Text>
+          </View>
+
+          <Text
+            className={styles.getStartedText}
+            >
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+<% } else { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    return (
+      <View>
+        <View style={styles.getStartedContainer}>
+          <Text
+            style={styles.getStartedText}>
+            Open up the code for this screen:
+          </Text>
+
+          <View
+            style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+            >
+            <Text>{path}</Text>
+          </View>
+
+          <Text
+            style={styles.getStartedText}
+            >
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+<% } %>
+
+<% if (props.useNativewind) { %>
+  const styles = {
+    codeHighlightContainer: "rounded-md px-1 my-2",
+    getStartedContainer: "items-center mx-12",
+    getStartedText: "text-lg leading-6 text-center",
+    helpContainer: "items-center mx-5 mt-4",
+    helpLink: "py-4",
+    helpLinkText: "text-center"
+  };
+<% } else { %>
+  const styles = StyleSheet.create({
+    codeHighlightContainer: {
+      borderRadius: 3,
+      paddingHorizontal: 4
+    },
+    getStartedContainer: {
+      alignItems: "center",
+      marginHorizontal: 50
+    },
+    getStartedText: {
+      fontSize: 17,
+      lineHeight: 24,
+      textAlign: "center"
+    },
+    helpContainer: {
+      alignItems: "center",
+      marginHorizontal: 20,
+      marginTop: 15
+    },
+    helpLink: {
+      paddingVertical: 15
+    },
+    helpLinkText: {
+      textAlign: "center"
+    },
+    homeScreenFilename: {
+      marginVertical: 7
+    }
+  });
+<% } %>

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

@@ -0,0 +1,98 @@
+<% if (props.navigationPackage?.options === 'stack') { %>
+    import { Feather } from "@expo/vector-icons";
+    import { NavigationContainer } from "@react-navigation/native";
+    import { createStackNavigator } from "@react-navigation/stack";
+    <% if (props.useNativewind) { %>
+        import { Text, View } from "react-native";
+    <% } else { %>
+        import { Text, View, StyleSheet } from "react-native";
+    <% } %>
+
+    import Overview from "../screens/overview";
+    import Details from "../screens/details";
+
+    export type RootStackParamList = {
+    Overview: undefined;
+    Details: { name: string };
+    };
+
+    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.useNativewind) { %>
+                    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 { %>
+                    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.useNativewind) { %>
+        const styles = {
+            backButton: "flex-row",
+            backButtonText: "text-blue-500 ml-1"
+        };
+    <% } else { %>
+        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 Modal from "../screens/modal";
+    import TabNavigator from "./tab-navigator";
+
+    export type RootStackParamList = {
+    TabNavigator: undefined;
+    Modal: undefined;
+    };
+
+    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>
+    );
+    }
+<% } %>