create-expo-stack 2.0.7 → 2.0.9

package/build/templates/packages/react-navigation/navigation/tab-navigator.tsx.ejs

@@ -0,0 +1,62 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Pressable, StyleSheet } from "react-native";
+
+import One from "../screens/one";
+import Two from "../screens/two";
+
+const Tab = createBottomTabNavigator();
+
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>["name"];
+  color: string;
+}) {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+}
+
+export default function TabLayout({ navigation }) {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarActiveTintColor: "black",
+      }}>
+      <Tab.Screen
+        name="One"
+        component={One}
+        options={{
+          title: "Tab One",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Pressable onPress={() => navigation.navigate("Modal")}>
+              {({ pressed }) => (
+                <FontAwesome
+                  name="info-circle"
+                  size={25}
+                  color="gray"
+                  style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
+                />
+              )}
+            </Pressable>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Two"
+        component={Two}
+        options={{
+          title: "Tab Two",
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});

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

@@ -0,0 +1,61 @@
+import { RouteProp, useRoute } from "@react-navigation/native";
+<% if (props.useNativewind) { %>
+  import { View, Text } from "react-native";
+<% } else { %>
+  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.useNativewind) { %>
+    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 { %>
+    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.useNativewind) { %>
+  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 { %>
+  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",
+    },
+  });
+<% } %>

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

@@ -0,0 +1,57 @@
+<% 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 Modal() {
+  <% 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="src/screens/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="src/screens/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: {
+      backgroundColor: "gray",
+      height: 1,
+      marginVertical: 30,
+      opacity: 0.25,
+      width: "80%",
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "bold"
+    }
+  });
+<% } %>

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

@@ -0,0 +1,54 @@
+<% 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="src/screens/one.tsx" />
+      </View>
+    );
+  <% } else { %>
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Tab One</Text>
+        <View style={styles.separator} />
+        <EditScreenInfo path="src/screens/one.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: {
+      backgroundColor: "gray",
+      height: 1,
+      marginVertical: 30,
+      opacity: 0.25,
+      width: "80%",
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "bold",
+    }
+  });
+<% } %>

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

@@ -0,0 +1,97 @@
+import { useNavigation } from "@react-navigation/native";
+import { StackNavigationProp } from "@react-navigation/stack";
+<% if (props.useNativewind) { %>
+  import { Text, TouchableOpacity, View } from "react-native";
+<% } else { %>
+  import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+<% } %>
+import { RootStackParamList } from "../navigation";
+
+type OverviewScreenNavigationProps = StackNavigationProp<RootStackParamList, "Overview">;
+
+export default function Overview() {
+  const navigation = useNavigation<OverviewScreenNavigationProps>();
+  <% 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>
+          <TouchableOpacity className={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
+            <Text className={styles.buttonText}>Show Details</Text>
+          </TouchableOpacity>
+        </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>
+          <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
+            <Text style={styles.buttonText}>Show Details</Text>
+          </TouchableOpacity>
+        </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/react-navigation/screens/two.tsx.ejs

@@ -0,0 +1,54 @@
+<% 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="src/screens/one.tsx" />
+      </View>
+    );
+  <% } else { %>
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Tab Two</Text>
+        <View style={styles.separator} />
+        <EditScreenInfo path="src/screens/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: {
+      backgroundColor: "gray",
+      height: 1,
+      marginVertical: 30,
+      opacity: 0.25,
+      width: "80%",
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "bold",
+    }
+  });
+<% } %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-expo-stack",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "create-expo-stack CLI",
   "private": false,
   "types": "build/types/types.d.ts",
@@ -14,7 +14,7 @@
   "scripts": {
     "clean-build": "rm -rf ./build",
     "compile": "tsc -p .",
-    "copy-templates": "copyfiles ./src/templates/* ./build/templates",
+    "copy-templates": "copyfiles -u 2 \"./src/templates/**/*\" ./build/templates",
     "build": "yarn clean-build && yarn compile && yarn copy-templates && yarn lint-templates",
     "prepublishOnly": "yarn build",
     "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
@@ -34,6 +34,7 @@
   "license": "MIT",
   "dependencies": {
     "ejs-lint": "^2.0.0",
+    "figlet": "^1.6.0",
     "gluegun": "latest",
     "gradient-string": "^2.0.2"
   },