feat: Add expense screen

components/common/AutoDecimalInput.tsx

@@ -1,6 +1,5 @@
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
 import React, {LegacyRef, MutableRefObject, useRef, useState} from 'react'
-import colors from '../../constants/colors';
 import { SIZES } from '../../constants/theme';
 import { useTheme } from '../../app/contexts/ThemeContext';
 
@@ -69,17 +68,15 @@ const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label
 }
 
 const styles = StyleSheet.create({
-  container: {
-    margin: SIZES.normal,
-  },
   inputContainer: {
+    minHeight: 50,
     borderRadius: 20,
     flexDirection: "row",
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    alignItems: "center"
   },
   text:{
     fontSize: SIZES.large,
-    marginVertical: 12,
     marginHorizontal: 15,
   },
   currency: {

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,
+  }
+})

components/common/CustomCard.tsx

@@ -39,10 +39,7 @@ export default function CustomCard(props : ViewProps) {
 
 const styles = StyleSheet.create({
   container:{
-    flexDirection: "row",
-    alignItems: "stretch",
-    alignContent: "space-between",
-    borderRadius: 10,
+    borderRadius: 20,
     marginHorizontal: 10,
   },
   boxShadow: {},

components/common/RoundedButton.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View, ViewProps, TouchableOpacity } from 'react-native'
+import React from 'react'
+import { SIZES } from '../../constants/theme';
+
+interface RoundedButtonProps extends ViewProps{
+  onPress?: ()=> void | undefined;
+  color: string;
+}
+
+const RoundedButton: React.FC<RoundedButtonProps> = (props: RoundedButtonProps) => {
+  const {onPress, color, style, ...restProps} = props;
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View style={[{backgroundColor: color}, styles.btn, style]}{...restProps}>
+        {restProps.children}
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export default RoundedButton
+
+const styles = StyleSheet.create({
+  btn:{
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 80
+  },
+  text: {
+    fontSize: SIZES.normal
+  }
+})

components/common/TextInputBar.tsx

@@ -42,12 +42,12 @@ export default function TextInputBar(props: SearchBarProps) {
   //TODO: Handle textCancel
   // changed styles.container to containerStyle
   return (
-    <View style={containerStyle}>
-        <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={text}/>
+    <View style={[containerStyle, props.style]}>
+        <TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={text} onFocus={()=>handleChange(text)} onEndEditing={()=>setIsactive(false)}/>
       
         {isActive &&
           <TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>
-            <AntDesign size={15} name='closecircle'></AntDesign>
+            <AntDesign size={15} name='closecircle' color={colors.primaryText}></AntDesign>
           </TouchableOpacity>
         }
       </View>
@@ -56,8 +56,6 @@ export default function TextInputBar(props: SearchBarProps) {
 
 const styles = StyleSheet.create({
   container: {
-    marginHorizontal: 10,
-    marginBottom: 20,
     flexDirection: 'row',
     justifyContent: "center",
     alignItems: "center",