create-expo-stack 2.7.0-next.ba3b85d → 2.7.0-next.ba4f707

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

@@ -1,165 +1,682 @@
-import { Icon } from '@roninoss/icons';
-import { Link } from 'expo-router';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { FlashList } from '@shopify/flash-list';
+import { cssInterop } from 'nativewind';
 import * as React from 'react';
-import { FlatList, Pressable, View } from 'react-native';
+import {
+  <% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
+  Alert,
+  <% } %>
+  Button as RNButton,
+  ButtonProps,
+  Linking,
+  Platform,
+  <% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
+  Pressable,
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
+  Share,
+  <% } %>
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+import { useActionSheet } from '@expo/react-native-action-sheet';
+<% } %>
+import { Icon } from '@roninoss/icons';
+<% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
+import * as StoreReview from 'expo-store-review';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('context-menu')) { %>
+import * as ContextMenu from 'zeego/context-menu';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
+import * as DropdownMenu from 'zeego/dropdown-menu';
+<% } %>
 
-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';
+<% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
+import { ActivityIndicator } from '~/components/nativewind-ui/ActivityIndicator';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewind-ui/Avatar';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
+import { DatePicker } from '~/components/nativewind-ui/DatePicker';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
+import { Picker, PickerItem } from '~/components/nativewind-ui/Picker';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
+import { ProgressIndicator } from '~/components/nativewind-ui/ProgressIndicator';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('segmented-control')) { %>
+import { SegmentedControl } from '~/components/nativewind-ui/SegmentedControl';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+import { Sheet, useSheetRef } from '~/components/nativewind-ui/Sheet';
+<% } %>
+<% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
+import { Slider } from '~/components/nativewind-ui/Slider';
+<% } %>
+import { Text } from '~/components/nativewind-ui/Text';
+<% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
+import { Toggle } from '~/components/nativewind-ui/Toggle';
+<% } %>
+import { useColorScheme } from '~/lib/useColorScheme';
+import { useHeaderSearchBar } from '~/lib/useHeaderSearchBar';
 
-export default function Screen() {
+
+cssInterop(FlashList, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+});
+
+function DefaultButton({ color, ...props }: ButtonProps) {
   const { colors } = useColorScheme();
-  const searchValue = useHeaderSearchBar();
+  return <RNButton color={color ?? colors.primary} {...props} />;
+}
+
+export default function Screen() {
+  const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
 
   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
+    <FlashList
       contentInsetAdjustmentBehavior="automatic"
+      keyboardShouldPersistTaps="handled"
       data={data}
+      estimatedItemSize={200}
       contentContainerClassName="py-4"
       extraData={searchValue}
+      <% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
       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>
-              );
-            }}
-          />
-        );
-      }}
+      <% } %>
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={renderItemSeparator}
+      renderItem={renderItem}
+      ListEmptyComponent={COMPONENTS.length === 0 ? ListEmptyComponent : undefined}
     />
   );
 }
 
-function Card({ children, title }: { children: React.ReactNode; title: string }) {
+function ListEmptyComponent() {
+  const insets = useSafeAreaInsets();
+  const dimensions = useWindowDimensions();
+  const headerHeight = useHeaderHeight();
+  const { colors } = useColorScheme();
+  const height = dimensions.height - headerHeight - insets.bottom - insets.top;
+
   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 style={{ height }} className="flex-1 items-center justify-center gap-1 px-12">
+      <Icon name="file-plus-outline" size={42} color={colors.grey} />
+        <Text variant='title3' className='pb-1 text-center font-semibold'>
+          No Components Installed
+        </Text>
+        <Text color='tertiary' variant='subhead' className='pb-4 text-center'>
+          You can install any of the free components from the{' '}
+          <Text
+            onPress={() => Linking.openURL('https://nativewindui.com')}
+            variant='subhead'
+            className='text-primary'
+          >
+            NativeWindUI
+          </Text>
+          {' website.'}
+        </Text>
       </View>
-    </View>
   );
 }
 
-function ToggleExample() {
-  const [switchValue, setSwitchValue] = React.useState(true);
+type ComponentItem = { name: string; component: React.FC };
+
+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="items-center">
-      <Toggle value={switchValue} onValueChange={setSwitchValue} />
+    <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 = [
+const COMPONENTS: ComponentItem[] = [
+  <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
+  {
+    name: 'Picker',
+    component: function PickerExample() {
+      const { colors } = useColorScheme();
+      const [picker, setPicker] = React.useState('blue');
+      return (
+        <Picker
+          selectedValue={picker}
+          onValueChange={(itemValue) => setPicker(itemValue)}
+        >
+          <PickerItem
+            label='Red'
+            value='red'
+            color={colors.foreground}
+            style={{
+              backgroundColor: colors.root,
+            }}
+          />
+          <PickerItem
+            label='Blue'
+            value='blue'
+            color={colors.foreground}
+            style={{
+              backgroundColor: colors.root,
+            }}
+          />
+          <PickerItem
+            label='Green'
+            value='green'
+            color={colors.foreground}
+            style={{
+              backgroundColor: colors.root,
+            }}
+          />
+        </Picker>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
+  {
+    name: 'Date Picker',
+    component: function DatePickerExample() {
+      const [date, setDate] = React.useState(new Date());
+      return (
+        <View className='items-center'>
+          <DatePicker
+            value={date}
+            mode='datetime'
+            onChange={(ev) => {
+              setDate(new Date(ev.nativeEvent.timestamp));
+            }}
+          />
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('segmented-control')) { %>
+  {
+    name: 'Segmented Controls',
+    component: function SegmentedControlsExample() {
+      const [segment, setSegment] = React.useState(0);
+      return (
+        <SegmentedControl
+          values={['red', 'green', 'blue']}
+          selectedIndex={segment}
+          onChange={(event) => {
+            setSegment(event.nativeEvent.selectedSegmentIndex);
+          }}
+        />
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
+  {
+    name: 'Slider',
+    component: function SliderExample() {
+      const [sliderValue, setSliderValue] = React.useState(0.5);
+      return <Slider value={sliderValue} onValueChange={setSliderValue} />;
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
   {
     name: 'Toggle',
-    component: ToggleExample,
+    component: function ToggleExample() {
+      const [switchValue, setSwitchValue] = React.useState(true);
+      return (
+        <View className='items-center'>
+          <Toggle value={switchValue} onValueChange={setSwitchValue} />
+        </View>
+      );
+    }
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('context-menu')) { %>
+  {
+    name: 'Context Menu',
+    component: function ContextMenuExample() {
+      const [isChecked, setIsChecked] = React.useState(true);
+      return (
+        <View>
+          <ContextMenu.Root style={{ borderRadius: 12 }}>
+            <ContextMenu.Trigger>
+              <View className='w-full h-36 rounded-xl border border-foreground border-dashed justify-center items-center'>
+                <Text>Press and hold me</Text>
+              </View>
+            </ContextMenu.Trigger>
+            <ContextMenu.Content>
+              <ContextMenu.Label children='Label 1' />
+              <ContextMenu.Item key='item-1'>
+                <ContextMenu.ItemTitle>Item 1</ContextMenu.ItemTitle>
+              </ContextMenu.Item>
+              <ContextMenu.Group>
+                <ContextMenu.Item key='item-2'>
+                  <ContextMenu.ItemTitle>Item 2</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+                <ContextMenu.CheckboxItem
+                  key='checkbox-example'
+                  value={isChecked}
+                  onValueChange={(val) => {
+                    setIsChecked(val === 'on');
+                  }}
+                >
+                  <ContextMenu.ItemTitle>Item 3</ContextMenu.ItemTitle>
+                  <ContextMenu.ItemIndicator />
+                </ContextMenu.CheckboxItem>
+              </ContextMenu.Group>
+              <ContextMenu.Separator />
+            </ContextMenu.Content>
+          </ContextMenu.Root>
+        </View>
+      );
+    },
   },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
+  {
+    name: 'Dropdown Menu',
+    component: function DropdownMenuExample() {
+      const { colors } = useColorScheme();
+      const [menu, setMenu] = React.useState<'primary' | 'destructive'>('primary');
 
+      return (
+        <View className='items-center'>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <Pressable className='flex-row items-center gap-1.5 android:gap-3'>
+                <Text>
+                  Selected: <Text style={{ color: colors[menu] }}>{menu}</Text>
+                </Text>
+                <View className='pl-0.5 opacity-70'>
+                  <Icon
+                    name='chevron-down'
+                    color={colors.foreground}
+                    size={21}
+                  />
+                </View>
+              </Pressable>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.CheckboxItem
+                key='destructive'
+                value={menu === 'destructive'}
+                onValueChange={() => {
+                  setMenu('destructive');
+                }}
+              >
+                <DropdownMenu.ItemIndicator />
+                <DropdownMenu.ItemTitle children='destructive' />
+              </DropdownMenu.CheckboxItem>
+              <DropdownMenu.CheckboxItem
+                key='primary'
+                value={menu === 'primary'}
+                onValueChange={() => {
+                  setMenu('primary');
+                }}
+              >
+                <DropdownMenu.ItemIndicator />
+                <DropdownMenu.ItemTitle children='primary' />
+              </DropdownMenu.CheckboxItem>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
+  {
+    name: 'Progress Indicator',
+    component: function ProgressIndicatorExample() {
+      const [progress, setProgress] = React.useState(13);
+      let id: ReturnType<typeof setInterval> | null = null;
+      React.useEffect(() => {
+        if (!id) {
+          id = setInterval(() => {
+            setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
+          }, Math.random() * 3000);
+        }
+        return () => {
+          if (id) clearInterval(id);
+        };
+      }, []);
+      return (
+        <View className='p-4'>
+          <ProgressIndicator value={progress} />
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
+  {
+    name: 'Activity Indicator',
+    component: function ActivityIndicatorExample() {
+      return (
+        <View className='p-4 items-center'>
+          <ActivityIndicator />
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
+  {
+    name: 'Alert',
+    component: function AlertExample() {
+      const { colors } = useColorScheme();
+      return (
+        <View className='items-center'>
+          <DefaultButton
+            color={colors.destructive}
+            onPress={() => {
+              if (Platform.OS === 'ios') {
+                Alert.prompt(
+                  'Delete account?',
+                  'Enter your password to delete your account.',
+                  [
+                    {
+                      text: 'Cancel',
+                      onPress: () => console.log('Cancel Pressed'),
+                      style: 'cancel',
+                    },
+                    {
+                      text: 'Delete',
+                      style: 'destructive',
+                      onPress: () => console.log('Delete Pressed'),
+                    },
+                  ],
+                  'secure-text',
+                  '',
+                  'default'
+                );
+              } else {
+                Alert.alert(
+                  'Delete account?',
+                  'Enter your password to delete your account.',
+                  [
+                    {
+                      text: 'Cancel',
+                      onPress: () => console.log('Cancel Pressed'),
+                      style: 'cancel',
+                    },
+                    {
+                      text: 'Delete',
+                      style: 'destructive',
+                      onPress: () => console.log('Delete Pressed'),
+                    },
+                  ]
+                );
+              }
+            }}
+            title='Delete account'
+          />
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+  {
+    name: 'Action Sheet',
+    component: function ActionSheetExample() {
+      const { colorScheme, colors } = useColorScheme();
+      const { showActionSheetWithOptions } = useActionSheet();
+      return (
+        <View className='items-center'>
+          <DefaultButton
+            color={'grey'}
+            onPress={async () => {
+              const options = ['Delete', 'Save', 'Cancel'];
+              const destructiveButtonIndex = 0;
+              const cancelButtonIndex = 2;
+
+              showActionSheetWithOptions(
+                {
+                  options,
+                  cancelButtonIndex,
+                  destructiveButtonIndex,
+                  containerStyle: {
+                    backgroundColor: colorScheme === 'dark' ? 'black' : 'white',
+                  },
+                  textStyle: {
+                    color: colors.foreground,
+                  },
+                },
+                (selectedIndex) => {
+                  switch (selectedIndex) {
+                    case 1:
+                      // Save
+                      break;
+
+                    case destructiveButtonIndex:
+                      // Delete
+                      break;
+
+                    case cancelButtonIndex:
+                    // Canceled
+                  }
+                }
+              );
+            }}
+            title='Open action sheet'
+          />
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('text')) { %>
   {
     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
+    component: function TextExample() {
+      return (
+        <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>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
+  {
+    name: 'Actionable Text',
+    component: function SelectableTextExample() {
+      return (
+        <Text uiTextView selectable>
+          Long press or double press this text
         </Text>
-      </View>
-    ),
+      );
+    },
   },
-] as const;
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
+  {
+    name: 'Ratings Indicator',
+    component: function RatingsIndicatorExample() {
+      React.useEffect(() => {
+        async function showRequestReview() {
+          if (await StoreReview.hasAction()) {
+            StoreReview.requestReview();
+          }
+        }
+        const timeout = setTimeout(() => {
+          showRequestReview();
+          wasAskedRef.current = true;
+        }, 1000);
+
+        return () => clearTimeout(timeout);
+      }, []);
 
-const FULL_SCREEN_COMPONENTS = [
+      return (
+        <View className="gap-3">
+          <Text className="pb-2 text-center font-semibold">Please follow the guidelines.</Text>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't call StoreReview.requestReview() from a button
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't request a review when the user is doing something time sensitive.
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't ask the user any questions before or while presenting the rating button or
+                card.
+              </Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
+  },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
   {
-    name: 'Drawer Navigation',
-    href: '/drawer/',
+    name: 'Activity View',
+    component: function ActivityViewExample() {
+      return (
+        <View className='items-center'>
+          <DefaultButton
+            onPress={async () => {
+              try {
+                const result = await Share.share({
+                  message: 'NativeWindUI | Familiar interface, native feel.',
+                });
+                if (result.action === Share.sharedAction) {
+                  if (result.activityType) {
+                    // shared with activity type of result.activityType
+                  } else {
+                    // shared
+                  }
+                } else if (result.action === Share.dismissedAction) {
+                  // dismissed
+                }
+              } catch (error: any) {
+                Alert.alert(error.message);
+              }
+            }}
+            title='Share a message'
+          />
+        </View>
+      );
+    },
   },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
   {
-    name: 'Bottom Tabs Navigation',
-    href: '/bottom-tabs/',
+    name: 'Bottom Sheet',
+    component: function BottomSheetExample() {
+      const { colorScheme } = useColorScheme();
+      const bottomSheetModalRef = useSheetRef();
+
+      return (
+        <View className='items-center'>
+          <DefaultButton
+            color={
+              colorScheme === 'dark' && Platform.OS === 'ios'
+                ? 'white'
+                : 'black'
+            }
+            title='Open Bottom Sheet'
+            onPress={() => bottomSheetModalRef.current?.present()}
+          />
+          <Sheet ref={bottomSheetModalRef} snapPoints={[200]}>
+            <View className='flex-1 justify-center items-center pb-8'>
+              <Text>@gorhom/bottom-sheet 🎉</Text>
+            </View>
+          </Sheet>
+        </View>
+      );
+    },
   },
+  <% } %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
   {
-    name: 'Top Tabs Navigation',
-    href: '/top-tabs/',
+    name: 'Avatar',
+    component: function AvatarExample() {
+      const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';
+      return (
+        <View className='items-center'>
+          <Avatar alt="Zach Nugent's Avatar">
+            <AvatarImage source={{ uri: GITHUB_AVATAR_URI }} />
+            <AvatarFallback>
+              <Text>ZN</Text>
+            </AvatarFallback>
+          </Avatar>
+        </View>
+      );
+    },
   },
-] as const;
+  <% } %>
+];
+