feat: searchbar

app/index.tsx

@@ -1,8 +1,8 @@
 import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { useThemeColor } from "../hooks/hooks";
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { ExpenseItem, Plus, Welcome } from '../components';
-import { FlatList } from 'react-native-gesture-handler';
+import { ExpenseItem, Plus, Welcome, SearchBar } from '../components';
+import { FlatList, TextInput } from 'react-native-gesture-handler';
 import { useRef, useState } from 'react';
 import React from 'react';
 
@@ -50,23 +50,25 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView>
+        <SafeAreaView style={{flex: 1}}>
            {plusShow && <Plus/>}
             {/* <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> */}
 
             <FlatList
             data={data}
-            ListHeaderComponent={<Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome>
+            ListHeaderComponent={
+                <>
+                <Welcome name="My Dude" image={profile} onPress={()=>console.log("hello")}></Welcome>
+                <SearchBar placeholder='Type to Search...'></SearchBar>
+                </>
             }
             renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
             keyExtractor={item => item.id}
             ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
             onScroll={handleScroll}
             scrollEventThrottle={20}
-        
             >
             </FlatList>            
-            
         </SafeAreaView>
         
     );

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

components/index.jsx

@@ -4,10 +4,12 @@ import Welcome from "./home/Welcome/Welcome"
 
 //common
 import Plus from "./common/plus/plus"
+import SearchBar from "./common/searchBar/SearchBar"
 
 export {
   ExpenseItem,
   Welcome,
-  Plus
+  Plus,
+  SearchBar
 }