A few changes:

Auto fill amount category edit
Empty list component
calendar filtering
in category screen, expenses can be added directly

components/budget/budgetHeader.tsx

@@ -4,7 +4,7 @@ import TextInputBar from "../common/TextInputBar";
 
 type BudgetHeaderProperties = {
     selectedPage: string,
-    handlePageSelection: (page: string) => void,
+    handlePageSelection: (page: "expense" | "saving") => void,
 }
 
 type PageSelectorButtonProperties = {
@@ -21,16 +21,16 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
         <View style={styles.containerStyle}>
             <PageSelectorButton 
                 label="Expenses"
-                isSelected={properties.selectedPage === "expenses"}
+                isSelected={properties.selectedPage === "expense"}
                 onPress={() => {
-                    properties.handlePageSelection("expenses")
+                    properties.handlePageSelection("expense")
                 }}
             />
             <PageSelectorButton 
                 label="Savings"
-                isSelected={properties.selectedPage === "savings"}
+                isSelected={properties.selectedPage === "saving"}
                 onPress={() => {
-                    properties.handlePageSelection("savings");
+                    properties.handlePageSelection("saving");
                 }}
             />
         </View>

components/common/EmptyListCompenent.tsx

@@ -0,0 +1,24 @@
+import { View, Text, StyleSheet } from 'react-native'
+import React from 'react'
+import { useTheme } from '../../app/contexts/ThemeContext'
+
+const EmptyListCompenent:React.FC = () => {
+  const {colors} = useTheme();
+  return (
+    <View style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
+      <Text style={[{fontSize: 20}, {color: colors.primaryText}]}>No matching Data</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    height: 70,
+    borderRadius: 20,
+  }
+})
+
+export default EmptyListCompenent

components/common/TextInputBar.tsx

@@ -42,7 +42,7 @@ export default function TextInputBar(props: SearchBarProps) {
   // changed styles.container to containerStyle
   return (
     <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={props.value} onEndEditing={()=>setIsactive(false)}/>
+        <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={props.value} onPressIn={()=>(setIsactive(true))} onEndEditing={()=>setIsactive(false)}/>
       
         {isActive &&
           <TouchableOpacity style={styles.cancel} onPress={()=>{

components/expense/CategorySelectorModal.tsx

@@ -6,6 +6,7 @@ import CategoryListItem from '../common/CategoryListItem';
 import { SIZES } from '../../constants/theme';
 import useFetch from '../../hooks/useFetch';
 import TextInputBar from '../common/TextInputBar';
+import EmptyListCompenent from '../common/EmptyListCompenent';
 
 
 interface CategorySelectorModalProps{
@@ -43,7 +44,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
   }, [visible])
 
   return (
-    <Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose}>
+    <Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose} animationType='slide'>
       <View style={styles.main}>
         <View style={[styles.modal, {backgroundColor: colors.containerColor}]}>
           <View>
@@ -57,6 +58,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
             ItemSeparatorComponent={() => <View style={styles.itemSeperatorStyle}/>}
             ListFooterComponent={() => <View style={styles.itemSeperatorStyle}/>}
             keyboardShouldPersistTaps="always"
+            ListEmptyComponent={EmptyListCompenent}
           >
           </FlatList>
 

components/index.tsx

@@ -16,6 +16,7 @@ import Plus from "./common/plus"
 import TextInputBar from "./common/TextInputBar"
 import AutoDecimalInput from "./common/AutoDecimalInput"
 import RoundedButton from "./common/RoundedButton"
+import EmptyListCompenent from "./common/EmptyListCompenent"
 
 //login
 import BudgetHeader from "./budget/budgetHeader"
@@ -45,6 +46,7 @@ export {
   CategoryItem,
   TypeSelectorSwitch,
   NavigationButton,
-  CustomColorPicker
+  CustomColorPicker,
+  EmptyListCompenent,
 }