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

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>
   );