create-expo-stack 2.22.0 → 2.24.0-next.163e6ee

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

@@ -1,51 +1,72 @@
-import { Stack, Link } from 'expo-router';
 <% if (props.stylingPackage?.name === "stylesheet") { %>
 import { StyleSheet, View } from 'react-native';
+import { Stack, Link } from 'expo-router';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
 import { StyleSheet } from 'react-native-unistyles';
+import { Stack, Link } from 'expo-router';
 import { View } from 'react-native';
 <% } else { %>
 import { View } from 'react-native';
+import { router } from 'expo-router';
 <% } %>
 
 import { Button } from '@/components/Button';
+<% if (props.stylingPackage?.name !== "nativewind") { %>
 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() {
   return (
     <% if (props.stylingPackage?.name === "nativewind") { %>
       <View className={styles.container}>
-    <% } else { %>
-      <View style={styles.container}>
-    <% } %>
-      <Stack.Screen options={{ title: 'Home' }} />
-      <Container>
+      <% if (props.internalizationPackage?.name === "i18next") { %>
         <ScreenContent path="app/index.tsx" title="Home">
-        <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
-        <% } %>
         </ScreenContent>
-        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-          <% if (props.stylingPackage?.name === "unistyles") { %>
-              <Button title="Show Details" style={styles.button} />
+      <% } else { %>
+      <ScreenContent path="app/index.tsx" title="Home" />
+      <% } %>
+      <View className={styles.buttonWrapper}>
+        <Button
+          title="Show Details"
+          onPress={() => router.push({ pathname: '/details', params: { name: 'Dan' } })} 
+        />
+      </View>
+    </View>
+    <% } else { %>
+      <View style={styles.container}>
+        <Stack.Screen options={{ title: 'Home' }} />
+        <Container>
+          <% if (props.internalizationPackage?.name === "i18next") { %>
+            <ScreenContent path="app/index.tsx" title="Home">
+              <InternalizationExample />
+            </ScreenContent>
           <% } else { %>
-              <Button title="Show Details" />
+            <ScreenContent path="app/index.tsx" title="Home" />
           <% } %>
-        </Link>
-      </Container>
-    </View>
+          <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+            <% if (props.stylingPackage?.name === "unistyles") { %>
+                <Button title="Show Details" style={styles.button} />
+            <% } else { %>
+                <Button title="Show Details" />
+            <% } %>
+          </Link>
+        </Container>
+      </View>
+    <% } %>
   );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
 const styles = {
-  container: "flex flex-1 bg-white",
-}
+  container: "flex flex-1 p-safe bg-white",
+  buttonWrapper: "w-full pb-safe",
+};
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 const styles = StyleSheet.create({
   container: {

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

@@ -32,9 +32,13 @@ export default function RootLayout() {
 
   return (
     <% if (props.stylingPackage?.name === "nativewind") { %>
-    <SafeAreaProvider>
-    <% } %>
-        <% if (props.stylingPackage?.name === "unistyles") { %>
+      <SafeAreaProvider>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        </Stack>
+      </SafeAreaProvider>
+    <% } else if (props.stylingPackage?.name === "unistyles") { %>
             <Stack
                 screenOptions={{
                     headerStyle: {
@@ -46,14 +50,14 @@ export default function RootLayout() {
                     headerTintColor: theme.colors.typography
                 }}
             >
-        <% } else  { %>
+		<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+		<Stack.Screen name="modal" options={{ presentation: "modal" }} />
+	</Stack>
+    <% } else { %>
             <Stack>
-        <% } %>
 		<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
 		<Stack.Screen name="modal" options={{ presentation: "modal" }} />
 	</Stack>
-    <% if (props.stylingPackage?.name === "nativewind") { %>
-    </SafeAreaProvider>
     <% } %>
   );
 }

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/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/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/nativewind/components/BackButton.tsx.ejs

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Feather } from '@expo/vector-icons';
 import { Text, View } from 'react-native';
 

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/EditScreenInfo.tsx.ejs

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View } from 'react-native';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>

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

@@ -21,7 +21,7 @@ export const ScreenContent: React.FC<ScreenContentProps> = ({ title, path, child
 };
 
 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,3 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+
+@import 'nativewind/theme';

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

@@ -1,7 +1,8 @@
+// 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');
 
-// eslint-disable-next-line no-undef
+/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = withNativewind(config);

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

@@ -1,2 +1,4 @@
 // @ts-ignore
-/// <reference types="nativewind/types" />
+/// <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.

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

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@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/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/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/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() {