create-expo-stack 2.6.5 → 2.7.0-next.4dc0e0a

package/README.md

@@ -200,6 +200,13 @@ Thanks go to these wonderful people:
             <sub><b>Null</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/coyksdev">
             <img src="https://avatars.githubusercontent.com/u/19565694?v=4" width="100;" alt="coyksdev"/>
@@ -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,20 @@
     "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") { %>
+      "@react-navigation/material-top-tabs": "^6.6.13",
+      "@roninoss/icons": "^0.0.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",
+      "react-native-tab-view": "^3.5.2",
+    <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>
       "@shopify/restyle": "^2.4.2",
@@ -112,7 +123,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 +135,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/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/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,
+};

package/build/templates/packages/nativewindui/app/bottom-tabs/_layout.tsx.ejs

@@ -0,0 +1,34 @@
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { Icon } from '@roninoss/icons';
+import { Tabs } from 'expo-router';
+import { View } from 'react-native';
+
+export default function TabsLayout() {
+  return (
+    <Tabs screenOptions={SCREEN_OPTIONS}>
+      <Tabs.Screen name='index' options={INDEX_OPTIONS} />
+      <Tabs.Screen name='profile' options={PROFILE_OPTIONS} />
+    </Tabs>
+  );
+}
+const SCREEN_OPTIONS = {
+  headerRight: () => (
+    <View className='px-4'>
+      <ThemeToggle />
+    </View>
+  ),
+};
+
+const INDEX_OPTIONS = {
+  title: 'Home',
+  tabBarIcon({ color, size }: { color: string; size: number }) {
+    return <Icon name='home' color={color} size={size} />;
+  },
+};
+
+const PROFILE_OPTIONS = {
+  title: 'Profile',
+  tabBarIcon({ color, size }: { color: string; size: number }) {
+    return <Icon name='person' color={color} size={size} />;
+  },
+};

package/build/templates/packages/nativewindui/app/bottom-tabs/index.tsx.ejs

@@ -0,0 +1,11 @@
+import { router } from 'expo-router';
+import * as React from 'react';
+import { Button, View } from 'react-native';
+
+export default function HomeScreen() {
+  return (
+    <View className='flex-1 justify-center items-center'>
+      <Button title='Go back' onPress={router.back} />
+    </View>
+  );
+}

package/build/templates/packages/nativewindui/app/bottom-tabs/profile.tsx.ejs

@@ -0,0 +1,11 @@
+import { router } from 'expo-router';
+import * as React from 'react';
+import { Button, View } from 'react-native';
+
+export default function ProfileScreen() {
+  return (
+    <View className='flex-1 justify-center items-center'>
+      <Button color={'orange'} title='Go to home tab' onPress={router.back} />
+    </View>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { Drawer } from 'expo-router/drawer';
+import { View } from 'react-native';
+
+export default function DrawerLayout() {
+  const { colors } = useColorScheme();
+  return (
+    <Drawer
+      screenOptions={{
+        headerTintColor: colors.foreground,
+        headerRight,
+      }}
+    >
+      <Drawer.Screen name='index' options={EXPLORE_OPTIONS} />
+    </Drawer>
+  );
+}
+
+function headerRight() {
+  return (
+    <View className='px-4'>
+      <ThemeToggle />
+    </View>
+  );
+}
+const EXPLORE_OPTIONS = {
+  title: 'Explore',
+};

package/build/templates/packages/nativewindui/app/drawer/index.tsx.ejs

@@ -0,0 +1,11 @@
+import { router } from 'expo-router';
+import * as React from 'react';
+import { Button, View } from 'react-native';
+
+export default function ExploreScreen() {
+  return (
+    <View className='flex-1 justify-center items-center'>
+      <Button title='Go back' onPress={router.back} />
+    </View>
+  );
+}

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

@@ -0,0 +1,165 @@
+import { Icon } from '@roninoss/icons';
+import { Link } from 'expo-router';
+import * as React from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+
+import { Text } from '@/components/Text';
+import { Toggle } from '@/components/Toggle';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { useHeaderSearchBar } from '@/lib/useHeaderSearchBar';
+
+export default function Screen() {
+  const { colors } = useColorScheme();
+  const searchValue = useHeaderSearchBar();
+
+  const data = searchValue
+    ? COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
+    : COMPONENTS;
+
+  const screens = searchValue
+    ? FULL_SCREEN_COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
+    : FULL_SCREEN_COMPONENTS;
+
+  return (
+    <FlatList
+      contentInsetAdjustmentBehavior="automatic"
+      data={data}
+      contentContainerClassName="py-4"
+      extraData={searchValue}
+      removeClippedSubviews={false} // used for selecting text on android
+      keyExtractor={(item) => item.name}
+      ItemSeparatorComponent={() => <View className="p-2" />}
+      renderItem={({ item }) => {
+        return (
+          <Card title={item.name}>
+            <item.component />
+          </Card>
+        );
+      }}
+      ListFooterComponent={() => {
+        return (
+          <FlatList
+            ListHeaderComponent={() => (
+              <View className={cn('px-4 pb-2 pt-6', screens.length === 0 && 'hidden')}>
+                <Text className="text-xs font-semibold opacity-50 ">NAVIGATORS</Text>
+              </View>
+            )}
+            scrollToOverflowEnabled
+            scrollEnabled={false}
+            contentInsetAdjustmentBehavior="automatic"
+            data={screens}
+            className="ios:px-4"
+            extraData={searchValue}
+            keyExtractor={(item) => item.name}
+            renderItem={({ index, item }) => {
+              const isLast = index === screens.length - 1;
+              return (
+                <Link href={item.href} asChild>
+                  <Pressable
+                    className={cn(
+                      index === 0 && 'ios:rounded-t-xl border-t',
+                      isLast && 'ios:rounded-b-xl border-b',
+                      'bg-card ios:border-l ios:border-r border-border flex-row active:opacity-80'
+                    )}>
+                    <View
+                      className={cn(
+                        !isLast && 'border-border border-b',
+                        'flex-1 flex-row items-center justify-between px-4 py-3'
+                      )}>
+                      <Text>{item.name}</Text>
+                      <Icon name="chevron-right" size={18} color={colors.grey} />
+                    </View>
+                  </Pressable>
+                </Link>
+              );
+            }}
+          />
+        );
+      }}
+    />
+  );
+}
+
+function Card({ children, title }: { children: React.ReactNode; title: string }) {
+  return (
+    <View className="px-4">
+      <View className="bg-card border-border gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
+        <Text className="text-center text-sm font-medium tracking-wider opacity-60">{title}</Text>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+function ToggleExample() {
+  const [switchValue, setSwitchValue] = React.useState(true);
+  return (
+    <View className="items-center">
+      <Toggle value={switchValue} onValueChange={setSwitchValue} />
+    </View>
+  );
+}
+
+const COMPONENTS = [
+  {
+    name: 'Toggle',
+    component: ToggleExample,
+  },
+
+  {
+    name: 'Text',
+    component: () => (
+      <View className="gap-2">
+        <Text variant="largeTitle" className="text-center">
+          Large Title
+        </Text>
+        <Text variant="title1" className="text-center">
+          Title 1
+        </Text>
+        <Text variant="title2" className="text-center">
+          Title 2
+        </Text>
+        <Text variant="title3" className="text-center">
+          Title 3
+        </Text>
+        <Text variant="heading" className="text-center">
+          Heading
+        </Text>
+        <Text variant="body" className="text-center">
+          Body
+        </Text>
+        <Text variant="callout" className="text-center">
+          Callout
+        </Text>
+        <Text variant="subhead" className="text-center">
+          Subhead
+        </Text>
+        <Text variant="footnote" className="text-center">
+          Footnote
+        </Text>
+        <Text variant="caption1" className="text-center">
+          Caption 1
+        </Text>
+        <Text variant="caption2" className="text-center">
+          Caption 2
+        </Text>
+      </View>
+    ),
+  },
+] as const;
+
+const FULL_SCREEN_COMPONENTS = [
+  {
+    name: 'Drawer Navigation',
+    href: '/drawer/',
+  },
+  {
+    name: 'Bottom Tabs Navigation',
+    href: '/bottom-tabs/',
+  },
+  {
+    name: 'Top Tabs Navigation',
+    href: '/top-tabs/',
+  },
+] as const;

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

@@ -0,0 +1,32 @@
+import { Text } from '@/components/Text';
+import { Link } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { useColorScheme } from 'nativewind';
+import { Platform, View } from 'react-native';
+
+export default function ModalScreen() {
+  const { colorScheme } = useColorScheme();
+  return (
+    <>
+      <StatusBar
+        style={
+          Platform.OS === 'ios'
+            ? 'light'
+            : colorScheme === 'dark'
+            ? 'light'
+            : 'dark'
+        }
+      />
+      <View className='flex-1 justify-center items-center gap-8 pb-12'>
+        <View className='items-center gap-2'>
+          <Text variant='largeTitle' className='font-bold'>
+            NativeWindUI
+          </Text>
+          <Link href={'https://nativewindui.com/'}>
+            <Text className='text-primary'>https://nativewindui.com/</Text>
+          </Link>
+        </View>
+      </View>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/app/top-tabs/_layout.tsx.ejs

@@ -0,0 +1,71 @@
+import { useColorScheme } from '@/lib/useColorScheme';
+import type {
+  MaterialTopTabNavigationEventMap,
+  MaterialTopTabNavigationOptions,
+} from '@react-navigation/material-top-tabs';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import {
+  type ParamListBase,
+  type TabNavigationState,
+} from '@react-navigation/native';
+import { withLayoutContext } from 'expo-router';
+import { Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('screen');
+
+const { Navigator } = createMaterialTopTabNavigator();
+
+const TopTabs = withLayoutContext<
+  MaterialTopTabNavigationOptions,
+  typeof Navigator,
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationEventMap
+>(Navigator);
+
+const SCREENS = [
+  {
+    name: 'index',
+    title: 'For You',
+  },
+  {
+    name: 'following',
+    title: 'Following',
+  },
+  {
+    name: 'my-group',
+    title: 'My Group',
+  },
+];
+
+export default function TopTabsLayout() {
+  const { colors } = useColorScheme();
+  return (
+    <TopTabs
+      initialRouteName='index'
+      screenOptions={{
+        tabBarActiveTintColor: colors.blue,
+        tabBarInactiveTintColor: 'grey',
+        tabBarLabelStyle: {
+          fontSize: 14,
+          textTransform: 'capitalize',
+          fontWeight: 'bold',
+        },
+        tabBarIndicatorStyle: {
+          backgroundColor: colors.blue,
+        },
+        tabBarScrollEnabled: true,
+        tabBarItemStyle: { width: width / SCREENS.length },
+      }}
+    >
+      {SCREENS.map(({ name, title }) => (
+        <TopTabs.Screen
+          key={name}
+          name={name}
+          options={{
+            title,
+          }}
+        />
+      ))}
+    </TopTabs>
+  );
+}