@mr.dj2u/create-expo-stack 2.21.3-mrdj.0

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

@@ -0,0 +1,73 @@
+import { Stack, Link } from 'expo-router';
+<% if (props.stylingPackage?.name === "stylesheet" || props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "tamagui") { %>
+import { StyleSheet, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+<% } else { %>
+import { View } from 'react-native';
+<% } %>
+
+import { Button } from '@/components/Button';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
+
+export default function Home() {
+  return (
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+      <View className={styles.container}>
+    <% } else { %>
+      <View style={styles.container}>
+    <% } %>
+      <Stack.Screen options={{ title: 'Home' }} />
+      <Container>
+        <ScreenContent path="app/index.tsx" title="Home">
+        <% if (props.internalizationPackage?.name === "i18next") { %>
+          <InternalizationExample />
+        <% } %>
+        </ScreenContent>
+        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+          <% if (props.stylingPackage?.name === "unistyles") { %>
+              <Button title="Show Details" style={styles.button} />
+          <% } else { %>
+              <Button title="Show Details" />
+          <% } %>
+        </Link>
+      </Container>
+    </View>
+  );
+}
+
+<% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+const styles = {
+  container: "flex flex-1 bg-white",
+}
+<% } else if (props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "tamagui") { %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  button: {
+      marginHorizontal: theme.margins.xl,
+  },
+}));
+<% } %>

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

@@ -0,0 +1,52 @@
+import { Link, Tabs } from "expo-router";
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from "react-native-unistyles";
+<% } %>
+import { HeaderButton } from '../../components/HeaderButton';
+import { TabBarIcon } from '../../components/TabBarIcon';
+
+export default function TabLayout() {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+<% } %>
+  return (
+    <Tabs
+      screenOptions={{
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+          headerStyle: {
+            backgroundColor: theme.colors.background,
+          },
+          headerTitleStyle: {
+            color: theme.colors.typography,
+          },
+          tabBarActiveTintColor: theme.colors.astral,
+          tabBarStyle: {
+             backgroundColor: theme.colors.background,
+          },
+          <% } else { %>
+          tabBarActiveTintColor: 'black',
+        <% } %>
+      }}>
+      <Tabs.Screen
+        name='index'
+        options={{
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Link href='/modal' asChild>
+                  <HeaderButton  />
+            </Link>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
+

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

@@ -0,0 +1,37 @@
+import { Stack } from 'expo-router';
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else { %>
+import { StyleSheet, View } from 'react-native';
+<% } %>
+
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(tabs)/index.tsx" title="Tab One" />
+      </View>
+    </>
+  );
+}
+
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+    },
+}));
+<% } else { %>
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 24,
+    },
+});
+<% } %>

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

@@ -0,0 +1,37 @@
+import { Stack } from 'expo-router';
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else { %>
+import { StyleSheet, View } from 'react-native';
+<% } %>
+
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(tabs)/two.tsx" title="Tab Two" />
+      </View>
+    </>
+  );
+}
+
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+    },
+}));
+<% } else { %>
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 24,
+    },
+});
+<% } %>

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

@@ -0,0 +1,49 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+    import '../unistyles';
+<% } %>
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

package/build/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs

@@ -0,0 +1,110 @@
+import { Link, Stack } from 'expo-router';
+<% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") {%>
+  import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "tamagui") { %>
+  import { StyleSheet, Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { StyleSheet } from 'react-native-unistyles'
+  import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+  import { StyleSheet, Text, View } from 'react-native';
+<% } %>
+
+export default function NotFoundScreen() {
+
+  return (
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") {%>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View className={styles.container}>
+          <Text className={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" className={styles.link}>
+            <Text className={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </View>
+      </>
+    <% } else { %>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View style={styles.container}>
+          <Text style={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" style={styles.link}>
+            <Text style={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </View>
+      </>
+    <% } %>
+  );
+}
+
+<% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+  const styles = {
+		container: `items-center flex-1 justify-center p-5`,
+    title: `text-xl font-bold`,
+    link: `mt-4 pt-4`,
+    linkText: `text-base text-[#2e78b7]`,
+	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const styles = StyleSheet.create((theme) => ({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: theme.colors.astral,
+    },
+  }));
+<% } else if (props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "tamagui") { %>
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#2e78b7',
+    },
+  });
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#2e78b7',
+    },
+  });
+<% } %>

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

@@ -0,0 +1,84 @@
+<% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+  import '../global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
+<% } else if (props.stylingPackage?.name === "nativewindui") { %>
+  import '../global.css';
+  import 'expo-dev-client';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { useUnistyles } from "react-native-unistyles";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { theme } from '../theme';
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+  import { TamaguiProvider } from 'tamagui';
+  import config from '../tamagui.config';
+<% } %>
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import '../translation';
+<% } %>
+	import { Stack } from "expo-router";
+
+<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
+  import { vexo } from 'vexo-analytics';
+
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY;
+  if (vexoApiKey) {
+    vexo(vexoApiKey);
+  }
+<% } %>
+
+export const unstable_settings = {
+	// Ensure that reloading on `/modal` keeps a back button present.
+	initialRouteName: "(tabs)",
+};
+
+export default function RootLayout() {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useUnistyles();
+  <% } %>
+
+  return (
+    <% if (props.stylingPackage?.name === "restyle") { %>
+      <ThemeProvider theme={theme}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        </Stack>
+      </ThemeProvider>
+    <% } else if (props.stylingPackage?.name === "tamagui") { %>
+      <TamaguiProvider config={config}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        </Stack>
+      </TamaguiProvider>
+    <% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+      <SafeAreaProvider>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        </Stack>
+      </SafeAreaProvider>
+    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: theme.colors.background,
+          },
+          headerTitleStyle: {
+            color: theme.colors.typography,
+          },
+          headerTintColor: theme.colors.typography
+        }}
+      >
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+      </Stack>
+    <% } else { %>
+      <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,21 @@
+import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
+
+import { ScreenContent } from '@/components/ScreenContent';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
+
+export default function Modal() {
+  return (
+    <>
+      <ScreenContent path="app/modal.tsx" title="Modal">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        <InternalizationExample />
+      <% } %>
+      </ScreenContent>
+      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+    </>
+  );
+}

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

@@ -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.ejs

@@ -0,0 +1,14 @@
+const { getDefaultConfig } = require('expo/metro-config');
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  const { withNativeWind } = require("nativewind/metro");
+<% } %>
+
+/** @type {import('expo/metro-config').MetroConfig} */
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname);
+
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  module.exports = withNativeWind(config, { input: "./global.css" });
+<% } else { %>
+  module.exports = config;
+<% } %>

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/i18next/components/InternalizationExample.tsx.ejs

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, StyleSheet, View } from 'react-native';
+
+export const InternalizationExample = () => {
+  const { t, i18n } = useTranslation();
+
+  const toggleLanguage = (locale: 'en' | 'fr') => {
+    i18n.changeLanguage(locale);
+  };
+  return (
+    <>
+      <View style={styles.content}>
+        <Button title={t('button.french')} onPress={() => toggleLanguage('fr')} />
+        <Button title={t('button.english')} onPress={() => toggleLanguage('en')} />
+      </View>
+    </>
+  );
+};
+
+export const styles = StyleSheet.create({
+  content: { gap: 20, padding: 20 },
+});

package/build/templates/packages/i18next/core/i18n/fallbackChecker.ts.ejs

@@ -0,0 +1,13 @@
+import { Resource } from 'i18next';
+
+export const fallbackChecker = (resources: Resource, fallbackLng: string) => {
+  const languages = Object.keys(resources);
+  const hasFallback = languages.find((key) => fallbackLng === key);
+
+  if (!hasFallback) {
+    throw new Error(
+      `fallbackLng  "${fallbackLng}", is not present in your resources, please check your config, languages available: ${languages.join(', ')}`
+    );
+  }
+  return fallbackLng;
+};

package/build/templates/packages/i18next/core/i18n/init.ts.ejs

@@ -0,0 +1,24 @@
+import i18n, { Resource } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import { fallbackChecker } from './fallbackChecker';
+import { languageDetector } from './languageDetector';
+
+type Init18n = {
+  resources: Resource;
+  fallbackLng: string;
+};
+
+export const init18n = ({ resources, fallbackLng }: Init18n) => {
+  return i18n
+    .use(languageDetector)
+    .use(initReactI18next)
+    .init({
+      resources,
+      fallbackLng: fallbackChecker(resources, fallbackLng),
+      compatibilityJSON: 'v3', // By default React Native projects does not support Intl
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+};

package/build/templates/packages/i18next/core/i18n/languageDetector.ts.ejs

@@ -0,0 +1,13 @@
+import * as Localization from 'expo-localization';
+import { LanguageDetectorModule } from 'i18next';
+
+export const languageDetector: LanguageDetectorModule = {
+  type: 'languageDetector',
+  detect: () => {
+    const locales = Localization.getLocales();
+    const firstLanguageCode = locales[0].languageCode ?? 'en';
+    return firstLanguageCode;
+  },
+  init: () => {},
+  cacheUserLanguage: () => {},
+};

package/build/templates/packages/i18next/translation/en.json.ejs

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "french": "Switch language to French",
+    "english": "Switch language to English"
+  },
+  "getStarted": "Open up the code for this screen:",
+  "changeCode": "Change any of the text, save the file, and your app will automatically update."
+}

package/build/templates/packages/i18next/translation/fr.json.ejs

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "french": "Changer la langue en français",
+    "english": "Changer la langue en anglais"
+  },
+  "getStarted": "Ouvrez le code de cet écran :",
+  "changeCode": "Modifiez n'importe quel texte, enregistrez le fichier et votre application sera automatiquement mise à jour."
+}

package/build/templates/packages/i18next/translation/index.ts.ejs

@@ -0,0 +1,20 @@
+import { init18n } from 'core/i18n/init';
+import en from 'translation/en.json';
+import fr from 'translation/fr.json';
+
+export const resources = {
+  en: {
+    translation: en,
+  },
+  fr: {
+    translation: fr,
+  },
+};
+
+export const fallbackLng = 'en';
+
+export type LanguageCode = keyof typeof resources;
+
+const i18n = init18n({ resources, fallbackLng });
+
+export default i18n;

package/build/templates/packages/nativewind/components/BackButton.tsx.ejs

@@ -0,0 +1,22 @@
+import { Feather } from '@expo/vector-icons';
+import { Text, View } from 'react-native';
+
+interface BackButtonProps {
+  onPress: () => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({ onPress }) => {
+  return (
+    <View className={styles.backButton}>
+      <Feather name="chevron-left" size={16} color="#007AFF" />
+      <Text className={styles.backButtonText} onPress={onPress}>
+        Back
+      </Text>
+    </View>
+  );
+};
+
+const styles = {
+  backButton: 'flex-row',
+  backButtonText: 'text-blue-500 ml-1',
+};