working on search

app/(root)/(tabs)/index.tsx

@@ -9,7 +9,6 @@ export default function Index() {
   return (
       <SafeAreaView className={'bg-white h-full'}>
           <View className={'px-5'}>
-              <Search />
               <View className={'flex flex-row items-center justify-between mt-5'}>
                   <View className={'flex flex-row items-cente'}>
                       <Image source={images.car1} className={'rounded-full size-24'}/>
@@ -21,6 +20,8 @@ export default function Index() {
                   <Image source={icons.bell} className={'size-6'}/>
               </View>
           </View>
+
+          <Search />
       </SafeAreaView>
   );
 }

components/Search.tsx

@@ -1,6 +1,7 @@
-import {View, Text} from 'react-native'
+import {View, Text, TextInput, SafeAreaView, Image} from 'react-native'
 import React, {useState} from 'react'
 import {useLocalSearchParams, usePathname} from "expo-router";
+import icons from "@/constants/icons";
 
 const Search = () => {
     const path = usePathname();
@@ -8,11 +9,20 @@ const Search = () => {
    const [search, setSearch] = useState(params.query);
 
    const handleSearch = (text: string) => {
+       // console.log(search)
        setSearch(text)
    }
     return (
-        <View>
-            <Text>Search</Text>
+        <View className={'flex flex-row items-center justify-between w-full px-4 rounded-lg border border-blue-200 mt-5 py-2'}>
+            <View className={'flex-1 flex flex-row items-center justify-start z-50'}>
+               <Image source={icons.search} className={'size-5'}/>
+                <TextInput
+                    value={search}
+                    onChangeText={handleSearch}
+                    placeholder={'Search...'}
+                    style={{flex: 1, marginLeft: 10}}
+                />
+            </View>
         </View>
     )
 }