create-expo-stack 2.21.3 → 2.23.0

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

@@ -3,17 +3,20 @@
   "compilerOptions": {
     <% if (props.flags.importAlias) { %>
     "strict": true,
+    <% if (props.navigationPackage?.name !== 'expo-router') { %>
+    "ignoreDeprecations": "6.0",
     "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/*"]
+        "@/*": ["./src/*"]
         <% } else { %>
-        "<%= props.flags.importAlias %>": ["src/*"]
+        "<%= props.flags.importAlias %>": ["./src/*"]
         <% } %>
       <% } %>
     }
@@ -28,9 +31,11 @@
     ".expo/types/**/*.ts",
     <% if (props.stylingPackage?.name === 'nativewind' || props.stylingPackage?.name === 'nativewindui') { %>
       "expo-env.d.ts",
+      "css-env.d.ts",
       "nativewind-env.d.ts"
     <% } else { %>
-      "expo-env.d.ts"
+      "expo-env.d.ts",
+      "css-env.d.ts"
     <% } %>
   ]
   <% } else { %>

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

@@ -19,9 +19,11 @@ import { Stack } from 'expo-router';
 <% } %>
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
-  import { vexo } from 'vexo-analytics';
-
-  vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY;
+  if (vexoApiKey) {
+    const { vexo } = require('vexo-analytics');
+    vexo(vexoApiKey);
+  }
 <% } %>
 
 export const unstable_settings = {

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

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 export default function Modal() {

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

@@ -12,9 +12,11 @@
 	import { Stack } from "expo-router";
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
-  import { vexo } from 'vexo-analytics';
-
-  vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY;
+  if (vexoApiKey) {
+    const { vexo } = require('vexo-analytics');
+    vexo(vexoApiKey);
+  }
 <% } %>
 
 export default function Layout() {

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

@@ -13,7 +13,7 @@ import { Container } from '@/components/Container';
 import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 export default function Home() {

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

@@ -13,9 +13,11 @@
 	import { Stack } from "expo-router";
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
-  import { vexo } from 'vexo-analytics';
-
-  vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY;
+  if (vexoApiKey) {
+    const { vexo } = require('vexo-analytics');
+    vexo(vexoApiKey);
+  }
 <% } %>
 
 export const unstable_settings = {

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

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 export default function Modal() {

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

@@ -1,6 +1,6 @@
-import { init18n } from 'core/i18n/init';
-import en from 'translation/en.json';
-import fr from 'translation/fr.json';
+import { init18n } from '../core/i18n/init';
+import en from './en.json';
+import fr from './fr.json';
 
 export const resources = {
   en: {

package/build/templates/packages/nativewindui/components/Container.tsx.ejs

@@ -1,4 +1,5 @@
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export const Container = ({ children }: { children: React.ReactNode }) => {
   return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;

package/build/templates/packages/nativewindui/components/TabBarIcon.tsx.ejs

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

package/build/templates/packages/nativewindui/components/nativewindui/Icon/Icon.ios.tsx.ejs

@@ -1,4 +1,5 @@
 import { SymbolView } from 'expo-symbols';
+import type { ComponentProps } from 'react';
 
 import type { IconProps } from './types';
 
@@ -14,14 +15,16 @@ function Icon({
   ...props
 }: IconProps) {
   const { colors } = useColorScheme();
+  const symbolName = (name ?? 'questionmark') as ComponentProps<typeof SymbolView>['name'];
+
   return (
     <SymbolView
-      name={name ?? 'questionmark'}
+      {...props}
+      {...sfSymbol}
+      name={symbolName}
       tintColor={rgbaToHex(color ?? colors.foreground)}
       size={size}
       resizeMode="scaleAspectFit"
-      {...props}
-      {...sfSymbol}
     />
   );
 }
@@ -49,4 +52,4 @@ function rgbaToHex(color: string): string {
   const toHex = (n: number) => n.toString(16).padStart(2, '0');
 
   return `#${toHex(r)}${toHex(g)}${toHex(b)}${a < 255 ? toHex(a) : ''}`;
-}
+}

package/build/templates/packages/nativewindui/components/nativewindui/Icon/types.ts.ejs

@@ -5,14 +5,15 @@ import type { IconMapper } from 'rn-icon-mapper';
 
 type MaterialCommunityIconsProps = React.ComponentProps<typeof MaterialCommunityIcons>;
 type MaterialIconsProps = React.ComponentProps<typeof MaterialIcons>;
+type SymbolIconProps = Omit<SymbolViewProps, 'name'> & { name: string };
 
-type Style = SymbolViewProps['style'] &
+type Style = SymbolIconProps['style'] &
   MaterialIconsProps['style'] &
   MaterialCommunityIconsProps['style'];
 
-type IconProps = IconMapper<SymbolViewProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
+type IconProps = IconMapper<SymbolIconProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
   style?: Style;
   className?: string;
 };
 
-export type { IconProps };
+export type { IconProps };

package/build/templates/packages/nativewindui/drawer/app/(drawer)/index.tsx.ejs

@@ -1,5 +1,5 @@
 import { Stack } from 'expo-router';
-import { useHeaderHeight } from '@react-navigation/elements';
+import { useHeaderHeight } from 'expo-router/react-navigation';
 import { FlashList } from '@shopify/flash-list';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
@@ -27,12 +27,12 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { useActionSheet } from '@expo/react-native-action-sheet';
 <% } %>
-import { Icon } from '@roninoss/icons';
 <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
 import * as StoreReview from 'expo-store-review';
 <% } %>
 
 import { Container } from '@/components/Container';
+import { Icon } from '@/components/nativewindui/Icon';
 <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
 import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';
 <% } %>
@@ -59,6 +59,7 @@ import { Text } from '@/components/nativewindui/Text';
 import { Toggle } from '@/components/nativewindui/Toggle';
 <% } %>
 import { useColorScheme } from '@/lib/useColorScheme';
+import { useHeaderSearchBar } from '@/lib/useHeaderSearchBar';
 
 export default function Home() {
   const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
@@ -75,7 +76,6 @@ export default function Home() {
           contentInsetAdjustmentBehavior="automatic"
           keyboardShouldPersistTaps="handled"
           data={data}
-          estimatedItemSize={200}
           contentContainerClassName="py-4 android:pb-12"
           extraData={searchValue}
           keyExtractor={keyExtractor}
@@ -112,7 +112,7 @@ function ListEmptyComponent() {
 
   return (
     <View style={{ height }} className="flex-1 items-center justify-center gap-1 px-12">
-      <Icon name="file-plus-outline" size={42} color={colors.grey} />
+      <Icon name="doc.badge.plus" size={42} color={colors.grey} />
         <Text variant='title3' className='pb-1 text-center font-semibold'>
           No Components Installed
         </Text>
@@ -226,8 +226,8 @@ const COMPONENTS: ComponentItem[] = [
           <DatePicker
             value={date}
             mode='datetime'
-            onChange={(ev) => {
-              setDate(new Date(ev.nativeEvent.timestamp));
+            onValueChange={(_event, selectedDate) => {
+              setDate(selectedDate);
             }}
           />
         </View>
@@ -532,4 +532,4 @@ const COMPONENTS: ComponentItem[] = [
     },
   },
   <% } %>
-];
+];

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

@@ -1,6 +1,6 @@
 import '../global.css';
 import 'expo-dev-client';
-import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { ThemeProvider as NavThemeProvider } from 'expo-router/react-navigation';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 <% } %>
@@ -13,8 +13,8 @@ import { StatusBar } from 'expo-status-bar';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 <% } %>
 
-import { ThemeToggle } from '@/components/ThemeToggle';
-import { useColorScheme, useInitialAndroidBarSync } from '@/lib/useColorScheme';
+import { ThemeToggle } from '@/components/nativewindui/ThemeToggle';
+import { useColorScheme } from '@/lib/useColorScheme';
 import { NAV_THEME } from '@/theme';
 
 export {
@@ -23,7 +23,6 @@ export {
 } from 'expo-router';
 
 export default function RootLayout() {
-  useInitialAndroidBarSync();
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
   return (
@@ -72,4 +71,4 @@ const MODAL_OPTIONS = {
   animation: 'fade_from_bottom', // for android
   title: 'Settings',
   headerRight: () => <ThemeToggle />,
-} as const;
+} as const;

package/build/templates/packages/nativewindui/drawer/app/modal.tsx.ejs

@@ -1,7 +1,7 @@
-import { Icon } from '@roninoss/icons';
 import { StatusBar } from 'expo-status-bar';
 import { Linking, Platform, View } from 'react-native';
 
+import { Icon } from '@/components/nativewindui/Icon';
 import { Text } from '@/components/nativewindui/Text';
 import { useColorScheme } from '@/lib/useColorScheme';
 
@@ -13,7 +13,7 @@ export default function ModalScreen() {
         style={Platform.OS === 'ios' ? 'light' : colorScheme === 'dark' ? 'light' : 'dark'}
       />
       <View className="flex-1 items-center justify-center gap-1 px-12">
-        <Icon name="file-plus-outline" size={42} color={colors.grey} />
+        <Icon name="doc.badge.plus" size={42} color={colors.grey} />
         <Text variant="title3" className="pb-1 text-center font-semibold">
           NativewindUI
         </Text>

package/build/templates/packages/nativewindui/lib/useHeaderSearchBar.tsx.ejs

@@ -0,0 +1,33 @@
+import { useNavigation } from 'expo-router/react-navigation';
+import * as React from 'react';
+import type { SearchBarProps } from 'react-native-screens';
+
+import { useColorScheme } from './useColorScheme';
+
+function useHeaderSearchBar(props: SearchBarProps = {}) {
+  const { colorScheme, colors } = useColorScheme();
+  const navigation = useNavigation();
+  const [search, setSearch] = React.useState('');
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerSearchBarOptions: {
+        placeholder: 'Search...',
+        textColor: colors.foreground,
+        tintColor: colors.primary,
+        headerIconColor: colors.foreground,
+        hintTextColor: colors.grey,
+        hideWhenScrolling: false,
+        onChangeText(event) {
+          setSearch(event.nativeEvent.text);
+        },
+        ...props,
+      } satisfies SearchBarProps,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation, colorScheme]);
+
+  return search;
+}
+
+export { useHeaderSearchBar };

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

@@ -3,7 +3,7 @@ import '@/global.css';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 <% } %>
-import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { ThemeProvider as NavThemeProvider } from 'expo-router/react-navigation';
 import * as Device from 'expo-device';
 import { Link, Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';

package/build/templates/packages/nativewindui/stack/app/index.tsx.ejs

@@ -1,4 +1,4 @@
-import { useHeaderHeight } from '@react-navigation/elements';
+import { useHeaderHeight } from 'expo-router/react-navigation';
 import { FlashList } from '@shopify/flash-list';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
@@ -21,11 +21,9 @@ import {
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { SearchBarProps } from 'react-native-screens';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { useActionSheet } from '@expo/react-native-action-sheet';
 <% } %>
-import { useNavigation } from '@react-navigation/native';
 <% if (props.stylingPackage?.options.selectedComponents.includes('button')) { %>
 import * as Haptics from 'expo-haptics';
 <% } else { %>
@@ -64,6 +62,7 @@ import { Text } from '@/components/nativewindui/Text';
 <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
 import { Toggle } from '@/components/nativewindui/Toggle';
 <% } %>
+import { useHeaderSearchBar } from '@/lib/useHeaderSearchBar';
 import { useColorScheme } from '@/lib/useColorScheme';
 import { COLORS } from '@/theme/colors';
 
@@ -95,32 +94,6 @@ export default function Screen() {
   );
 }
 
-function useHeaderSearchBar(props: SearchBarProps = {}) {
-  const { colorScheme, colors } = useColorScheme();
-  const navigation = useNavigation();
-  const [search, setSearch] = React.useState('');
-
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerSearchBarOptions: {
-        placeholder: 'Search...',
-        textColor: colors.foreground,
-        tintColor: colors.primary,
-        headerIconColor: colors.foreground,
-        hintTextColor: colors.grey,
-        hideWhenScrolling: false,
-        onChangeText(ev) {
-          setSearch(ev.nativeEvent.text);
-        },
-        ...props,
-      } satisfies SearchBarProps,
-    });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigation, colorScheme]);
-  
-  return search;
-}
-
 function ListEmptyComponent() {
   const insets = useSafeAreaInsets();
   const dimensions = useWindowDimensions();
@@ -315,16 +288,13 @@ const COMPONENTS: ComponentItem[] = [
     name: 'Progress Indicator',
     component: function ProgressIndicatorExample() {
       const [progress, setProgress] = React.useState(13);
+      React.useEffect(() => {
+        const intervalId = setInterval(() => {
+          setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
+        }, 1000);
 
-       React.useEffect(() => {
-        let id: ReturnType<typeof setInterval> | null = null;
-        if (!id) {
-          id = setInterval(() => {
-            setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
-          }, 1000);
-        }
         return () => {
-          if (id) clearInterval(id);
+          clearInterval(intervalId);
         };
       }, []);
       return (
@@ -378,8 +348,8 @@ const COMPONENTS: ComponentItem[] = [
           <DatePicker
             value={date}
             mode='datetime'
-            onChange={(ev) => {
-              setDate(new Date(ev.nativeEvent.timestamp));
+            onValueChange={(_event, selectedDate) => {
+              setDate(selectedDate);
             }}
           />
         </View>

package/build/templates/packages/nativewindui/tabs/app/(tabs)/index.tsx.ejs

@@ -1,5 +1,5 @@
 import { Stack } from 'expo-router';
-import { useHeaderHeight } from '@react-navigation/elements';
+import { useHeaderHeight } from 'expo-router/react-navigation';
 import { FlashList } from '@shopify/flash-list';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
@@ -27,12 +27,12 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { useActionSheet } from '@expo/react-native-action-sheet';
 <% } %>
-import { Icon } from '@roninoss/icons';
 <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
 import * as StoreReview from 'expo-store-review';
 <% } %>
 
 import { Container } from '@/components/Container';
+import { Icon } from '@/components/nativewindui/Icon';
 <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
 import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';
 <% } %>
@@ -76,7 +76,6 @@ export default function Home() {
           contentInsetAdjustmentBehavior="automatic"
           keyboardShouldPersistTaps="handled"
           data={data}
-          estimatedItemSize={200}
           contentContainerClassName="py-4 android:pb-12"
           extraData={searchValue}
           keyExtractor={keyExtractor}
@@ -113,7 +112,7 @@ function ListEmptyComponent() {
 
   return (
     <View style={{ height }} className="flex-1 items-center justify-center gap-1 px-12">
-      <Icon name="file-plus-outline" size={42} color={colors.grey} />
+      <Icon name="doc.badge.plus" size={42} color={colors.grey} />
         <Text variant='title3' className='pb-1 text-center font-semibold'>
           No Components Installed
         </Text>
@@ -227,8 +226,8 @@ const COMPONENTS: ComponentItem[] = [
           <DatePicker
             value={date}
             mode='datetime'
-            onChange={(ev) => {
-              setDate(new Date(ev.nativeEvent.timestamp));
+            onValueChange={(_event, selectedDate) => {
+              setDate(selectedDate);
             }}
           />
         </View>
@@ -263,15 +262,13 @@ const COMPONENTS: ComponentItem[] = [
     name: 'Progress Indicator',
     component: function ProgressIndicatorExample() {
       const [progress, setProgress] = React.useState(13);
-      let id: ReturnType<typeof setInterval> | null = null;
       React.useEffect(() => {
-        if (!id) {
-          id = setInterval(() => {
-            setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
-          }, 1000);
-        }
+        const intervalId = setInterval(() => {
+          setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
+        }, 1000);
+
         return () => {
-          if (id) clearInterval(id);
+          clearInterval(intervalId);
         };
       }, []);
       return (

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

@@ -1,23 +1,20 @@
 import '../global.css';
 import 'expo-dev-client';
-import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
-import { Icon } from '@roninoss/icons';
+import { ThemeProvider as NavThemeProvider } from 'expo-router/react-navigation';
 <% 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 { 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 { ThemeToggle } from '@/components/nativewindui/ThemeToggle';
+import { useColorScheme } from '@/lib/useColorScheme';
 import { NAV_THEME } from '@/theme';
 
 export {
@@ -26,7 +23,6 @@ export {
 } from 'expo-router';
 
 export default function RootLayout() {
-  useInitialAndroidBarSync();
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
   return (
@@ -75,4 +71,4 @@ const MODAL_OPTIONS = {
   animation: 'fade_from_bottom', // for android
   title: 'Settings',
   headerRight: () => <ThemeToggle />,
-} as const;
+} as const;

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

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 export default function Modal() {

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

@@ -1,4 +1,4 @@
-import { Theme, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { Theme, DefaultTheme, DarkTheme } from 'expo-router/react-navigation';
 
 import { COLORS } from './colors';
 

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

@@ -21,9 +21,11 @@ import { useMemo } from 'react';
 import "react-native-gesture-handler";
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
-  import { vexo } from 'vexo-analytics';
-
-  vexo(process.env.VEXO_API_KEY); // eslint-disable-line
+  const vexoApiKey = process.env.EXPO_PUBLIC_VEXO_API_KEY;
+  if (vexoApiKey) {
+    const { vexo } = require('vexo-analytics');
+    vexo(vexoApiKey); // eslint-disable-line
+  }
 
   import Navigation from "./navigation"; // eslint-disable-line
 <% } else { %>

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

@@ -3,7 +3,7 @@ import { StatusBar } from 'expo-status-bar';
 import { Platform } from 'react-native';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 export default function Modal() {

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

@@ -8,7 +8,7 @@ import { StyleSheet, View } from 'react-native';
 <% } %>
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
+  import { InternalizationExample } from '../components/InternalizationExample';
 <% } %>
 
 import { Button } from '../components/Button';

package/build/types/types.d.ts

@@ -7,7 +7,7 @@ export interface CliFlags {
     eas: boolean;
     publish: boolean;
 }
-export declare const availablePackages: readonly ["@react-navigation/drawer", "expo-router", "expoRouter", "firebase", "nativewind", "nativewindui", "nwui", "react-navigation", "reactNavigation", "react-native-gesture-handler", "react-native-reanimated", "reactnavigation", "stylesheet", "supabase", "unistyles", "i18next", "zustand", "vexo-analytics"];
+export declare const availablePackages: readonly ["@react-navigation/drawer", "expo-router", "expoRouter", "firebase", "nativewind", "nativewindui", "nwui", "react-navigation", "reactNavigation", "gesture-handler", "gestureHandler", "react-native-gesture-handler", "react-native-keyboard-controller", "react-native-screens", "react-native-svg", "keyboard-controller", "keyboardController", "reactnavigation", "screens", "stylesheet", "supabase", "svg", "unistyles", "i18next", "zustand", "vexo-analytics"];
 export type AuthenticationSelect = 'supabase' | 'firebase' | undefined;
 export type NavigationSelect = 'react-navigation' | 'expo-router' | undefined;
 export type NavigationTypes = 'stack' | 'tabs' | 'drawer + tabs' | undefined;
@@ -16,10 +16,11 @@ export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun';
 export type StateManagementSelect = 'zustand' | undefined;
 export type Internalization = 'i18next';
 export type Analytics = 'vexo-analytics';
+export type SoftwareMansionSelect = 'react-native-gesture-handler' | 'react-native-keyboard-controller' | 'react-native-screens' | 'react-native-svg';
 export type SelectedComponents = 'action-sheet' | 'activity-indicator' | 'activity-view' | 'avatar' | 'button' | 'date-picker' | 'picker' | 'progress-indicator' | 'ratings-indicator' | 'slider' | 'text' | 'toggle';
 export type AvailablePackages = {
     name: (typeof availablePackages)[number];
-    type: 'navigation' | 'styling' | 'authentication' | 'internationalization' | 'state-management' | 'analytics';
+    type: 'navigation' | 'styling' | 'authentication' | 'internationalization' | 'state-management' | 'analytics' | 'software-mansion';
     options?: {
         selectedComponents?: SelectedComponents[];
         type?: NavigationTypes;

package/build/types/utilities/generateProjectFiles.d.ts

@@ -1,3 +1,5 @@
 import { Toolbox } from 'gluegun/build/types/domain/toolbox';
 import { AvailablePackages, CliResults, PackageManager } from '../types';
 export declare function generateProjectFiles(authenticationPackage: AvailablePackages | undefined, analyticsPackage: AvailablePackages | undefined, cliResults: CliResults, files: string[], formattedFiles: any[], navigationPackage: AvailablePackages | undefined, packageManager: PackageManager, stylingPackage: AvailablePackages | undefined, toolbox: Toolbox, internalizationPackage: AvailablePackages | undefined, stateManagementPackage: AvailablePackages | undefined): any[];
+export declare function toExpoSlug(projectName: string): string;
+export declare function toExpoScheme(projectName: string): string;