feat: now has onchange functionality. clear works now

components/common/SearchBar.tsx

@@ -1,14 +1,18 @@
 import { AntDesign } from '@expo/vector-icons';
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
 import { SIZES } from '../../constants/theme';
 import { useTheme } from '../../app/contexts/ThemeContext';
 
-type SearchBarProps = {placeholder: string} & ViewProps
+interface SearchBarProps extends ViewProps {
+  placeholder? : string;
+  onChangeText? : (text: string) => void | undefined
+}
 
 export default function SearchBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
   const { colors } = useTheme();
+  const [text, setText] = useState<string>("");
 
   const textColor = colors
   const backgroundColor = colors.elementDefaultColor;
@@ -23,6 +27,10 @@ export default function SearchBar(props: SearchBarProps) {
         setIsactive(false)
       }
     }
+    if(props.onChangeText){
+      props.onChangeText(text)
+    }
+    setText(text)
   }
 
   // cant apply the background color otherwise
@@ -35,10 +43,10 @@ export default function SearchBar(props: SearchBarProps) {
   // 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>
+        <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder} value={text}/>
       
         {isActive &&
-          <TouchableOpacity style={styles.cancel}>
+          <TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>
             <AntDesign size={15} name='closecircle'></AntDesign>
           </TouchableOpacity>
         }