feat: Add expense screen

components/common/CategoryListItem.tsx

@@ -0,0 +1,66 @@
+import { StyleSheet, Text, View, Pressable } from 'react-native'
+import React from 'react'
+import { Category } from '../../types/dbItems'
+import CustomCard from './CustomCard';
+import { SIZES } from '../../constants/theme';
+import { useTheme } from '../../app/contexts/ThemeContext';
+
+interface CategoryListItemProps{
+  category: Category;
+  onPress?: (category: Category) =>void | undefined
+}
+
+
+
+const CategoryListItem: React.FC<CategoryListItemProps> = (props: CategoryListItemProps) => {
+  const {category, onPress} = props;
+  const {colors} = useTheme();
+  
+  const handlePress = ()=>{
+    if(onPress){
+      onPress(category);
+    }
+  }
+
+  return (
+      <Pressable onPress={handlePress}>
+        <View style={[styles.tile, {backgroundColor: colors.backgroundColor}]}>
+          <View style={[styles.colorTip, {backgroundColor: category.color}]}/>
+          <View style={[styles.textWrapper]}>
+            <Text style={[styles.text, {color: colors.primaryText}]}>{category.name ?? "#noData#"}</Text>
+          </View>
+          <View style={styles.tileTail}/>
+        </View>
+      </Pressable>
+  )
+}
+
+export default CategoryListItem
+
+const styles = StyleSheet.create({
+  tile: {
+    height: 60,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 20
+  },
+  colorTip:{
+    height: "100%",
+    width: 30,
+    borderTopLeftRadius:20,
+    borderBottomLeftRadius: 20
+  },
+  textWrapper: {
+   
+  },
+  tileTail:{
+    height: "100%",
+    width: 30,
+    borderTopRightRadius:20,
+    borderBottomRightRadius: 20
+  },
+  text: {
+    fontSize: SIZES.large,
+  }
+})