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