fix: #79

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

@@ -1,3 +1,4 @@
+import { Button } from "@/components/Button";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
@@ -11,6 +12,7 @@ import SeriesPoster from "@/components/posters/SeriesPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
@@ -19,9 +21,21 @@ import {
 import { getItemsApi, getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { router, useNavigation } from "expo-router";
+import {
+  Href,
+  router,
+  useLocalSearchParams,
+  useNavigation,
+  usePathname,
+} from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useDebounce } from "use-debounce";
 
@@ -35,6 +49,10 @@ const exampleSearches = [
 ];
 
 export default function search() {
+  const params = useLocalSearchParams();
+
+  const { q, prev } = params as { q: string; prev: Href<string> };
+
   const [search, setSearch] = useState<string>("");
 
   const [debouncedSearch] = useDebounce(search, 500);
@@ -48,6 +66,10 @@ export default function search() {
     return settings?.searchEngine || "Jellyfin";
   }, [settings]);
 
+  useEffect(() => {
+    if (q && q.length > 0) setSearch(q);
+  }, [q]);
+
   const searchFn = useCallback(
     async ({
       types,
@@ -95,7 +117,10 @@ export default function search() {
       navigation.setOptions({
         headerSearchBarOptions: {
           placeholder: "Search...",
-          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
+          onChangeText: (e: any) => {
+            router.setParams({ q: "" });
+            setSearch(e.nativeEvent.text);
+          },
           hideWhenScrolling: false,
           autoFocus: true,
         },
@@ -196,6 +221,13 @@ export default function search() {
               />
             </View>
           )}
+          {!!q && (
+            <View className="px-4 flex flex-col space-y-2">
+              <Text className="text-neutral-500 ">
+                Results for <Text className="text-purple-600">{q}</Text>
+              </Text>
+            </View>
+          )}
           <SearchItemWrapper
             header="Movies"
             ids={movies?.map((m) => m.Id!)}

components/series/CastAndCrew.tsx

@@ -10,11 +10,13 @@ import Poster from "../posters/Poster";
 import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { router } from "expo-router";
+import { router, usePathname } from "expo-router";
 
 export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
   const [api] = useAtom(apiAtom);
 
+  const pathname = usePathname();
+
   return (
     <View>
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
@@ -23,7 +25,7 @@ export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
         renderItem={(item, index) => (
           <TouchableOpacity
             onPress={() => {
-              // TODO: Navigate to person
+              router.push(`/search?q=${item.Name}&prev=${pathname}`);
             }}
             key={item.Id}
             className="flex flex-col w-32"