movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 16:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: always focus input when search tab is pressed

Browse Source
This commit is contained in:
Adrian Castro
2024-02-20 20:38:02 +01:00
parent 987d051fee
commit b41f929f6e
3 changed files with 112 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
apps/expo/src/app/(tabs)/_layout.tsx
View File

@@ -1,3 +1,4 @@
import { useRef } from "react";
import { Platform, View } from "react-native"; import { Platform, View } from "react-native";
import { Tabs } from "expo-router"; import { Tabs } from "expo-router";
@@ -6,87 +7,102 @@ import Colors from "@movie-web/tailwind-config/colors";
import { MovieWebSvg } from "~/components/Icon"; import { MovieWebSvg } from "~/components/Icon";
import SvgTabBarIcon from "~/components/SvgTabBarIcon"; import SvgTabBarIcon from "~/components/SvgTabBarIcon";
import TabBarIcon from "~/components/TabBarIcon"; import TabBarIcon from "~/components/TabBarIcon";
import SearchTabContext from "./search/SearchTabContext";
export default function TabLayout() { export default function TabLayout() {
// eslint-disable-next-line @typescript-eslint/no-empty-function
const focusSearchInputRef = useRef(() => {});
return ( return (
<Tabs <SearchTabContext.Provider value={{ focusSearchInputRef }}>
sceneContainerStyle={{ <Tabs
backgroundColor: Colors.background, sceneContainerStyle={{
}} backgroundColor: Colors.background,
screenOptions={{ }}
headerShown: false, screenListeners={({ route }) => ({
tabBarActiveTintColor: Colors.primary[100], tabPress: () => {
tabBarStyle: { switch (route.name) {
backgroundColor: Colors.secondary[700], case "search":
borderTopColor: "transparent", focusSearchInputRef.current();
borderTopRightRadius: 20, break;
borderTopLeftRadius: 20, }
paddingBottom: Platform.select({ ios: 100 }),
height: 80,
},
tabBarItemStyle: {
paddingVertical: 18,
height: 82,
},
tabBarLabelStyle: [
{
marginTop: 2,
}, },
], })}
}} screenOptions={{
> headerShown: false,
<Tabs.Screen tabBarActiveTintColor: Colors.primary[100],
name="index" tabBarStyle: {
options={{ backgroundColor: Colors.secondary[700],
title: "Home", borderTopColor: "transparent",
tabBarIcon: ({ focused }) => ( borderTopRightRadius: 20,
<TabBarIcon name="home" focused={focused} /> borderTopLeftRadius: 20,
), paddingBottom: Platform.select({ ios: 100 }),
height: 80,
},
tabBarItemStyle: {
paddingVertical: 18,
height: 82,
},
tabBarLabelStyle: [
{
marginTop: 2,
},
],
}} }}
/> >
<Tabs.Screen <Tabs.Screen
name="downloads" name="index"
options={{ options={{
title: "Downloads", title: "Home",
tabBarIcon: ({ focused }) => ( tabBarIcon: ({ focused }) => (
<TabBarIcon name="download" focused={focused} /> <TabBarIcon name="home" focused={focused} />
), ),
}} }}
/> />
<Tabs.Screen <Tabs.Screen
name="search" name="downloads"
options={{ options={{
title: "Search", title: "Downloads",
tabBarLabel: "", tabBarIcon: ({ focused }) => (
tabBarIcon: ({ focused }) => ( <TabBarIcon name="download" focused={focused} />
<View ),
className={`android:top-2 ios:top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full ${focused ? "bg-primary-300" : "bg-primary-400"} text-center align-middle text-2xl text-white`} }}
> />
<TabBarIcon name="search" color="#FFF" /> <Tabs.Screen
</View> name="search"
), options={{
}} title: "Search",
/> tabBarLabel: "",
<Tabs.Screen tabBarIcon: ({ focused }) => (
name="movie-web" <View
options={{ className={`android:top-2 ios:top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full ${focused ? "bg-primary-300" : "bg-primary-400"} text-center align-middle text-2xl text-white`}
title: "movie-web", >
tabBarIcon: ({ focused }) => ( <TabBarIcon name="search" color="#FFF" />
<SvgTabBarIcon focused={focused}> </View>
<MovieWebSvg /> ),
</SvgTabBarIcon> }}
), />
}} <Tabs.Screen
/> name="movie-web"
<Tabs.Screen options={{
name="settings" title: "movie-web",
options={{ tabBarIcon: ({ focused }) => (
title: "Settings", <SvgTabBarIcon focused={focused}>
tabBarIcon: ({ focused }) => ( <MovieWebSvg />
<TabBarIcon name="cog" focused={focused} /> </SvgTabBarIcon>
), ),
}} }}
/> />
</Tabs> <Tabs.Screen
name="settings"
options={{
title: "Settings",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="cog" focused={focused} />
),
}}
/>
</Tabs>
</SearchTabContext.Provider>
); );
} }

8
apps/expo/src/app/(tabs)/search/SearchTabContext.tsx Normal file
View File

@@ -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;

12
apps/expo/src/app/(tabs)/search/Searchbar.tsx
View File

@@ -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 { TextInput, View } from "react-native";
import { useFocusEffect } from "expo-router"; import { useFocusEffect } from "expo-router";
import { FontAwesome5 } from "@expo/vector-icons"; import { FontAwesome5 } from "@expo/vector-icons";
import Colors from "@movie-web/tailwind-config/colors"; import Colors from "@movie-web/tailwind-config/colors";
import SearchTabContext from "./SearchTabContext";
export default function Searchbar({ export default function Searchbar({
onSearchChange, onSearchChange,
}: { }: {
@@ -13,6 +15,14 @@ export default function Searchbar({
const [keyword, setKeyword] = useState(""); const [keyword, setKeyword] = useState("");
const inputRef = useRef<TextInput>(null); const inputRef = useRef<TextInput>(null);
const { focusSearchInputRef } = useContext(SearchTabContext);
useEffect(() => {
focusSearchInputRef.current = () => {
inputRef.current?.focus();
};
}, [focusSearchInputRef]);
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
// When the screen is focused // When the screen is focused