refactor: remove deprecated components and unused packages

app/index.tsx

@@ -8,24 +8,19 @@ import * as React from 'react';
 import {
   Alert,
   Button as RNButton,
-  ButtonProps,
   Linking,
   Platform,
-  Pressable,
   Share,
   useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import * as ContextMenu from 'zeego/context-menu';
-import * as DropdownMenu from 'zeego/dropdown-menu';
 
 import { ActivityIndicator } from '~/components/nativewindui/ActivityIndicator';
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewindui/Avatar';
 import { DatePicker } from '~/components/nativewindui/DatePicker';
 import { Picker, PickerItem } from '~/components/nativewindui/Picker';
 import { ProgressIndicator } from '~/components/nativewindui/ProgressIndicator';
-import { SegmentedControl } from '~/components/nativewindui/SegmentedControl';
 import { Sheet, useSheetRef } from '~/components/nativewindui/Sheet';
 import { Slider } from '~/components/nativewindui/Slider';
 import { Text } from '~/components/nativewindui/Text';
@@ -38,11 +33,6 @@ cssInterop(FlashList, {
   contentContainerClassName: 'contentContainerStyle',
 });
 
-function DefaultButton({ color, ...props }: ButtonProps) {
-  const { colors } = useColorScheme();
-  return <RNButton color={color ?? colors.primary} {...props} />;
-}
-
 export default function Screen() {
   const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
 
@@ -179,23 +169,6 @@ const COMPONENTS: ComponentItem[] = [
       );
     },
   },
-
-  {
-    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);
-          }}
-        />
-      );
-    },
-  },
-
   {
     name: 'Slider',
     component: function SliderExample() {
@@ -215,91 +188,6 @@ const COMPONENTS: ComponentItem[] = [
       );
     },
   },
-
-  {
-    name: 'Context Menu',
-    component: function ContextMenuExample() {
-      const [isChecked, setIsChecked] = React.useState(true);
-      return (
-        <View>
-          <ContextMenu.Root style={{ borderRadius: 12 }}>
-            <ContextMenu.Trigger>
-              <View className="h-36 w-full items-center justify-center rounded-xl border border-dashed border-foreground">
-                <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>
-      );
-    },
-  },
-
-  {
-    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="android:gap-3 flex-row items-center gap-1.5">
-                <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>
-      );
-    },
-  },
-
   {
     name: 'Progress Indicator',
     component: function ProgressIndicatorExample() {
@@ -333,66 +221,14 @@ const COMPONENTS: ComponentItem[] = [
       );
     },
   },
-
-  {
-    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>
-      );
-    },
-  },
-
   {
     name: 'Action Sheet',
     component: function ActionSheetExample() {
       const { colorScheme, colors } = useColorScheme();
       const { showActionSheetWithOptions } = useActionSheet();
       return (
         <View className="items-center">
-          <DefaultButton
+          <RNButton
             color="grey"
             onPress={async () => {
               const options = ['Delete', 'Save', 'Cancel'];
@@ -550,9 +386,11 @@ const COMPONENTS: ComponentItem[] = [
   {
     name: 'Activity View',
     component: function ActivityViewExample() {
+      const { colors } = useColorScheme();
       return (
         <View className="items-center">
-          <DefaultButton
+          <RNButton
+            color={colors.primary}
             onPress={async () => {
               try {
                 const result = await Share.share({
@@ -586,7 +424,7 @@ const COMPONENTS: ComponentItem[] = [
 
       return (
         <View className="items-center">
-          <DefaultButton
+          <RNButton
             color={colorScheme === 'dark' && Platform.OS === 'ios' ? 'white' : 'black'}
             title="Open Bottom Sheet"
             onPress={() => bottomSheetModalRef.current?.present()}

components/nativewindui/DatePicker/index.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package.json

@@ -14,15 +14,10 @@
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.0.1",
-    "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "^4",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
-    "@react-native-menu/menu": "^1.0.3",
     "@react-native-picker/picker": "2.7.5",
-    "@react-native-segmented-control/segmented-control": "2.5.2",
-    "@react-navigation/bottom-tabs": "^6.5.8",
-    "@react-navigation/drawer": "^6.6.6",
     "@react-navigation/native": "^6.1.7",
     "@roninoss/icons": "^0.0.4",
     "@shopify/flash-list": "1.6.4",
@@ -37,22 +32,17 @@
     "expo-status-bar": "~1.12.1",
     "expo-store-review": "~7.0.2",
     "expo-system-ui": "~3.0.6",
-    "expo-web-browser": "~13.0.3",
     "nativewind": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.2",
     "react-native-gesture-handler": "~2.16.2",
-    "react-native-ios-context-menu": "^2.5.0",
-    "react-native-ios-utilities": "^4.4.0",
-    "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "~3.31.1",
     "react-native-uitextview": "^1.1.4",
     "react-native-web": "~0.19.10",
-    "tailwind-merge": "^2.2.1",
-    "zeego": "^1.9.1"
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",