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

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 (

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

@@ -1,32 +1,29 @@
-import '../global.css';
-import 'expo-dev-client';
-import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
-import { Icon } from '@roninoss/icons';
+import '@/global.css';
+
 <% 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 { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import * as Device from 'expo-device';
 import { Link, Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { Pressable, View } from 'react-native';
-<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+import { Platform, Pressable } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-<% } %>
 
-import { ThemeToggle } from '~/components/ThemeToggle';
-import { cn } from '~/lib/cn';
-import { useColorScheme, useInitialAndroidBarSync } from '~/lib/useColorScheme';
-import { NAV_THEME } from '~/theme';
+import { Icon } from '@/components/nativewindui/Icon';
+import { ThemeToggle } from '@/components/nativewindui/ThemeToggle';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { NAV_THEME } from '@/theme';
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
 } from 'expo-router';
 
+const isIos26 = Platform.select({ default: false, ios: Device.osVersion?.startsWith('26.' )});
+
 export default function RootLayout() {
-  useInitialAndroidBarSync();
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
   return (
@@ -37,15 +34,12 @@ export default function RootLayout() {
       />
       {/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
       {/* <ExampleProvider> */}
-       <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
       <GestureHandlerRootView style={{ flex: 1 }}>
-        <BottomSheetModalProvider>
-        <% } %>
         <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
         <ActionSheetProvider>
         <% } %>
         <NavThemeProvider value={NAV_THEME[colorScheme]}>
-          <Stack screenOptions={SCREEN_OPTIONS}>
+          <Stack>
             <Stack.Screen name="index" options={INDEX_OPTIONS} />
             <Stack.Screen name="modal" options={MODAL_OPTIONS} />
           </Stack>
@@ -53,35 +47,24 @@ export default function RootLayout() {
         <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
         </ActionSheetProvider>
         <% } %>
-        <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
-        </BottomSheetModalProvider>
       </GestureHandlerRootView>
-      <% } %>
       {/* </ExampleProvider> */}
     </>
   );
 }
 
-const SCREEN_OPTIONS = {
-  animation: 'ios_from_right', // for android
-} as const;
-
 const INDEX_OPTIONS = {
   headerLargeTitle: true,
-  title: 'NativeWindUI',
+  headerTransparent: isIos26,
+  title: 'NativewindUI',
   headerRight: () => <SettingsIcon />,
 } as const;
 
 function SettingsIcon() {
-  const { colors } = useColorScheme();
   return (
     <Link href="/modal" asChild>
-      <Pressable className="opacity-80">
-        {({ pressed }) => (
-          <View className={cn(pressed ? 'opacity-50' : 'opacity-90')}>
-            <Icon name="cog-outline" color={colors.foreground} />
-          </View>
-        )}
+      <Pressable className={cn('opacity-80 active:opacity-50', isIos26 && 'px-1.5')}>
+        <Icon name='gearshape' className='text-foreground' />
       </Pressable>
     </Link>
   );