feat: Add expense screen

components/home/addItem/CategorySelector.tsx

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import React, { useState } from 'react'
+import { useTheme } from '../../../app/contexts/ThemeContext'
+import { SIZES } from '../../../constants/theme';
+import { Category } from '../../../types/dbItems';
+import CategorySelectorModal from './CategorySelectorModal';
+
+interface CategorySelectorProps {
+  onPress? : () => void | undefined;
+  selectedCategory? : Category;
+}
+
+const CategorySelector: React.FC<CategorySelectorProps> = (props : CategorySelectorProps) => {
+  const {colors} = useTheme();
+  
+
+  return (
+    <>
+    <TouchableOpacity style={[styles.tile, {backgroundColor: colors.backgroundColor}]} onPress={props.onPress}>
+      <View style={[styles.colorTip, {backgroundColor: props.selectedCategory?.color}]}>
+
+      </View>
+      <View style={[styles.textWrapper]}>
+        <Text style={[styles.text, {color: colors.primaryText}]}>{props.selectedCategory?.name ?? "Tap to select Categroy"}</Text>
+      </View>
+      <View style={styles.tileTail}></View>
+    </TouchableOpacity>
+    </>
+  )
+}
+
+export default CategorySelector
+
+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,
+  }
+})