wip

components/List.tsx

@@ -0,0 +1,19 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { PropsWithChildren } from "react";
+
+interface Props extends ViewProps {}
+
+export const List: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800"
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};

components/ListItem.tsx

@@ -1,8 +1,13 @@
 import { PropsWithChildren, ReactNode } from "react";
-import { View, ViewProps } from "react-native";
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
 import { Text } from "./common/Text";
 
-interface Props extends ViewProps {
+interface Props extends TouchableOpacityProps {
   title?: string | null | undefined;
   subTitle?: string | null | undefined;
   children?: ReactNode;
@@ -17,7 +22,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
   ...props
 }) => {
   return (
-    <View
+    <TouchableOpacity
       className="flex flex-row items-center justify-between bg-neutral-900 p-4"
       {...props}
     >
@@ -26,6 +31,6 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
         {subTitle && <Text className="text-xs">{subTitle}</Text>}
       </View>
       {iconAfter}
-    </View>
+    </TouchableOpacity>
   );
 };