create-expo-stack 2.20.0-next.ff2bed4 → 2.21.0-next.0cb36d0

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

@@ -6,64 +6,32 @@ import { Link, Stack } from 'expo-router';
   import { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack } from "tamagui";
-	import { Container, Main, Subtitle, Title } from "../tamagui.config";
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { Box, Text, makeStyles } from 'theme';
 <% } %>
 
 export default function NotFoundScreen() {
-<% if (props.stylingPackage?.name === "restyle") { %>
-  const styles = useStyles();
-<% } %>
 
   return (
-      <% if (props.stylingPackage?.name === "nativewind") {%>
-        <>
-          <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 if (props.stylingPackage?.name === "tamagui") {%>
-        <Container>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Main>
-            <YStack>
-              <Title>{"This screen doesn't exist."}</Title>
-              <Link href="/">
-                <Subtitle>Go to home screen!</Subtitle>
-              </Link>
-            </YStack>
-          </Main>
-        </Container>
-      <% } else if (props.stylingPackage?.name === "restyle") {%>
-        <>
-          <Stack.Screen options={{ title: 'Oops!' }} />
-          <Box flex={1} justifyContent="center" alignItems="center" padding="ml_24">
-            <Text variant="title">{"This screen doesn't exist."}</Text>
-            <Link href="/" style={styles.link}>
-              <Text variant="body" color="blue">
-                Go to home screen!
-              </Text>
-            </Link>
-          </Box>
-        </>
-      <% } 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") {%>
+      <>
+        <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>
+      </>
+    <% } %>
   );
 }
 
@@ -116,11 +84,4 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  const useStyles = makeStyles((theme) => ({
-    link: {
-      marginTop: theme.spacing.m_16,
-      paddingVertical: theme.spacing.m_16,
-    },
-  }));
 <% } %>

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

@@ -9,23 +9,7 @@
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import '../translation';
 <% } %>
-
-<% if (props.stylingPackage?.name === "tamagui") { %>
-	import React, { useEffect } from "react";
-	import { TamaguiProvider } from 'tamagui'
-	import { SplashScreen, Stack } from "expo-router";
-	import { useFonts } from "expo-font";
-
-	import config from '../tamagui.config'
-
-	SplashScreen.preventAutoHideAsync();
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { ThemeProvider } from '@shopify/restyle';
-  import { Stack } from 'expo-router';
-  import { theme } from 'theme';
-<% } else { %>
 	import { Stack } from "expo-router";
-<% } %>
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
   import { vexo } from 'vexo-analytics';
@@ -39,30 +23,11 @@ export const unstable_settings = {
 };
 
 export default function RootLayout() {
-  	<% if (props.stylingPackage?.name === "tamagui") { %>
-    	const [loaded] = useFonts({
-      		Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
-      		InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
-    	});
-
-    	useEffect(() => {
-      		if (loaded) {
-        		SplashScreen.hideAsync();
-      		}
-    	}, [loaded]);
-
-    	if (!loaded) return null;
-  	<% } %>
-    <% if (props.stylingPackage?.name === "unistyles") { %>
-        const { theme } = useUnistyles();
-    <% } %>
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useUnistyles();
+  <% } %>
 
-  	return (
-    	<% if (props.stylingPackage?.name === "tamagui") { %>
-    		<TamaguiProvider config={config}>
-    	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    		<ThemeProvider theme={theme}>
-    	<% } %>
+  return (
         <% if (props.stylingPackage?.name === "unistyles") { %>
             <Stack
                 screenOptions={{
@@ -78,13 +43,8 @@ export default function RootLayout() {
         <% } else  { %>
             <Stack>
         <% } %>
-			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-			<Stack.Screen name="modal" options={{ presentation: "modal" }} />
-		</Stack>
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			</TamaguiProvider>
-		<% } else if (props.stylingPackage?.name === "restyle") { %>
-			</ThemeProvider>
-		<% } %>
-  	);
+		<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+		<Stack.Screen name="modal" options={{ presentation: "modal" }} />
+	</Stack>
+  );
 }

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

@@ -1,14 +1,14 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  const { withNativeWind } = require("nativewind/metro");
+  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" });
+  module.exports = withNativewind(config);
 <% } else { %>
   module.exports = config;
 <% } %>

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

@@ -16,6 +16,6 @@ export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps
 Button.displayName = 'Button';
 
 const styles = {
-  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4',
+  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4 w-full',
   buttonText: 'text-white text-lg font-semibold text-center',
 };

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

@@ -19,8 +19,9 @@ export const ScreenContent = ({ title, path, children} : ScreenContentProps) =>
     </View>
   );
 };
+
 const styles = {
-  container: `items-center flex-1 justify-center bg-white`,
-  separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+  container: `flex flex-1 px-4 bg-white items-center justify-center`,
+  separator: `h-px w-[300px] bg-gray-200 my-7`,
   title: `text-xl font-bold`,
 };

package/build/templates/packages/nativewind/global.css

@@ -1,2 +1,5 @@
-@import 'tailwindcss';
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+
 @import 'nativewind/theme';

package/build/templates/packages/nativewind/postcss.config.mjs

@@ -1,5 +1,5 @@
 export default {
   plugins: {
-    '@tailwindcss/postcss': {}
-  }
+    '@tailwindcss/postcss': {},
+  },
 };

package/build/templates/packages/nativewind/prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+
+  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  tailwindAttributes: ['className'],
+};

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

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 24,
+    backgroundColor: 'white',
   },
 });
 

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

@@ -1,6 +1,6 @@
 import { StyleSheet, View } from 'react-native';
 
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
 import { useTranslation } from 'react-i18next';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 
 import EditScreenInfo from './EditScreenInfo';
 

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

@@ -0,0 +1,52 @@
+import { SymbolView } from 'expo-symbols';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  materialCommunityIcon: _materialCommunityIcon,
+  materialIcon: _materialIcon,
+  sfSymbol,
+  name,
+  color,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  return (
+    <SymbolView
+      name={name ?? 'questionmark'}
+      tintColor={rgbaToHex(color ?? colors.foreground)}
+      size={size}
+      resizeMode="scaleAspectFit"
+      {...props}
+      {...sfSymbol}
+    />
+  );
+}
+
+export { Icon };
+
+// TODO: seems like the need to convert rgba to hex color is a bug in expo-symbols, accordion to the docs, it should accept a hex color, but it doesn't.
+
+function rgbaToHex(color: string): string {
+  if (!color) return 'black';
+  const rgbaRegex =
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i;
+  const match = color.match(rgbaRegex);
+
+  if (!match) {
+    return color;
+  }
+
+  const [, rStr, gStr, bStr, aStr] = match;
+  const r = Math.min(255, parseInt(rStr));
+  const g = Math.min(255, parseInt(gStr));
+  const b = Math.min(255, parseInt(bStr));
+  const a = aStr !== undefined ? Math.round(parseFloat(aStr) * 255) : 255;
+
+  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/Icon.tsx.ejs

@@ -0,0 +1,58 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import {
+  SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS,
+  SF_SYMBOLS_TO_MATERIAL_ICONS,
+} from 'rn-icon-mapper';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  name,
+  materialCommunityIcon,
+  materialIcon,
+  sfSymbol: _sfSymbol,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  const defaultColor = colors.foreground;
+
+  if (materialCommunityIcon) {
+    return (
+      <MaterialCommunityIcons
+        size={size}
+        color={defaultColor}
+        {...props}
+        {...materialCommunityIcon}
+      />
+    );
+  }
+  if (materialIcon) {
+    return <MaterialIcons size={size} color={defaultColor} {...props} {...materialIcon} />;
+  }
+  const materialCommunityIconName =
+    SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS[
+      name as keyof typeof SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS
+    ];
+  if (materialCommunityIconName) {
+    return (
+      <MaterialCommunityIcons
+        name={materialCommunityIconName}
+        size={size}
+        color={defaultColor}
+        {...props}
+      />
+    );
+  }
+  const materialIconName =
+    SF_SYMBOLS_TO_MATERIAL_ICONS[name as keyof typeof SF_SYMBOLS_TO_MATERIAL_ICONS];
+  if (materialIconName) {
+    return <MaterialIcons name={materialIconName} size={size} color={defaultColor} {...props} />;
+  }
+  return <MaterialCommunityIcons name="help" size={size} color={defaultColor} {...props} />;
+}
+
+export { Icon };

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

@@ -0,0 +1,16 @@
+import { cssInterop } from 'nativewind';
+
+import { Icon } from './Icon';
+
+cssInterop(Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      color: 'color',
+      height: 'size',
+      width: 'size',
+    },
+  },
+});
+
+export { Icon };

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

@@ -0,0 +1,18 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import type MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import type { SymbolViewProps } from 'expo-symbols';
+import type { IconMapper } from 'rn-icon-mapper';
+
+type MaterialCommunityIconsProps = React.ComponentProps<typeof MaterialCommunityIcons>;
+type MaterialIconsProps = React.ComponentProps<typeof MaterialIcons>;
+
+type Style = SymbolViewProps['style'] &
+  MaterialIconsProps['style'] &
+  MaterialCommunityIconsProps['style'];
+
+type IconProps = IconMapper<SymbolViewProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
+  style?: Style;
+  className?: string;
+};
+
+export type { IconProps };

package/build/templates/packages/nativewindui/components/{ThemeToggle.tsx.ejs → nativewindui/ThemeToggle.tsx.ejs}

@@ -1,10 +1,10 @@
-import { Icon } from '@roninoss/icons';
 import { Pressable, View } from 'react-native';
 import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
 
-import { cn } from '~/lib/cn';
-import { useColorScheme } from '~/lib/useColorScheme';
-import { COLORS } from '~/theme/colors';
+import { Icon } from '@/components/nativewindui/Icon';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
 
 export function ThemeToggle() {
   const { colorScheme, toggleColorScheme } = useColorScheme();
@@ -14,22 +14,20 @@ export function ThemeToggle() {
         className="items-center justify-center"
         key={`toggle-${colorScheme}`}
         entering={ZoomInRotate}>
-        <Pressable
-          onPress={toggleColorScheme}
-          className="opacity-80">
+        <Pressable onPress={toggleColorScheme} className="opacity-80">
           {colorScheme === 'dark'
             ? ({ pressed }) => (
                 <View className={cn('px-0.5', pressed && 'opacity-50')}>
-                  <Icon namingScheme="sfSymbol" name="moon.stars" color={COLORS.white} />
+                  <Icon name="moon.stars" color={COLORS.white} />
                 </View>
               )
             : ({ pressed }) => (
                 <View className={cn('px-0.5', pressed && 'opacity-50')}>
-                  <Icon namingScheme="sfSymbol" name="sun.min" color={COLORS.black} />
+                  <Icon name="sun.min" color={COLORS.black} />
                 </View>
               )}
         </Pressable>
       </Animated.View>
     </LayoutAnimationConfig>
   );
-}
+}

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

@@ -1,6 +1,6 @@
 import { Stack } from 'expo-router';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { LegendList } from '@legendapp/list';
+import { FlashList } from '@shopify/flash-list';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
 import {
@@ -32,34 +32,33 @@ import { Icon } from '@roninoss/icons';
 import * as StoreReview from 'expo-store-review';
 <% } %>
 
-import { Container } from '~/components/Container';
+import { Container } from '@/components/Container';
 <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
-import { ActivityIndicator } from '~/components/nativewindui/ActivityIndicator';
+import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewindui/Avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
-import { DatePicker } from '~/components/nativewindui/DatePicker';
+import { DatePicker } from '@/components/nativewindui/DatePicker';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
-import { Picker, PickerItem } from '~/components/nativewindui/Picker';
+import { Picker, PickerItem } from '@/components/nativewindui/Picker';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
-import { ProgressIndicator } from '~/components/nativewindui/ProgressIndicator';
+import { ProgressIndicator } from '@/components/nativewindui/ProgressIndicator';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
-import { Sheet, useSheetRef } from '~/components/nativewindui/Sheet';
+import { Sheet, useSheetRef } from '@/components/nativewindui/Sheet';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
-import { Slider } from '~/components/nativewindui/Slider';
+import { Slider } from '@/components/nativewindui/Slider';
 <% } %>
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
-import { Toggle } from '~/components/nativewindui/Toggle';
+import { Toggle } from '@/components/nativewindui/Toggle';
 <% } %>
-import { useColorScheme } from '~/lib/useColorScheme';
-import { useHeaderSearchBar } from '~/lib/useHeaderSearchBar';
+import { useColorScheme } from '@/lib/useColorScheme';
 
 export default function Home() {
   const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
@@ -72,7 +71,7 @@ export default function Home() {
     <>
       <Stack.Screen options={{ title: 'Home' }} />
       <Container>
-        <LegendList
+        <FlashList
           contentInsetAdjustmentBehavior="automatic"
           keyboardShouldPersistTaps="handled"
           data={data}
@@ -83,14 +82,13 @@ export default function Home() {
           ItemSeparatorComponent={renderItemSeparator}
           renderItem={renderItem}
           ListEmptyComponent={COMPONENTS.length === 0 ? ListEmptyComponent : undefined}
-          recycleItems
         />
       </Container>
     </>
   );
 }
 
-cssInterop(LegendList, {
+cssInterop(FlashList, {
   className: 'style',
   contentContainerClassName: 'contentContainerStyle',
 });
@@ -125,7 +123,7 @@ function ListEmptyComponent() {
             variant='subhead'
             className='text-primary'
           >
-            NativeWindUI
+            NativewindUI
           </Text>
           {' website.'}
         </Text>
@@ -466,7 +464,7 @@ const COMPONENTS: ComponentItem[] = [
             onPress={async () => {
               try {
                 const result = await Share.share({
-                  message: 'NativeWindUI | Familiar interface, native feel.',
+                  message: 'NativewindUI | Familiar interface, native feel.',
                 });
                 if (result.action === Share.sharedAction) {
                   if (result.activityType) {
@@ -523,7 +521,7 @@ const COMPONENTS: ComponentItem[] = [
       const TWITTER_AVATAR_URI = 'https://pbs.twimg.com/profile_images/1782428433898708992/1voyv4_A_400x400.jpg';
       return (
         <View className='items-center'>
-          <Avatar alt="NativeWindUI Avatar">
+          <Avatar alt="NativewindUI Avatar">
             <AvatarImage source={{ uri: TWITTER_AVATAR_URI }} />
             <AvatarFallback>
               <Text>NUI</Text>

package/build/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs

@@ -2,29 +2,20 @@ import { Link, Stack } from 'expo-router';
 <% if (["nativewind", "nativewindui"].includes(props.stylingPackage?.name)) {%>
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { createStyleSheet, useStyles } from 'react-native-unistyles'
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack } from "tamagui";
-	import { Container, Main, Subtitle, Title } from "../tamagui.config";
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { Box, Text, makeStyles } from 'theme';
-
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {
-<% if (props.stylingPackage?.name === "restyle") { %>
-  const styles = useStyles();
-<% } else if (props.stylingPackage?.name === "unistyles") {%>
+<% if (props.stylingPackage?.name === "unistyles") {%>
   const { styles } = useStyles(stylesheet);
 <% } %>
 
@@ -39,30 +30,6 @@ export default function NotFoundScreen() {
             </Link>
           </Container>
         </>
-      <% } else if (props.stylingPackage?.name === "tamagui") {%>
-        <Container>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Main>
-            <YStack>
-              <Title>{"This screen doesn't exist."}</Title>
-              <Link href="/">
-                <Subtitle>Go to home screen!</Subtitle>
-              </Link>
-            </YStack>
-          </Main>
-        </Container>
-      <% } else if (props.stylingPackage?.name === "restyle") {%>
-        <>
-          <Stack.Screen options={{ title: 'Oops!' }} />
-          <Container>
-            <Text variant="title">{"This screen doesn't exist."}</Text>
-            <Link href="/" style={styles.link}>
-              <Text variant="body" color="blue">
-                Go to home screen!
-              </Text>
-            </Link>
-          </Container>
-        </>
       <% } else { %>
         <>
           <Stack.Screen options={{ title: "Oops!" }} />
@@ -113,11 +80,4 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  const useStyles = makeStyles((theme) => ({
-    link: {
-      marginTop: theme.spacing.m_16,
-      paddingVertical: theme.spacing.m_16,
-    },
-  }));
 <% } %>

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

@@ -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/ThemeToggle';
+import { useColorScheme, useInitialAndroidBarSync } from '@/lib/useColorScheme';
 import { NAV_THEME } from '~/theme';
 
 export {