create-expo-stack 2.0.8 → 2.0.10

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.8",
+  "version": "2.0.10",
   "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",