Resolve "Budget"

components/common/SearchBar.tsx

@@ -0,0 +1,73 @@
+import { AntDesign } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
+import { SIZES } from '../../constants/theme';
+import { useThemeColor } from '../../hooks/useThemeColor';
+
+type SearchBarProps = {placeholder: string} & ViewProps
+
+export default function SearchBar(props: SearchBarProps) {
+  const [isActive, setIsactive] = React.useState(false);
+
+  const textColor = useThemeColor("interactiveText")
+  const backgroundColor = useThemeColor("elementDefaultColor");
+
+  const handleChange = (text:string) : void  =>  {
+    if(text !== ""){
+      if(!isActive){
+        setIsactive(true)
+      }
+    }else {
+      if(isActive){
+        setIsactive(false)
+      }
+    }
+  }
+
+  // cant apply the background color otherwise
+  const containerStyle = {
+    ...styles.container,
+    backgroundColor: backgroundColor // apply dynamic background color
+  };
+
+  //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='web-search' placeholder={props.placeholder}></TextInput>
+      
+        {isActive &&
+          <TouchableOpacity style={styles.cancel}>
+            <AntDesign size={15} name='closecircle'></AntDesign>
+          </TouchableOpacity>
+        }
+      </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginBottom: 20,
+    flexDirection: 'row',
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    borderRadius: 10,
+    paddingHorizontal: 10
+  },
+  TextInput: {
+    flex: 1,
+    height: "100%",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row",
+    width: "100%",
+  },
+  cancel:{
+    height: "100%", 
+    width: 30, 
+    justifyContent: "center", 
+    alignItems:"center",
+  }
+})