create-expo-stack 2.20.0-next.7f9c8bc → 2.20.0

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/nativewind/global.css

@@ -1,2 +1,3 @@
-@import 'tailwindcss';
-@import 'nativewind/theme';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -1,8 +1,7 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
-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);
 
-module.exports = withNativewind(config);
+module.exports = withNativeWind(config, { input: './global.css' });

package/build/templates/packages/nativewind/nativewind-env.d.ts

@@ -1,4 +1,2 @@
 // @ts-ignore
-/// <reference types="react-native-css/types" />
-
-// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.
+/// <reference types="nativewind/types" />

package/build/templates/packages/nativewind/tailwind.config.js.ejs

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    <% if (props.navigationPackage?.name === "react-navigation") { %>
+      content: ["./App.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}", "./screens/**/*.{js,ts,tsx}", "./navigation/**/*.{js,ts,tsx}"],
+    <% } else if (props.navigationPackage?.name === "expo-router") { %>
+      content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+    <% } else { %>
+      content: ["./App.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+    <% } %>
+    presets: [require("nativewind/preset")],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }

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 {

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

@@ -2,8 +2,8 @@ import { Icon } from '@roninoss/icons';
 import { StatusBar } from 'expo-status-bar';
 import { Linking, Platform, View } from 'react-native';
 
-import { Text } from '~/components/nativewindui/Text';
-import { useColorScheme } from '~/lib/useColorScheme';
+import { Text } from '@/components/nativewindui/Text';
+import { useColorScheme } from '@/lib/useColorScheme';
 
 export default function ModalScreen() {
   const { colors, colorScheme } = useColorScheme();
@@ -15,7 +15,7 @@ export default function ModalScreen() {
       <View className="flex-1 items-center justify-center gap-1 px-12">
         <Icon name="file-plus-outline" size={42} color={colors.grey} />
         <Text variant="title3" className="pb-1 text-center font-semibold">
-          NativeWindUI
+          NativewindUI
         </Text>
         <Text color="tertiary" variant="subhead" className="pb-4 text-center">
           You can install any of the free components from the{' '}
@@ -23,7 +23,7 @@ export default function ModalScreen() {
             onPress={() => Linking.openURL('https://nativewindui.com')}
             variant="subhead"
             className="text-primary">
-            NativeWindUI
+            NativewindUI
           </Text>
           {' website.'}
         </Text>

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

@@ -1,22 +1,9 @@
-import * as NavigationBar from 'expo-navigation-bar';
 import { useColorScheme as useNativewindColorScheme } from 'nativewind';
-import * as React from 'react';
-import { Platform } from 'react-native';
 
-import { COLORS } from '~/theme/colors';
+import { COLORS } from '@/theme/colors';
 
 function useColorScheme() {
-  const { colorScheme, setColorScheme: setNativeWindColorScheme } = useNativewindColorScheme();
-
-  async function setColorScheme(colorScheme: 'light' | 'dark') {
-    setNativeWindColorScheme(colorScheme);
-    if (Platform.OS !== 'android') return;
-    try {
-      await setNavigationBar(colorScheme);
-    } catch (error) {
-      console.error('useColorScheme.tsx", "setColorScheme', error);
-    }
-  }
+  const { colorScheme, setColorScheme } = useNativewindColorScheme();
 
   function toggleColorScheme() {
     return setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
@@ -31,25 +18,4 @@ function useColorScheme() {
   };
 }
 
-/**
- * Set the Android navigation bar color based on the color scheme.
- */
-function useInitialAndroidBarSync() {
-  const { colorScheme } = useColorScheme();
-  React.useEffect(() => {
-    if (Platform.OS !== 'android') return;
-    setNavigationBar(colorScheme).catch((error) => {
-      console.error('useColorScheme.tsx", "useInitialColorScheme', error);
-    });
-  }, [colorScheme]);
-}
-
-export { useColorScheme, useInitialAndroidBarSync };
-
-function setNavigationBar(colorScheme: 'light' | 'dark') {
-  return Promise.all([
-    NavigationBar.setButtonStyleAsync(colorScheme === 'dark' ? 'light' : 'dark'),
-    NavigationBar.setPositionAsync('absolute'),
-    NavigationBar.setBackgroundColorAsync(colorScheme === 'dark' ? '#00000030' : '#ffffff80'),
-  ]);
-}
+export { useColorScheme };

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

@@ -1,6 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { View } from 'react-native';
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 
 export default function NotFoundScreen() {
   return (