diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index e927659..84c88b0 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
import { Platform, View } from "react-native";
import { Tabs } from "expo-router";
@@ -6,87 +7,102 @@ import Colors from "@movie-web/tailwind-config/colors";
import { MovieWebSvg } from "~/components/Icon";
import SvgTabBarIcon from "~/components/SvgTabBarIcon";
import TabBarIcon from "~/components/TabBarIcon";
+import SearchTabContext from "./search/SearchTabContext";
export default function TabLayout() {
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ const focusSearchInputRef = useRef(() => {});
+
return (
-
+ ({
+ tabPress: () => {
+ switch (route.name) {
+ case "search":
+ focusSearchInputRef.current();
+ break;
+ }
},
- ],
- }}
- >
- (
-
- ),
+ })}
+ screenOptions={{
+ headerShown: false,
+ tabBarActiveTintColor: Colors.primary[100],
+ tabBarStyle: {
+ backgroundColor: Colors.secondary[700],
+ borderTopColor: "transparent",
+ borderTopRightRadius: 20,
+ borderTopLeftRadius: 20,
+ paddingBottom: Platform.select({ ios: 100 }),
+ height: 80,
+ },
+ tabBarItemStyle: {
+ paddingVertical: 18,
+ height: 82,
+ },
+ tabBarLabelStyle: [
+ {
+ marginTop: 2,
+ },
+ ],
}}
- />
- (
-
- ),
- }}
- />
- (
-
-
-
- ),
- }}
- />
- (
-
-
-
- ),
- }}
- />
- (
-
- ),
- }}
- />
-
+ >
+ (
+
+ ),
+ }}
+ />
+ (
+
+ ),
+ }}
+ />
+ (
+
+
+
+ ),
+ }}
+ />
+ (
+
+
+
+ ),
+ }}
+ />
+ (
+
+ ),
+ }}
+ />
+
+
);
}
diff --git a/apps/expo/src/app/(tabs)/search/SearchTabContext.tsx b/apps/expo/src/app/(tabs)/search/SearchTabContext.tsx
new file mode 100644
index 0000000..ab67870
--- /dev/null
+++ b/apps/expo/src/app/(tabs)/search/SearchTabContext.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+const SearchTabContext = React.createContext({
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ focusSearchInputRef: { current: () => {} },
+});
+
+export default SearchTabContext;
diff --git a/apps/expo/src/app/(tabs)/search/Searchbar.tsx b/apps/expo/src/app/(tabs)/search/Searchbar.tsx
index 0125e92..a662ec8 100644
--- a/apps/expo/src/app/(tabs)/search/Searchbar.tsx
+++ b/apps/expo/src/app/(tabs)/search/Searchbar.tsx
@@ -1,10 +1,12 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { TextInput, View } from "react-native";
import { useFocusEffect } from "expo-router";
import { FontAwesome5 } from "@expo/vector-icons";
import Colors from "@movie-web/tailwind-config/colors";
+import SearchTabContext from "./SearchTabContext";
+
export default function Searchbar({
onSearchChange,
}: {
@@ -13,6 +15,14 @@ export default function Searchbar({
const [keyword, setKeyword] = useState("");
const inputRef = useRef(null);
+ const { focusSearchInputRef } = useContext(SearchTabContext);
+
+ useEffect(() => {
+ focusSearchInputRef.current = () => {
+ inputRef.current?.focus();
+ };
+ }, [focusSearchInputRef]);
+
useFocusEffect(
useCallback(() => {
// When the screen is focused