feat: refactor home screen

app/(auth)/(tabs)/_layout.tsx

@@ -25,9 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          headerShown: true,
-          headerStyle: { backgroundColor: "black" },
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Home",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon
@@ -35,39 +33,12 @@ export default function TabLayout() {
               color={color}
             />
           ),
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{ marginHorizontal: 17 }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-            >
-              <Feather name="download" color={"white"} size={22} />
-            </TouchableOpacity>
-          ),
-          headerRight: () => (
-            <View className="flex flex-row items-center space-x-2">
-              <Chromecast />
-              <TouchableOpacity
-                style={{ marginRight: 17 }}
-                onPress={() => {
-                  router.push("/(auth)/settings");
-                }}
-              >
-                <View className="h-10 aspect-square flex items-center justify-center rounded">
-                  <Feather name="settings" color={"white"} size={22} />
-                </View>
-              </TouchableOpacity>
-            </View>
-          ),
         }}
       />
       <Tabs.Screen
         name="search"
         options={{
-          headerStyle: { backgroundColor: "black" },
-          headerShown: true,
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Search",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? "search" : "search"} color={color} />

app/(auth)/(tabs)/index/_layout.tsx

@@ -0,0 +1,48 @@
+import { Chromecast } from "@/components/Chromecast";
+import { Feather } from "@expo/vector-icons";
+import { Stack, useRouter } from "expo-router";
+import { Platform, View } from "react-native";
+import { TouchableOpacity } from "react-native";
+
+export default function IndexLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Home",
+          headerStyle: { backgroundColor: "black" },
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{
+                marginRight: Platform.OS === "android" ? 17 : 0,
+              }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={"white"} size={22} />
+            </TouchableOpacity>
+          ),
+          headerRight: () => (
+            <View className="flex flex-row items-center space-x-2">
+              <Chromecast />
+              <TouchableOpacity
+                onPress={() => {
+                  router.push("/(auth)/settings");
+                }}
+              >
+                <View className="h-10 aspect-square flex items-center justify-center rounded">
+                  <Feather name="settings" color={"white"} size={22} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          ),
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -237,6 +237,7 @@ export default function index() {
   return (
     <ScrollView
       nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }

app/(auth)/(tabs)/search/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+
+export default function SearchLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="search"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Search",
+          headerStyle: { backgroundColor: "black" },
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/search/search.tsx

@@ -11,10 +11,10 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
+import { router, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import React, { useLayoutEffect, useState } from "react";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 
 export default function search() {
   const [search, setSearch] = useState<string>("");
@@ -22,6 +22,18 @@ export default function search() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  const navigation = useNavigation();
+  useLayoutEffect(() => {
+    if (Platform.OS === "ios")
+      navigation.setOptions({
+        headerSearchBarOptions: {
+          placeholder: "Search...",
+          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
+          hideWhenScrolling: false,
+        },
+      });
+  }, [navigation]);
+
   const { data: movies } = useQuery({
     queryKey: ["search-movies", search],
     queryFn: async () => {
@@ -67,19 +79,23 @@ export default function search() {
   });
 
   return (
-    <ScrollView keyboardDismissMode="on-drag">
+    <ScrollView
+      keyboardDismissMode="on-drag"
+      contentInsetAdjustmentBehavior="automatic"
+    >
       <View className="flex flex-col pt-2 pb-20">
-        <View className="mb-4 px-4">
-          <Input
-            autoCorrect={false}
-            returnKeyType="done"
-            keyboardType="web-search"
-            placeholder="Search here..."
-            value={search}
-            onChangeText={(text) => setSearch(text)}
-          />
-        </View>
-
+        {Platform.OS === "android" && (
+          <View className="mb-4 px-4">
+            <Input
+              autoCorrect={false}
+              returnKeyType="done"
+              keyboardType="web-search"
+              placeholder="Search here..."
+              value={search}
+              onChangeText={(text) => setSearch(text)}
+            />
+          </View>
+        )}
         <Text className="font-bold text-2xl px-4 mb-2">Movies</Text>
         <SearchItemWrapper
           ids={movies?.map((m) => m.Id!)}