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

package/build/templates/packages/nativewindui/tabs/app/_layout.tsx.ejs

@@ -0,0 +1,78 @@
+import '../global.css';
+import 'expo-dev-client';
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { Icon } from '@roninoss/icons';
+<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+<% } %>
+import { Link, Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { Pressable, View } from 'react-native';
+<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+<% } %>
+
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { cn } from '@/lib/cn';
+import { useColorScheme, useInitialAndroidBarSync } from '@/lib/useColorScheme';
+import { NAV_THEME } from '@/theme';
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from 'expo-router';
+
+export default function RootLayout() {
+  useInitialAndroidBarSync();
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+
+  return (
+    <>
+      <StatusBar
+        key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
+        style={isDarkColorScheme ? 'light' : 'dark'}
+      />
+      {/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
+      {/* <ExampleProvider> */}
+       <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <BottomSheetModalProvider>
+        <% } %>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        <ActionSheetProvider>
+        <% } %>
+          <NavThemeProvider value={NAV_THEME[colorScheme]}>
+            <Stack screenOptions={SCREEN_OPTIONS}>
+              <Stack.Screen name="(tabs)" options={TABS_OPTIONS} />
+              <Stack.Screen name="modal" options={MODAL_OPTIONS} />
+            </Stack>
+          </NavThemeProvider>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        </ActionSheetProvider>
+        <% } %>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+        </BottomSheetModalProvider>
+      </GestureHandlerRootView>
+      <% } %>      
+      {/* </ExampleProvider> */}
+    </>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  animation: 'ios_from_right', // for android
+} as const;
+
+const TABS_OPTIONS = {
+  headerShown: false,
+} as const;
+
+const MODAL_OPTIONS = {
+  presentation: 'modal',
+  animation: 'fade_from_bottom', // for android
+  title: 'Settings',
+  headerRight: () => <ThemeToggle />,
+} as const;

package/build/templates/packages/nativewindui/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/nativewindui/tailwind.config.js.ejs

@@ -0,0 +1,67 @@
+const { hairlineWidth, platformSelect } = require('nativewind/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  darkMode: 'class', // Enable manual toggling of dark mode
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        border: withOpacity('border'),
+        input: withOpacity('input'),
+        ring: withOpacity('ring'),
+        background: withOpacity('background'),
+        foreground: withOpacity('foreground'),
+        primary: {
+          DEFAULT: withOpacity('primary'),
+          foreground: withOpacity('primary-foreground'),
+        },
+        secondary: {
+          DEFAULT: withOpacity('secondary'),
+          foreground: withOpacity('secondary-foreground'),
+        },
+        destructive: {
+          DEFAULT: withOpacity('destructive'),
+          foreground: withOpacity('destructive-foreground'),
+        },
+        muted: {
+          DEFAULT: withOpacity('muted'),
+          foreground: withOpacity('muted-foreground'),
+        },
+        accent: {
+          DEFAULT: withOpacity('accent'),
+          foreground: withOpacity('accent-foreground'),
+        },
+        popover: {
+          DEFAULT: withOpacity('popover'),
+          foreground: withOpacity('popover-foreground'),
+        },
+        card: {
+          DEFAULT: withOpacity('card'),
+          foreground: withOpacity('card-foreground'),
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [],
+};
+
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return platformSelect({
+        ios: `rgb(var(--${variableName}) / ${opacityValue})`,
+        android: `rgb(var(--android-${variableName}) / ${opacityValue})`,
+      });
+    }
+    return platformSelect({
+      ios: `rgb(var(--${variableName}))`,
+      android: `rgb(var(--android-${variableName}))`,
+    });
+  };
+}

package/build/templates/packages/nativewindui/theme/colors.ts.ejs

@@ -0,0 +1,123 @@
+import { Platform } from 'react-native';
+
+const IOS_SYSTEM_COLORS = {
+  white: 'rgb(255, 255, 255)',
+  black: 'rgb(0, 0, 0)',
+  light: {
+    grey6: 'rgb(242, 242, 247)',
+    grey5: 'rgb(230, 230, 235)',
+    grey4: 'rgb(210, 210, 215)',
+    grey3: 'rgb(199, 199, 204)',
+    grey2: 'rgb(175, 176, 180)',
+    grey: 'rgb(142, 142, 147)',
+    background: 'rgb(242, 242, 247)',
+    foreground: 'rgb(0, 0, 0)',
+    root: 'rgb(255, 255, 255)',
+    card: 'rgb(255, 255, 255)',
+    cardForeground: 'rgb(8, 28, 30)',
+    popover: 'rgb(230, 230, 235)',
+    popoverForeground: 'rgb(0, 0, 0)',
+    destructive: 'rgb(255, 56, 43)',
+    primary: 'rgb(0, 123, 254)',
+    primaryForeground: 'rgb(255, 255, 255)',
+    secondary: 'rgb(45, 175, 231)',
+    secondaryForeground: 'rgb(255, 255, 255)',
+    muted: 'rgb(175, 176, 180)',
+    mutedForeground: 'rgb(142, 142, 147)',
+    accent: 'rgb(255, 40, 84)',
+    accentForeground: 'rgb(255, 255, 255)',
+    border: 'rgb(230, 230, 235)',
+    input: 'rgb(210, 210, 215)',
+    ring: 'rgb(230, 230, 235)',
+  },
+  dark: {
+    grey6: 'rgb(21, 21, 24)',
+    grey5: 'rgb(40, 40, 42)',
+    grey4: 'rgb(55, 55, 57)',
+    grey3: 'rgb(70, 70, 73)',
+    grey2: 'rgb(99, 99, 102)',
+    grey: 'rgb(142, 142, 147)',
+    background: 'rgb(0, 0, 0)',
+    foreground: 'rgb(255, 255, 255)',
+    root: 'rgb(0, 0, 0)',
+    card: 'rgb(28, 28, 30)',
+    cardForeground: 'rgb(255, 255, 255)',
+    popover: 'rgb(40, 40, 42)',
+    popoverForeground: 'rgb(255, 255, 255)',
+    destructive: 'rgb(254, 67, 54)',
+    primary: 'rgb(3, 133, 255)',
+    primaryForeground: 'rgb(255, 255, 255)',
+    secondary: 'rgb(100, 211, 254)',
+    secondaryForeground: 'rgb(255, 255, 255)',
+    muted: 'rgb(70, 70, 73)',
+    mutedForeground: 'rgb(142, 142, 147)',
+    accent: 'rgb(255, 52, 95)',
+    accentForeground: 'rgb(255, 255, 255)',
+    border: 'rgb(40, 40, 42)',
+    input: 'rgb(55, 55, 57)',
+    ring: 'rgb(40, 40, 42)',
+  },
+} as const;
+
+const ANDROID_COLORS = {
+  white: 'rgb(255, 255, 255)',
+  black: 'rgb(0, 0, 0)',
+  light: {
+    grey6: 'rgb(249, 249, 255)',
+    grey5: 'rgb(215, 217, 228)',
+    grey4: 'rgb(193, 198, 215)',
+    grey3: 'rgb(113, 119, 134)',
+    grey2: 'rgb(65, 71, 84)',
+    grey: 'rgb(24, 28, 35)',
+    background: 'rgb(249, 249, 255)',
+    foreground: 'rgb(0, 0, 0)',
+    root: 'rgb(255, 255, 255)',
+    card: 'rgb(255, 255, 255)',
+    cardForeground: 'rgb(24, 28, 35)',
+    popover: 'rgb(215, 217, 228)',
+    popoverForeground: 'rgb(0, 0, 0)',
+    destructive: 'rgb(186, 26, 26)',
+    primary: 'rgb(0, 112, 233)',
+    primaryForeground: 'rgb(255, 255, 255)',
+    secondary: 'rgb(176, 201, 255)',
+    secondaryForeground: 'rgb(20, 55, 108)',
+    muted: 'rgb(193, 198, 215)',
+    mutedForeground: 'rgb(65, 71, 84)',
+    accent: 'rgb(169, 73, 204)',
+    accentForeground: 'rgb(255, 255, 255)',
+    border: 'rgb(215, 217, 228)',
+    input: 'rgb(210, 210, 215)',
+    ring: 'rgb(215, 217, 228)',
+  },
+  dark: {
+    grey6: 'rgb(16, 19, 27)',
+    grey5: 'rgb(39, 42, 50)',
+    grey4: 'rgb(49, 53, 61)',
+    grey3: 'rgb(54, 57, 66)',
+    grey2: 'rgb(139, 144, 160)',
+    grey: 'rgb(193, 198, 215)',
+    background: 'rgb(0, 0, 0)',
+    foreground: 'rgb(255, 255, 255)',
+    root: 'rgb(0, 0, 0)',
+    card: 'rgb(16, 19, 27)',
+    cardForeground: 'rgb(224, 226, 237)',
+    popover: 'rgb(39, 42, 50)',
+    popoverForeground: 'rgb(224, 226, 237)',
+    destructive: 'rgb(147, 0, 10)',
+    primary: 'rgb(3, 133, 255)',
+    primaryForeground: 'rgb(255, 255, 255)',
+    secondary: 'rgb(28, 60, 114)',
+    secondaryForeground: 'rgb(189, 209, 255)',
+    muted: 'rgb(216, 226, 255)',
+    mutedForeground: 'rgb(139, 144, 160)',
+    accent: 'rgb(83, 0, 111)',
+    accentForeground: 'rgb(238, 177, 255)',
+    border: 'rgb(39, 42, 50)',
+    input: 'rgb(55, 55, 57)',
+    ring: 'rgb(39, 42, 50)',
+  },
+} as const;
+
+const COLORS = Platform.OS === 'ios' ? IOS_SYSTEM_COLORS : ANDROID_COLORS;
+
+export { COLORS };

package/build/templates/packages/nativewindui/theme/index.ts.ejs

@@ -0,0 +1,32 @@
+import { Theme, DefaultTheme, DarkTheme } from '@react-navigation/native';
+
+import { COLORS } from './colors';
+
+const NAV_THEME: { light: Theme; dark: Theme } = {
+  light: {
+    dark: false,
+    colors: {
+      background: COLORS.light.background,
+      border: COLORS.light.grey5,
+      card: COLORS.light.card,
+      notification: COLORS.light.destructive,
+      primary: COLORS.light.primary,
+      text: COLORS.black,
+    },
+    fonts: DefaultTheme.fonts,
+  },
+  dark: {
+    dark: true,
+    colors: {
+      background: COLORS.dark.background,
+      border: COLORS.dark.grey5,
+      card: COLORS.dark.grey6,
+      notification: COLORS.dark.destructive,
+      primary: COLORS.dark.primary,
+      text: COLORS.white,
+    },
+     fonts: DarkTheme.fonts,
+  },
+};
+
+export { NAV_THEME };

package/build/templates/packages/nativewindui/theme/with-opacity.ts.ejs

@@ -0,0 +1,155 @@
+export function withOpacity(color: string, opacity: number): string {
+  if (opacity < 0 || opacity > 1) {
+    throw new Error('Opacity should be between 0 and 1.');
+  }
+
+  // Detect the color format and delegate to the appropriate function
+  if (isNamedColor(color)) {
+    return withOpacityNamedColor(color, opacity);
+  } else if (color.startsWith('#')) {
+    return withOpacityHex(color, opacity);
+  } else if (color.startsWith('rgba')) {
+    return withOpacityRgba(color, opacity);
+  } else if (color.startsWith('rgb')) {
+    return withOpacityRgb(color, opacity);
+  } else if (color.startsWith('hsla')) {
+    return withOpacityHsla(color, opacity);
+  } else if (color.startsWith('hsl')) {
+    return withOpacityHsl(color, opacity);
+  } else {
+    throw new Error('Unsupported color format');
+  }
+}
+
+// Helper function for HEX colors
+function withOpacityHex(hex: string, opacity: number): string {
+  const hexCode = hex.replace('#', '');
+  const expandedHex =
+    hexCode.length === 3
+      ? hexCode
+        .split('')
+        .map((x) => x + x)
+        .join('')
+      : hexCode;
+
+  const r = parseInt(expandedHex.substr(0, 2), 16);
+  const g = parseInt(expandedHex.substr(2, 2), 16);
+  const b = parseInt(expandedHex.substr(4, 2), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+// Helper function for RGB colors
+function withOpacityRgb(rgb: string, opacity: number): string {
+  const match = rgb.match(/^rgb\((\d+), (\d+), (\d+)\)$/);
+  if (!match) {
+    throw new Error('Invalid RGB color format');
+  }
+
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+// Helper function for RGBA colors
+function withOpacityRgba(rgba: string, opacity: number): string {
+  const match = rgba.match(/^rgba\((\d+), (\d+), (\d+), ([0-1]?(?:\.\d+)?)\)$/);
+  if (!match) {
+    throw new Error('Invalid RGBA color format');
+  }
+
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+// Helper function for HSL colors with opacity
+function withOpacityHsl(hsl: string, opacity: number): string {
+  // Updated regex to handle space-separated HSL format with optional decimals
+  const match = hsl.match(/^hsl\((\d+(\.\d+)?)(?:\s+)(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)%\)$/);
+
+  if (!match) {
+    throw new Error('Invalid HSL color format');
+  }
+
+  const h = match[1]; // Hue (can be an integer or decimal)
+  const s = match[3]; // Saturation (can be an integer or decimal)
+  const l = match[5]; // Lightness (can be an integer or decimal)
+
+  return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
+}
+
+// Helper function for HSLA colors
+function withOpacityHsla(hsla: string, opacity: number): string {
+  const match = hsla.match(/^hsla\((\d+), (\d+)%?, (\d+)%?, ([0-1]?(?:\.\d+)?)\)$/);
+  if (!match) {
+    throw new Error('Invalid HSLA color format');
+  }
+
+  const h = match[1];
+  const s = match[2];
+  const l = match[3];
+
+  return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
+}
+
+// Helper function for named colors (basic implementation)
+function isNamedColor(color: string): boolean {
+  const namedColors = new Set([
+    'red',
+    'green',
+    'blue',
+    'yellow',
+    'black',
+    'white',
+    'gray',
+    'orange',
+    'purple',
+    'brown',
+    'pink',
+    'cyan',
+    'magenta',
+    'lime',
+    'teal',
+    'indigo',
+    'violet',
+    'gold',
+    'silver',
+  ]);
+  return namedColors.has(color.toLowerCase());
+}
+
+// Helper function for named color opacity
+function withOpacityNamedColor(color: string, opacity: number): string {
+  return `rgba(${namedColorToRgb(color)}, ${opacity})`;
+}
+
+// Converts a named color to RGB (simplified, basic colors only)
+function namedColorToRgb(color: string): string {
+  const colors: { [key: string]: string } = {
+    red: '255, 0, 0',
+    green: '0, 255, 0',
+    blue: '0, 0, 255',
+    yellow: '255, 255, 0',
+    black: '0, 0, 0',
+    white: '255, 255, 255',
+    gray: '128, 128, 128',
+    orange: '255, 165, 0',
+    purple: '128, 0, 128',
+    brown: '165, 42, 42',
+    pink: '255, 192, 203',
+    cyan: '0, 255, 255',
+    magenta: '255, 0, 255',
+    lime: '0, 255, 0',
+    teal: '0, 128, 128',
+    indigo: '75, 0, 130',
+    violet: '238, 130, 238',
+    gold: '255, 215, 0',
+    silver: '192, 192, 192',
+  };
+  return colors[color.toLowerCase()] || '0, 0, 0'; // default to black if color is unknown
+}

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

@@ -0,0 +1,73 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  import './global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import './unistyles';
+import { DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { useUnistyles } from 'react-native-unistyles';
+import { useMemo } from 'react';
+<% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %>
+import { DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
+import { useMemo } from 'react';
+<% } %>
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import './translation';
+<% } %>
+import "react-native-gesture-handler";
+
+<% if (props.analyticsPackage?.name === "vexo-analytics") { %>
+  import { vexo } from 'vexo-analytics';
+
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY || process.env.VEXO_API_KEY;
+  if (vexoApiKey) {
+    vexo(vexoApiKey); // eslint-disable-line
+  }
+
+  import Navigation from "./navigation"; // eslint-disable-line
+<% } else { %>
+  import Navigation from "./navigation";
+<% } %>
+
+export default function App() {
+	<% if (props.stylingPackage?.name === "unistyles")  { %> 
+    const { theme, rt } = useUnistyles();
+
+    const baseTheme = rt.colorScheme === 'dark' ? DarkTheme : DefaultTheme;
+    const mergedTheme = useMemo(() => ({
+      ...baseTheme,
+      colors: {
+        ...baseTheme.colors,
+        background: theme.colors.background,
+        text: theme.colors.typography,
+        primary: theme.colors.astral,
+        secondary: theme.colors.cornflowerBlue,
+        border: theme.colors.limedSpruce,
+        card: theme.colors.background,
+        notification: theme.colors.astral,
+      },
+    }), [baseTheme, theme.colors.background, theme.colors.typography, theme.colors.astral, theme.colors.cornflowerBlue, theme.colors.limedSpruce]);
+
+    return <Navigation theme={mergedTheme} />;
+	<% } else if (props.stylingPackage?.name === "nativewind") { %> 
+		const colorScheme = useColorScheme();
+		const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);
+
+		return (
+			<SafeAreaProvider>
+				<Navigation theme={theme} />
+			</SafeAreaProvider>
+		);
+	<% } else if (props.stylingPackage?.name === "stylesheet") { %> 
+		const colorScheme = useColorScheme();
+		const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);
+
+		return <Navigation theme={theme} />;
+	<% } else { %> 
+		return <Navigation />;
+	<% } %>
+}

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

@@ -0,0 +1,31 @@
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { HeaderButton } from 'components/HeaderButton';
+import TabNavigator from './tab-navigator';
+import Home from '../screens/home';
+
+
+const Drawer = createDrawerNavigator({
+  screens: {
+    Home: {
+      screen: Home,
+      options: {
+        drawerIcon: ({ size, color }) => (
+          <Ionicons name="home-outline" size={size} color={color} />
+        ),
+      }
+    },
+    Tabs: {
+      screen: TabNavigator,
+      options: ({ navigation })=> ({
+          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+      })
+    },
+  }
+});
+
+export default Drawer;
+

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

@@ -0,0 +1,108 @@
+<% if (props.navigationPackage?.options.type === 'stack') { %>
+	import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
+	import { createStackNavigator } from '@react-navigation/stack';
+	import Overview from "../screens/overview";
+	import Details from "../screens/details";
+  import { BackButton } from '../components/BackButton';
+
+	const Stack = createStackNavigator({
+    screens: {
+      Overview: {
+        screen: Overview,
+      },
+      Details: {
+        screen: Details,
+        options: ({ navigation }) => ({
+          headerLeft: () => <BackButton onPress={navigation.goBack} />,
+        })
+      },
+    }
+  });
+
+  type RootNavigatorParamList = StaticParamList<typeof Stack>;
+
+  declare global {
+    namespace ReactNavigation {
+      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+      interface RootParamList extends RootNavigatorParamList {}
+    }
+  }
+
+  const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
+
+<% } else if (props.navigationPackage?.options.type === 'tabs') { %>
+  import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
+	import { createStackNavigator } from "@react-navigation/stack";
+	import Modal from "../screens/modal";
+	import TabNavigator from "./tab-navigator";
+
+
+	const Stack = createStackNavigator({
+    screens: {
+      TabNavigator: {
+        screen: TabNavigator,
+        options: {
+          headerShown: false,
+        },
+      },
+      Modal: {
+        screen: Modal,
+        options: {
+          presentation: "modal",
+          headerLeft: () => null,
+        },
+      },
+    }
+  });
+
+  type RootNavigatorParamList = StaticParamList<typeof Stack>;
+
+  declare global {
+    namespace ReactNavigation {
+      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+      interface RootParamList extends RootNavigatorParamList {}
+    }
+  }
+
+  const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
+
+<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+	  import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
+		import { createStackNavigator } from '@react-navigation/stack';
+		import Modal from "../screens/modal";
+		import DrawerNavigator from "./drawer-navigator";
+
+	
+    const Stack = createStackNavigator({
+      screens: {
+        DrawerNavigator: {
+          screen: DrawerNavigator,
+          options: {
+            headerShown: false,
+          },
+        },
+        Modal: {
+          screen: Modal,
+          options: {
+            presentation: "modal",
+            headerLeft: () => null,
+          },
+        },
+      }
+    });
+
+    type RootNavigatorParamList = StaticParamList<typeof Stack>;
+
+    declare global {
+      namespace ReactNavigation {
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        interface RootParamList extends RootNavigatorParamList {}
+      }
+    }
+
+    const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
+	
+<% } %>