Improve search layouts.

app/_layout.tsx

@@ -47,12 +47,10 @@ function AuthenticatedLayout() {
         <Label>{t("settings.titles.settings")}</Label>
       </NativeTabs.Trigger>
       <NativeTabs.Trigger name="search" role="search">
-            {Platform.select({
+        {Platform.select({
           //ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
           android: (
-            <Icon
-              src={<VectorIcon family={MaterialIcons} name="search" />}
-            />
+            <Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
           ),
         })}
         <Label>Search</Label>

app/search/_layout.tsx

@@ -11,6 +11,8 @@ export default function SearchLayout() {
           headerSearchBarOptions: {
             placement: "automatic",
             placeholder: "Search",
+            autoFocus: true,
+            shouldShowHintSearchIcon: true,
             onChangeText: (event) => {
               router.setParams({
                 globalSearch: event?.nativeEvent?.text,

app/search/index.tsx

@@ -1,12 +1,4 @@
-import { useLocalSearchParams } from "expo-router";
-import { ScrollView } from "react-native";
-import { Text } from "react-native-paper";
-
+import GlobalSearch from "../../components/global-search/global-search";
 export default function SearchIndex() {
-  const { globalSearch } = useLocalSearchParams();
-  return (
-    <ScrollView>
-      <Text>Some search results here for: {globalSearch}</Text>
-    </ScrollView>
-  );
+  return <GlobalSearch />;
 }