feat: searchbar

components/common/searchBar/SearchBar.tsx

@@ -0,0 +1,68 @@
+import { View, Text, ViewProps, StyleSheet, Button } from 'react-native'
+import React from 'react'
+import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'
+import { AntDesign } from '@expo/vector-icons';
+import { useThemeColor } from '../../../hooks/hooks';
+import { SIZES } from '../../../constants/theme';
+
+type SearchBarProps = {placeholder: string} & ViewProps
+
+
+
+export default function SearchBar(props: SearchBarProps) {
+  const [isActive, setIsactive] = React.useState(false);
+
+  const backgroundColor = useThemeColor("backgroundColor");
+  const handleChange = (text:string) : void  =>  {
+    if(text !== ""){
+      if(!isActive){
+        setIsactive(true)
+      }
+    }else {
+      if(isActive){
+        setIsactive(false)
+      }
+    }
+  }
+
+//TODO: Handle textCancel
+  return (
+    <View style={styles.container}>
+        <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,
+    backgroundColor: "red", //tochange
+    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",
+  }
+})