create-expo-stack 2.7.0-next.997d3bf → 2.7.0-next.a59a8d8

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,21 +177,14 @@ 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 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/alitnk">

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

@@ -20,7 +20,6 @@
       "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",
@@ -29,7 +28,6 @@
       "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") { %>

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

@@ -1,7 +1,8 @@
+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 } from 'react-native';
+import { Button as RNButton, ButtonProps, Linking, View, Platform } from 'react-native';
 
 import { Text } from '~/components/nativewind-ui/Text';
 import { useColorScheme } from '~/lib/useColorScheme';
@@ -24,26 +25,6 @@ export default function Screen() {
     ? COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
     : COMPONENTS;
 
-  if (data.length === 0) {
-    return (
-      <View className='flex-1 justify-center items-center px-4'>
-        <Text variant='title3' className='text-center font-bold pb-1'>
-          {searchValue.length === 0
-            ? 'No Components Installed'
-            : 'No Components Found'}
-        </Text>
-        <Text color='tertiary' variant='body' className='text-center pb-4'>
-          You can install any of the free components from the NativeWindUI
-          website.
-        </Text>
-        <DefaultButton
-          title='Open NativeWindUI'
-          onPress={() => Linking.openURL('https://nativewindui.com')}
-        />
-      </View>
-    );
-  }
-
   return (
     <FlashList
       contentInsetAdjustmentBehavior="automatic"
@@ -51,15 +32,40 @@ export default function Screen() {
       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-8">
+        <Text variant="title3" className="pb-1 text-center font-bold">
+          No Components Installed
+        </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) {
@@ -67,7 +73,7 @@ function keyExtractor(item: ComponentItem) {
 }
 
 function renderItemSeparator() {
-  return <View className='p-2' />;
+  return <View className="p-2" />;
 }
 
 function renderItem({ item }: { item: ComponentItem }) {
@@ -81,7 +87,7 @@ function renderItem({ item }: { item: ComponentItem }) {
 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">
+      <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>

package/build/templates/packages/nativewindui/lib/useHeaderSearchBar.tsx.ejs

@@ -18,7 +18,7 @@ export function useHeaderSearchBar(props: SearchBarProps = {}) {
         tintColor: colors.primary,
         headerIconColor: colors.foreground,
         hintTextColor: colors.grey,
-        hideWhenScrolling: false,
+        hideWhenScrolling: true,
         onChangeText(ev) {
           setSearch(ev.nativeEvent.text);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-expo-stack",
-	"version": "2.7.0-next.997d3bf",
+	"version": "2.7.0-next.a59a8d8",
 	"description": "CLI tool to initialize a React Native application with Expo",
 	"repository": {
 		"type": "git",

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

@@ -1,34 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/top-tabs/_layout.tsx.ejs

@@ -1,71 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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>
-  );
-}