create-expo-stack 2.7.0-next.a59a8d8 → 2.7.0-next.b1717c9

package/build/templates/base/app.json.ejs

@@ -39,7 +39,11 @@
     <% } %>
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    <% if (props.stylingPackage?.name === "nativewindui") { %>
+    "userInterfaceStyle": "automatic",
+     <% } else { %>
+     "userInterfaceStyle": "light",
+    <% } %>
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

package/build/templates/base/package.json.ejs

@@ -26,8 +26,37 @@
       "clsx": "^2.1.0",
       "expo-dev-client": "~3.3.8",
       "tailwind-merge": "^2.2.1",
+      <% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
       "react-native-uitextview": "^1.1.4",
+      <% } %>
       "react-native-pager-view": "6.2.3",
+      <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
+        "@react-native-community/datetimepicker": "7.7.0",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('segmented-control')) { %>
+        "@react-native-segmented-control/segmented-control": "2.4.1",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
+        "@react-native-picker/picker": "2.6.1",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+        "@gorhom/bottom-sheet": "^4",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        "@expo/react-native-action-sheet": "^4.0.1",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('context-menu') || props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
+        "zeego": "^1.9.1",
+        "react-native-ios-context-menu": "^2.5.0",
+        "react-native-ios-utilities": "^4.4.0",
+        "@react-native-menu/menu": "^0.9.1",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
+        "expo-store-review": "~6.8.3",
+      <% } %>
+      <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
+        "@react-native-community/slider": "4.4.2",
+      <% } %>
     <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>

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

@@ -2,12 +2,20 @@ import '~/global.css';
 import 'expo-dev-client';
 import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
 import { Icon } from '@roninoss/icons';
+<% 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 { 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 { ThemeToggle } from '~/components/nativewind-ui/ThemeToggle';
 import { cn } from '~/lib/cn';
 import { useColorScheme } from '~/lib/useColorScheme';
 import { NAV_THEME } from '~/theme';
@@ -26,17 +34,26 @@ export default function RootLayout() {
         key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
         style={isDarkColorScheme ? 'light' : 'dark'}
       />
+       <% 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.Screen name="index" options={INDEX_OPTIONS} />
-            <Stack.Screen name="top-tabs" options={TOP_TABS_OPTIONS} />
-            <Stack.Screen name="drawer" options={DEFAULT_OPTIONS} />
-            <Stack.Screen name="bottom-tabs" options={DEFAULT_OPTIONS} />
             <Stack.Screen name="modal" options={MODAL_OPTIONS} />
           </Stack>
         </NavThemeProvider>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        </ActionSheetProvider>
+        <% } %>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+        </BottomSheetModalProvider>
       </GestureHandlerRootView>
+      <% } %>
     </>
   );
 }
@@ -66,20 +83,9 @@ function SettingsIcon() {
   );
 }
 
-const TOP_TABS_OPTIONS = {
-  title: 'Top Tabs',
-  headerShadowVisible: false,
-  headerBackTitle: 'Back',
-  headerRight: () => <ThemeToggle />,
-} as const;
-
 const MODAL_OPTIONS = {
   presentation: 'modal',
   animation: 'fade_from_bottom', // for android
   title: 'Settings',
   headerRight: () => <ThemeToggle />,
 } as const;
-
-const DEFAULT_OPTIONS = {
-  headerShown: false,
-};