create-expo-stack 2.6.5 → 2.7.0-next.0c1b767

package/README.md

@@ -164,21 +164,28 @@ Thanks go to these wonderful people:
             <sub><b>Simon Grimm</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/dannyhw">
             <img src="https://avatars.githubusercontent.com/u/3481514?v=4" width="100;" alt="dannyhw"/>
             <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,21 @@
     "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",
+      "@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",
+      "react-native-tab-view": "^3.5.2",
+    <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>
       "@shopify/restyle": "^2.4.2",
@@ -112,7 +124,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 +136,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/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,99 @@
+import { useHeaderHeight } from '@react-navigation/elements';
+import { FlashList } from '@shopify/flash-list';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { Button as RNButton, ButtonProps, Linking, View, Platform } from 'react-native';
+
+import { Text } from '~/components/nativewind-ui/Text';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { useHeaderSearchBar } from '~/lib/useHeaderSearchBar';
+
+cssInterop(FlashList, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+});
+
+function DefaultButton({ color, ...props }: ButtonProps) {
+  const { colors } = useColorScheme();
+  return <RNButton color={color ?? colors.primary} {...props} />;
+}
+
+export default function Screen() {
+  const searchValue = useHeaderSearchBar();
+
+  const data = searchValue
+    ? COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
+    : COMPONENTS;
+
+  return (
+    <FlashList
+      contentInsetAdjustmentBehavior="automatic"
+      keyboardShouldPersistTaps="handled"
+      data={data}
+      estimatedItemSize={200}
+      contentContainerClassName="py-4"
+      centerContent={data.length === 0}
+      extraData={searchValue}
+      removeClippedSubviews={false} // used for selecting text on android
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={renderItemSeparator}
+      renderItem={renderItem}
+      ListEmptyComponent={ListEmptyComponent}
+    />
+  );
+}
+
+const SEARCH_BAR_HEIGHT = 52;
+
+function ListEmptyComponent() {
+  const headerHeight = useHeaderHeight();
+  return (
+    <>
+      {Platform.OS === 'ios' && <View style={{ height: headerHeight + SEARCH_BAR_HEIGHT }} />}
+      <View className="flex-1 items-center justify-center px-4">
+        <Text variant="title3" className="pb-1 text-center font-bold">
+          Add Components
+        </Text>
+        <Text color="tertiary" variant="body" className="pb-4 text-center">
+          You can install any of the free components from the NativeWindUI website.
+        </Text>
+        <DefaultButton
+          title="Open NativeWindUI"
+          onPress={() => Linking.openURL('https://nativewindui.com')}
+        />
+      </View>
+    </>
+  );
+}
+
+type ComponentItem = { name: string; component: () => React.JSX.Element };
+
+function keyExtractor(item: ComponentItem) {
+  return item.name;
+}
+
+function renderItemSeparator() {
+  return <View className="p-2" />;
+}
+
+function renderItem({ item }: { item: ComponentItem }) {
+  return (
+    <Card title={item.name}>
+      <item.component />
+    </Card>
+  );
+}
+
+function Card({ children, title }: { children: React.ReactNode; title: string }) {
+  return (
+    <View className="px-4">
+      <View className="gap-4 rounded-xl border border-border bg-card 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>
+  );
+}
+
+const COMPONENTS: ComponentItem[] = [];
+

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

@@ -0,0 +1,32 @@
+import { Text } from '~/components/nativewind-ui/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.primary,
+        tabBarInactiveTintColor: 'grey',
+        tabBarLabelStyle: {
+          fontSize: 14,
+          textTransform: 'capitalize',
+          fontWeight: 'bold',
+        },
+        tabBarIndicatorStyle: {
+          backgroundColor: colors.primary,
+        },
+        tabBarScrollEnabled: true,
+        tabBarItemStyle: { width: width / SCREENS.length },
+      }}
+    >
+      {SCREENS.map(({ name, title }) => (
+        <TopTabs.Screen
+          key={name}
+          name={name}
+          options={{
+            title,
+          }}
+        />
+      ))}
+    </TopTabs>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { Text } from '~/components/nativewind-ui/Text';
+import { View } from 'react-native';
+
+export default function FollowingScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>Following Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { Text } from '~/components/nativewind-ui/Text';
+import { View } from 'react-native';
+
+export default function ForYouScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>For You Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import { Text } from '~/components/nativewind-ui/Text';
+
+export default function MyGroupScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>My Group Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}