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

package/build/templates/base/app.json.ejs

@@ -0,0 +1,69 @@
+{
+  "expo": {
+    "name": "<%= props.projectName %>",
+    "slug": "<%= props.projectName %>",
+    "version": "1.0.0",
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        "newArchEnabled": true,
+    <% } %>
+    <% if (props.navigationPackage?.name === 'expo-router') { %>
+      "scheme": "<%= props.projectName %>",
+      "platforms": ["ios", "android"],
+      "web": {
+        "bundler": "metro",
+        "output": "static",
+        "favicon": "./assets/favicon.png"
+      },
+      "plugins": [
+      "expo-router"
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        ,"expo-localization"
+      <% } %>
+    ],
+      "experiments": {
+        "typedRoutes": true
+        <% if (props.flags.importAlias) { %>
+          ,"tsconfigPaths": true
+        <% } %>
+      },
+    <% } else { %>
+      "web": {
+        "favicon": "./assets/favicon.png"
+      },
+      <% if (props.flags.importAlias) { %>
+        "experiments": {
+          "tsconfigPaths": true
+        },
+      <% } %>
+      "plugins": [
+        <% if (props.internalizationPackage?.name === "i18next") { %>
+          "expo-localization"
+        <% } %>
+      ],
+    <% } %>
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    <% if (props.stylingPackage?.name === "nativewindui" || props.stylingPackage?.name === "unistyles") { %>
+    "userInterfaceStyle": "automatic",
+     <% } else { %>
+     "userInterfaceStyle": "light",
+    <% } %>
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    }
+  }
+}

package/build/templates/base/babel.config.js.ejs

@@ -0,0 +1,38 @@
+module.exports = function(api) {
+  api.cache(true);
+  let plugins = [];
+
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    plugins.push([
+      'react-native-unistyles/plugin',
+      {
+        autoProcessRoot: 'app',
+        autoProcessImports: ['~/components']
+      }
+    ]);
+  <% } %>
+
+  <% if (props.stylingPackage?.name === "tamagui") { %>
+    plugins.push([
+      '@tamagui/babel-plugin',
+      {
+        config: './tamagui.config.ts',
+        components: ['tamagui']
+      }
+    ]);
+  <% } %>
+
+  plugins.push('react-native-worklets/plugin');
+
+  return {
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
+      presets: [
+        ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+        'nativewind/babel',
+      ],
+    <% } else { %>
+      presets: ['babel-preset-expo'],
+    <% } %>
+    plugins,
+  };
+};

package/build/templates/base/components/BackButton.tsx.ejs

@@ -0,0 +1,23 @@
+import { Feather } from '@expo/vector-icons';
+import { Text, View, StyleSheet } from 'react-native';
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <View style={styles.backButton}>
+      <Feather name="chevron-left" size={16} color="#007AFF" />
+      <Text style={styles.backButtonText} onPress={onPress}>
+        Back
+      </Text>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  backButton: {
+    flexDirection: 'row',
+    paddingLeft: 20,
+  },
+  backButtonText: {
+    color: '#007AFF',
+    marginLeft: 4,
+  },
+});

package/build/templates/base/components/Button.tsx.ejs

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+type ButtonProps = {
+  title?: string;
+} & TouchableOpacityProps;
+
+export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
+  return (
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
+      <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#6366F1',
+    borderRadius: 24,
+    elevation: 5,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      height: 2,
+      width: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/build/templates/base/components/Container.tsx.ejs

@@ -0,0 +1,14 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: 'white',
+  },
+});
+

package/build/templates/base/components/EditScreenInfo.tsx.ejs

@@ -0,0 +1,44 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+export default function EditScreenInfo({ path }: { path: string }) {
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  const { t } = useTranslation();
+  const title = t('getStarted');
+  const description = t('changeCode')
+<% } else { %>
+  const title = "Open up the code for this screen:"
+  const description = "Change any of the text, save the file, and your app will automatically update."
+<% } %>
+  return (
+    <View style={styles.getStartedContainer}>
+      <Text style={styles.getStartedText}>{title}</Text>
+      <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+        <Text>{path}</Text>
+      </View>
+      <Text style={styles.getStartedText}>{description}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+});

package/build/templates/base/components/HeaderButton.tsx.ejs

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void; }>(({ onPress }, ref) => {
+  return (
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={25}
+          color="gray"
+          style={[
+            styles.headerRight,
+            {
+              opacity: pressed ? 0.5 : 1,
+            },
+          ]}
+        />
+      )}
+    </Pressable>
+  );
+});
+
+HeaderButton.displayName = 'HeaderButton';
+
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

package/build/templates/base/components/ScreenContent.tsx.ejs

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import EditScreenInfo from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  separator: {
+    backgroundColor: '#d1d5db',
+    height: 1,
+    marginVertical: 30,
+    width: '80%',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/build/templates/base/components/TabBarIcon.tsx.ejs

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});

package/build/templates/base/eslint.config.js.ejs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+  {
+    rules: {
+      'react/display-name': 'off',
+    },
+  },
+]);

package/build/templates/base/package.json.ejs

@@ -0,0 +1,191 @@
+{
+  "name": "<%= props.projectName %>",
+  "version": "1.0.0",
+<% if (props.navigationPackage?.name === "expo-router" && props.stylingPackage?.name === 'unistyles') { %>
+    "main": "index.js",
+<% } else if (props.navigationPackage?.name === "expo-router") { %>
+    "main": "expo-router/entry",
+<% } %>
+  "scripts": {
+  <% if (props.flags?.eas) { %>
+    "start": "expo start --dev-client",
+    "ios": "expo run:ios",
+    "android": "expo run:android",
+    "build:dev": "eas build --profile development",
+    "build:preview": "eas build --profile preview",
+    "build:prod": "eas build --profile production",
+    "prebuild": "expo prebuild",
+  <% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "uniwind") { %>
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "start": "expo start",
+    "prebuild": "expo prebuild",
+  <% } else { %>
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "start": "expo start",
+	<% } %>
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" && prettier -c \"**/*.{js,jsx,ts,tsx,json}\"",
+    "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
+      "nativewind": "latest",
+    <% } %>
+    <% if (props.stylingPackage?.name === "uniwind") { %>
+      "uniwind": "^1.6.4",
+    <% } %>
+    <% if (props.stylingPackage?.name === "restyle") { %>
+      "@shopify/restyle": "^2.4.4",
+    <% } %>
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      "@tamagui/config": "^1.118.0",
+      "tamagui": "^1.118.0",
+    <% } %>
+    <% if (props.stylingPackage?.name === "nativewindui") { %>
+      "@shopify/flash-list": "2.0.2",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.1.0",
+      "tailwind-merge": "^2.2.1",
+      "react-native-uitextview": "^1.1.4",
+      "rn-icon-mapper": "^0.0.1",
+      "expo-haptics": "~55.0.14",
+      "expo-symbols": "~55.0.8",
+      <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
+        "@react-native-community/datetimepicker": "8.6.0",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
+        "@react-native-picker/picker": "2.11.4",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        "@expo/react-native-action-sheet": "^4.0.1",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
+        "expo-store-review": "~55.0.13",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
+        "@react-native-community/slider": "5.1.2",
+      <% } %>
+    <% } %>
+
+    <% if (props.stateManagementPackage?.name === "zustand") { %>
+      "zustand": "^4.5.1",
+    <% } %>
+
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        "react-native-unistyles": "3.0.0-rc.4",
+        "react-native-nitro-modules": "0.25.2",
+        "react-native-edge-to-edge": "1.6.0",
+    <% } %>
+
+    <% if (props.navigationPackage?.type === "navigation") { %>
+      "@react-navigation/native": "^7.1.6",
+    <% } %>
+
+    <% if (props.navigationPackage?.type === "navigation" || props.packages?.some((p) => p.name === "react-native-gesture-handler")) { %>
+      "react-native-gesture-handler": "~2.30.0",
+    <% } %>
+
+    <% if (props.navigationPackage?.type === "navigation" || props.packages?.some((p) => p.name === "react-native-screens")) { %>
+      "react-native-screens": "~4.23.0",
+    <% } %>
+
+    <% if (props.packages?.some((p) => p.name === "react-native-svg")) { %>
+      "react-native-svg": "15.15.3",
+    <% } %>
+
+    <% if (props.packages?.some((p) => p.name === "react-native-keyboard-controller")) { %>
+      "react-native-keyboard-controller": "1.20.7",
+    <% } %>
+
+    <% if (props.navigationPackage?.name === "react-navigation") { %>
+      "@react-navigation/stack": "^7.4.8",
+      "@expo/vector-icons": "^15.0.2",
+      "expo-font": "~55.0.7",
+    <% } %>
+
+    <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
+      "vexo-analytics": "^1.3.15",
+    <% } %>
+
+    <% if (props.navigationPackage?.options.type === "tabs" && props.navigationPackage?.name === "react-navigation") { %>
+      "@react-navigation/bottom-tabs": "^7.0.5",
+    <% } %>
+
+    <% if ((props.navigationPackage?.options.type === "drawer + tabs") && (props.navigationPackage?.name === "react-navigation")) { %>
+      "@react-navigation/drawer": "^7.0.0",
+      "@react-navigation/bottom-tabs": "^7.0.5",
+    <% } else if (props.navigationPackage?.options.type === "drawer + tabs") { %>
+      "@react-navigation/drawer": "^7.0.0",
+      "@react-navigation/bottom-tabs": "^7.0.5",
+    <% } %>
+
+    <% if (props.navigationPackage?.name === "expo-router") { %>
+      "@expo/log-box": "55.0.12",
+      "@expo/vector-icons": "^15.0.2",
+      "expo-font": "~55.0.7",
+      "expo-linking": "~55.0.15",
+      "expo-router": "~55.0.14",
+      "expo-constants": "~55.0.16",
+      "expo-system-ui": "~55.0.17",
+      "expo-web-browser": "~55.0.15",
+      "react-dom": "19.2.0",
+      "react-native-web": "~0.21.0",
+    <% } %>
+
+	<% if (props.authenticationPackage?.name === "supabase") { %>
+	    "@react-native-async-storage/async-storage": "2.2.0",
+		"@supabase/supabase-js": "^2.38.4",
+	<% } %>
+
+	<% if (props.authenticationPackage?.name === "firebase") { %>
+	  "firebase": "^12.13.0",
+	<% } %>
+
+  <% if (props.internalizationPackage?.name === "i18next") { %>
+    "i18next": "^23.7.20",
+    "react-i18next": "^14.0.1",
+    "expo-localization": "~55.0.13",
+  <% } %>
+  <% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %>
+    "expo-dev-client": "~55.0.32",
+    "expo-device": "~55.0.16",
+  <% } %>
+
+    "react-native-reanimated": "4.2.1",
+    "react-native-worklets": "0.7.4",
+
+    "react-native-safe-area-context": "~5.6.2",
+    "expo": "~55.0.23",
+    "expo-status-bar": "~55.0.6",
+    "react": "19.2.0",
+    "react-native": "0.83.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~19.2.2",
+    "eslint": "^9.25.1",
+    "eslint-config-expo": "~55.0.0",
+    "eslint-config-prettier": "^10.1.2",
+    "prettier": "^3.2.5",
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
+      "tailwindcss": "^3.4.0",
+      "prettier-plugin-tailwindcss": "^0.5.11",
+    <% } %>
+    <% if (props.stylingPackage?.name === "uniwind") { %>
+      "tailwindcss": "^4.2.4",
+    <% } %>
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      "@tamagui/babel-plugin": "^1.118.0",
+    <% } %>
+    "typescript": "~5.9.2"
+  },
+  <% if (props.navigationPackage?.name !== "expo-router") { %>
+    "main": "node_modules/expo/AppEntry.js",
+  <% } %>
+  <% if  (props.packageManager === "yarn"){ %>
+    "packageManager": "yarn@4.9.4",
+  <% } %>
+  "private": true
+}

package/build/templates/base/prettier.config.js.ejs

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+  <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+  tailwindAttributes: ["className"],
+  <% } %>
+};

package/build/templates/base/tsconfig.json.ejs

@@ -0,0 +1,39 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    <% if (props.flags.importAlias) { %>
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      <% if (props.stylingPackage?.name === 'nativewindui') { %>
+        "@/*": [ "./*" ]
+      <% } else { %>  
+        <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
+        "@/*": ["*"]
+        <% } else if  (props.flags.importAlias === true) { %>
+        "@/*": ["src/*"]
+        <% } else { %>
+        "<%= props.flags.importAlias %>": ["src/*"]
+        <% } %>
+      <% } %>
+    }
+    <% } else { %>
+      "strict": true
+    <% } %>
+  <% if (props.navigationPackage?.name === 'expo-router') { %>
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    <% if (props.stylingPackage?.name === 'nativewind' || props.stylingPackage?.name === 'nativewindui') { %>
+      "expo-env.d.ts",
+      "nativewind-env.d.ts"
+    <% } else { %>
+      "expo-env.d.ts"
+    <% } %>
+  ]
+  <% } else { %>
+    }
+  <% } %>
+}

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

@@ -0,0 +1,40 @@
+import { Tabs } from 'expo-router';
+import { TabBarIcon } from '@/components/TabBarIcon';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from "react-native-unistyles";
+<% } %>
+
+export default function TabLayout() {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+<% } %>
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+        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} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router';
+
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <Container>
+        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
+      </Container>
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router';
+
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <Container>
+        <ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
+      </Container>
+    </>
+  );
+}