create-expo-stack 2.6.5 → 2.7.0-next.2960d96

package/README.md

@@ -157,6 +157,13 @@ Thanks go to these wonderful people:
             <sub><b>Finn Bayer</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/mrzachnugent">
+            <img src="https://avatars.githubusercontent.com/u/63797719?v=4" width="100;" alt="mrzachnugent"/>
+            <br />
+            <sub><b>Zach Nugent</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/saimon24">
             <img src="https://avatars.githubusercontent.com/u/2514208?v=4" width="100;" alt="saimon24"/>
@@ -170,15 +177,15 @@ Thanks go to these wonderful people:
             <br />
             <sub><b>Daniel Williams</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/todevmilen">
             <img src="https://avatars.githubusercontent.com/u/78319110?v=4" width="100;" alt="todevmilen"/>
             <br />
             <sub><b>Milen Todev</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/alitnk">
             <img src="https://avatars.githubusercontent.com/u/35243344?v=4" width="100;" alt="alitnk"/>
@@ -213,15 +220,15 @@ Thanks go to these wonderful people:
             <br />
             <sub><b>Andrew Levy</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/gialencar">
             <img src="https://avatars.githubusercontent.com/u/11895696?v=4" width="100;" alt="gialencar"/>
             <br />
             <sub><b>Gilson Alencar</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/mwarger">
             <img src="https://avatars.githubusercontent.com/u/686823?v=4" width="100;" alt="mwarger"/>
@@ -256,15 +263,15 @@ Thanks go to these wonderful people:
             <br />
             <sub><b>Joar Karlsson</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/Joehoel">
             <img src="https://avatars.githubusercontent.com/u/31251240?v=4" width="100;" alt="Joehoel"/>
             <br />
             <sub><b>Joël Kuijper</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/asapMaki">
             <img src="https://avatars.githubusercontent.com/u/30200380?v=4" width="100;" alt="asapMaki"/>
@@ -279,6 +286,13 @@ Thanks go to these wonderful people:
             <sub><b>Sean Boult</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/YounessHassoune">
+            <img src="https://avatars.githubusercontent.com/u/36106440?v=4" width="100;" alt="YounessHassoune"/>
+            <br />
+            <sub><b>YOUNESS HASSOUNE</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/bautistaaa">
             <img src="https://avatars.githubusercontent.com/u/3660667?v=4" width="100;" alt="bautistaaa"/>

package/build/templates/base/App.tsx.ejs

@@ -8,6 +8,9 @@ import { StatusBar } from 'expo-status-bar';
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { ThemeProvider } from '@shopify/restyle';
   import { theme } from 'theme';

package/build/templates/base/babel.config.js.ejs

@@ -17,7 +17,7 @@ module.exports = function(api) {
   <% } %>
 
   return {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       presets: [
         ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
         'nativewind/babel',

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

@@ -16,9 +16,46 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       "nativewind": "^4.0.1",
     <% } %>
+    <% if (props.stylingPackage?.name === "nativewindui") { %>
+      "@roninoss/icons": "^0.0.3",
+      "@shopify/flash-list": "1.6.3",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.1.0",
+      "expo-dev-client": "~3.3.8",
+      "tailwind-merge": "^2.2.1",
+      "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.6.1",
+      <% } %>
+      <% 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") { %>
       "@shopify/restyle": "^2.4.2",
@@ -112,7 +149,7 @@
     "eslint": "^8.50.0",
     "eslint-config-universe": "^12.0.0",
     "prettier": "^3.2.5",
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
       "tailwindcss": "^3.4.0",
       "prettier-plugin-tailwindcss": "^0.5.11",
     <% } %>
@@ -124,7 +161,7 @@
   "eslintConfig": {
     "extends": "universe/native"
   },
-  <% if (props.navigationPackage?.name === 'expo-router') { %>
+  <% if (props.navigationPackage?.name === "expo-router") { %>
     "resolutions": {
       "expo-modules-core": "~1.11.0"
     },

package/build/templates/base/prettier.config.js.ejs

@@ -4,7 +4,7 @@ module.exports = {
   singleQuote: true,
   bracketSameLine: true,
   trailingComma: 'es5',
-  <% if (props.stylingPackage?.name === "nativewind") { %>
+  <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
   plugins: [require.resolve("prettier-plugin-tailwindcss")],
   tailwindAttributes: ["className"],
   <% } %>

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

@@ -6,12 +6,16 @@
       ,
     "baseUrl": ".",
     "paths": {
-      <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
-      "~/*": ["*"]
-      <% } else if  (props.flags.importAlias === true) { %>
-      "~/*": ["src/*"]
-      <% } else { %>
-      "<%= props.flags.importAlias %>": ["src/*"]
+      <% if (props.stylingPackage?.name === 'nativewindui') { %>
+        "~/*": [ "./*" ]
+      <% } else { %>  
+        <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
+        "~/*": ["*"]
+        <% } else if  (props.flags.importAlias === true) { %>
+        "~/*": ["src/*"]
+        <% } else { %>
+        "<%= props.flags.importAlias %>": ["src/*"]
+        <% } %>
       <% } %>
     }
     <% } %>

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

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

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

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

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

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import '../global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';

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

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { View } from 'react-native';
+import { Text } from '~/components/nativewind-ui/Text';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View className='flex-1 items-center justify-center p-5 bg-background'>
+        <Text variant='largeTitle'>This screen doesn't exist.</Text>
+
+        <Link href='/' className='m-4 py-4'>
+          <Text>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}

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

@@ -0,0 +1,85 @@
+import '~/global.css';
+import 'expo-dev-client';
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import { Icon } from '@roninoss/icons';
+import { Link, Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { Pressable, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { ThemeToggle } from '~/components/nativewind-ui/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';
+
+export default function RootLayout() {
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+
+  return (
+    <>
+      <StatusBar
+        key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
+        style={isDarkColorScheme ? 'light' : 'dark'}
+      />
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <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>
+      </GestureHandlerRootView>
+    </>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  animation: 'ios', // for android
+} as const;
+
+const INDEX_OPTIONS = {
+  headerLargeTitle: true,
+  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>
+    </Link>
+  );
+}
+
+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,
+};