create-expo-stack 2.1.24 → 2.2.0

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

@@ -1,8 +1,8 @@
  <% if (props.stylingPackage?.name === "nativewind") { %>
     import { Platform, Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    import { YStack, Paragraph, Separator } from "tamagui";
-    import { Platform } from 'react-native'
+    import { YStack, Paragraph, Separator, Theme } from "tamagui";
+	import { Platform } from 'react-native'
 <% } else { %>
     import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -13,55 +13,57 @@ import EditScreenInfo from "../components/edit-screen-info";
 export default function ModalScreen() {
     <% if (props.stylingPackage?.name === "nativewind") { %>
         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>
-        );
+			<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 if (props.stylingPackage?.name === "tamagui") { %>
         return (
-            <YStack flex={1} alignItems="center" justifyContent="center">
-                <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
-                <Paragraph>Modal</Paragraph>
-                <Separator />
-                <EditScreenInfo path="app/modal.tsx" />
-            </YStack>
-        );
+			<Theme name="light">
+				<YStack flex={1} alignItems="center" justifyContent="center">
+					<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+					<Paragraph>Modal</Paragraph>
+					<Separator />
+					<EditScreenInfo path="app/modal.tsx" />
+				</YStack>
+			</Theme>
+		);
     <% } 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>
-        );
+			<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.stylingPackage?.name === "nativewind") { %>
     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`
-    };
+		container: `items-center flex-1 justify-center`,
+		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+		title: `text-xl font-bold`
+	};
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
-        container: {
-            alignItems: "center",
-            flex: 1,
-            justifyContent: "center"
-        },
-        separator: {
-            height: 1,
-            marginVertical: 30,
-            width: "80%"
-        },
-        title: {
-            fontSize: 20,
-            fontWeight: "bold"
-        }
-    });
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center"
+		},
+		separator: {
+			height: 1,
+			marginVertical: 30,
+			width: "80%"
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold"
+		}
+	});
 <% } %>

package/build/templates/packages/firebase/.env

@@ -0,0 +1,8 @@
+EXPO_PUBLIC_FIREBASE_API_KEY=api_key
+EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=project-id.firebaseapp.com
+EXPO_PUBLIC_DATABASE_URL=https://project-id.firebaseio.com
+EXPO_PUBLIC_PROJECT_ID=project-id
+EXPO_PUBLIC_STORAGE_BUCKET=project-id.appspot.com
+EXPO_PUBLIC_MESSAGING_SENDER_ID=sender-id
+EXPO_PUBLIC_APP_ID=app-id
+EXPO_PUBLIC_MEASUREMENT_ID=G-measurement-id

package/build/templates/packages/firebase/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+
+const defaultConfig = getDefaultConfig(import.meta.dir);
+defaultConfig.resolver.sourceExts.push('cjs');
+
+module.exports = defaultConfig;

package/build/templates/packages/firebase/utils/firebase.ts.ejs

@@ -0,0 +1,26 @@
+import { initializeApp } from 'firebase/app';
+
+// Optionally import the services that you want to use
+// import {...} from "firebase/auth";
+// import {...} from "firebase/database";
+// import {...} from "firebase/firestore";
+// import {...} from "firebase/functions";
+// import {...} from "firebase/storage";
+
+// Initialize Firebase
+const firebaseConfig = {
+	apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
+	authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
+	databaseURL: process.env.EXPO_PUBLIC_FIREBASE_DATABASE_URL,
+	projectId: process.env.EXPO_PUBLIC_PROJECT_ID,
+	storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
+	messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+	appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
+	measurementId: process.env.EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID,
+};
+
+const firebase = initializeApp(firebaseConfig);
+// For more information on how to access Firebase in your project,
+// see the Firebase documentation: https://firebase.google.com/docs/web/setup#access-firebase
+
+export default firebase;

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

@@ -77,7 +77,8 @@
 	<% } else if (props.stylingPackage?.name === "stylesheet") { %>
 		const styles = StyleSheet.create({
 			backButton: {
-				flexDirection: "row"
+				flexDirection: "row",
+				paddingLeft: 20,
 			},
 			backButtonText: {
 				color: "#007AFF",

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

@@ -1,69 +1,71 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  import { Platform, Text, View } from "react-native";
+  	import { Platform, Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, Paragraph, Separator } from "tamagui";
-  import { Platform } from 'react-native'
+  	import { YStack, Paragraph, Separator, Theme } from "tamagui";
+	import { Platform } from 'react-native'
 <% } else { %>
-  import { Platform, StyleSheet, Text, View } from "react-native";
+  	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.stylingPackage?.name === "nativewind") { %>
-    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 if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-        <YStack flex={1} alignItems="center" justifyContent="center">
-            <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
-            <Paragraph>Modal</Paragraph>
-            <Separator />
-            <EditScreenInfo path="src/screens/modal.tsx" />
-        </YStack>
-      );
-  <% } 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.stylingPackage?.name === "nativewind") { %>
+		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 if (props.stylingPackage?.name === "tamagui") { %>
+		return (
+					<Theme name="light">
+						<YStack flex={1} alignItems="center" justifyContent="center">
+							<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+							<Paragraph>Modal</Paragraph>
+							<Separator />
+							<EditScreenInfo path="src/screens/modal.tsx" />
+						</YStack>
+					</Theme>
+				);
+	<% } 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.stylingPackage?.name === "nativewind") { %>
-  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"
-  };
+  	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 if (props.stylingPackage?.name === "stylesheet") { %>
-  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"
-    }
-  });
+  	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

@@ -1,64 +1,66 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  import { Text, View } from "react-native";
+  	import { Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Separator } from "tamagui";
+  	import { YStack, H2, Separator, Theme } from "tamagui";
 <% } else { %>
-  import { StyleSheet, Text, View } from "react-native";
+  	import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function TabOneScreen() {
-  <% if (props.stylingPackage?.name === "nativewind") { %>
-    return (
-      <View className={styles.container}>
-        <Text className={styles.title}>Tab One</Text>
-        <View className={styles.separator} />
-        <EditScreenInfo path="src/screens/one.tsx" />
-      </View>
-    );
-  <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-      <YStack flex={1} alignItems="center" justifyContent="center">
-        <H2>Tab One</H2>
-        <Separator />
-        <EditScreenInfo path="src/screens/one.tsx" />
-      </YStack>
-    );    
-  <% } 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.stylingPackage?.name === "nativewind") { %>
+		return (
+			<View className={styles.container}>
+				<Text className={styles.title}>Tab One</Text>
+				<View className={styles.separator} />
+				<EditScreenInfo path="src/screens/one.tsx" />
+			</View>
+		);
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		return (
+			<Theme name="light">
+				<YStack flex={1} alignItems="center" justifyContent="center">
+					<H2>Tab One</H2>
+					<Separator />
+					<EditScreenInfo path="src/screens/one.tsx" />
+				</YStack>
+			</Theme>
+		);    
+	<% } 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.stylingPackage?.name === "nativewind") { %>
-  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"
-  };
+  	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 if (props.stylingPackage?.name === "stylesheet") { %>
-  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",
-    }
-  });
+  	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/two.tsx.ejs

@@ -1,64 +1,66 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  import { Text, View } from "react-native";
+  	import { Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Separator } from "tamagui";
+  	import { YStack, H2, Separator, Theme } from "tamagui";
 <% } else { %>
-  import { StyleSheet, Text, View } from "react-native";
+  	import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function TabTwoScreen() {
-  <% if (props.stylingPackage?.name === "nativewind") { %>
-    return (
-      <View className={styles.container}>
-        <Text className={styles.title}>Tab Two</Text>
-        <View className={styles.separator} />
-        <EditScreenInfo path="src/screens/two.tsx" />
-      </View>
-    );
-  <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-      <YStack flex={1} alignItems="center" justifyContent="center">
-        <H2>Tab One</H2>
-        <Separator />
-        <EditScreenInfo path="src/screens/two.tsx" />
-      </YStack>
-    );
-  <% } 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.stylingPackage?.name === "nativewind") { %>
+		return (
+			<View className={styles.container}>
+				<Text className={styles.title}>Tab Two</Text>
+				<View className={styles.separator} />
+				<EditScreenInfo path="src/screens/two.tsx" />
+			</View>
+		);
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		return (
+			<Theme name="light">
+				<YStack flex={1} alignItems="center" justifyContent="center">
+					<H2>Tab Two</H2>
+					<Separator />
+					<EditScreenInfo path="src/screens/two.tsx" />
+				</YStack>
+			</Theme>
+		);
+	<% } 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.stylingPackage?.name === "nativewind") { %>
-  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"
-  };
+  	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 if (props.stylingPackage?.name === "stylesheet") { %>
-  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",
-    }
-  });
+  	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/supabase/.env

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL=
+EXPO_PUBLIC_SUPABASE_ANON_KEY=

package/build/templates/packages/supabase/utils/supabase.ts.ejs

@@ -0,0 +1,15 @@
+import 'react-native-url-polyfill/auto';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+	auth: {
+		storage: AsyncStorage,
+		autoRefreshToken: true,
+		persistSession: true,
+		detectSessionInUrl: false,
+	},
+});