first setup

apps/mobile/app/(tabs)/search/Searchbar.tsx

@@ -1,10 +1,11 @@
 import { FontAwesome5 } from '@expo/vector-icons';
+import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
+
+import Colors from '../../../constants/Colors.js';
 import { globalStyles } from '../../../styles/global';
-import Colors from '../../../constants/Colors';
-import { useFocusEffect } from 'expo-router';
 
 export default function Searchbar() {
   const [keyword, setKeyword] = useState('');
@@ -24,41 +25,19 @@ export default function Searchbar() {
   );
 
   return (
-    <View
-      style={{
-        ...globalStyles.flexRow,
-        ...globalStyles.itemsCenter,
-        ...globalStyles.border,
-        ...globalStyles.roundedFull,
-        marginTop: 14,
-        marginBottom: 24,
-      }}
-    >
-      <View
-        style={{
-          ...globalStyles.justifyCenter,
-          ...globalStyles.itemsCenter,
-          width: 48,
-          marginLeft: 4,
-        }}
-      >
-        <FontAwesome5 name="search" size={18} color={Colors.dark.shade200} />
+    <View className="mb-6 mt-4 flex-row items-center rounded-full border">
+      <View className="ml-1 w-12 items-center justify-center">
+        <FontAwesome5 name="search" size={18} color={Colors.shade[200]} />
       </View>
       <TextInput
         value={keyword}
-        autoFocus={true}
+        autoFocus
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.dark.shade200}
-        style={[
-          globalStyles.input,
-          globalStyles.fOpenSansRegular,
-          {
-            width: '100%',
-          },
-        ]}
-      ></TextInput>
+        placeholderTextColor={Colors.shade[200]}
+        className="rounded-3xl py-3 pr-5 text-white"
+      />
     </View>
   );
 }

apps/mobile/app/(tabs)/search/_layout.tsx

@@ -1,37 +1,37 @@
-import { Dimensions, ScrollView, View } from 'react-native';
-
-import { globalStyles } from '../../../styles/global';
-import ScreenLayout from '../../../components/layout/screenLayout';
-import { TextInput } from 'react-native-gesture-handler';
-import styles from './styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusEffect } from 'expo-router';
-import { BoldText } from '../../../components/Styled';
-import Item from '../../../components/item/item';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Dimensions, ScrollView, View } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
+
 import Searchbar from './Searchbar';
+import styles from './styles';
+import Item from '../../../components/item/item';
+import ScreenLayout from '../../../components/layout/ScreenLayout';
+import { BoldText } from '../../../components/ui/Text';
+import { globalStyles } from '../../../styles/global';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <View
-            style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
-          >
-            <BoldText style={globalStyles.sectionTitle}>Search</BoldText>
+          <View className="flex-row items-center">
+            <BoldText className="text-2xl font-bold text-white">
+              Search
+            </BoldText>
           </View>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <View style={styles.items}>
-          <View style={styles.itemOuter}>
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
         </View>