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

add switch theme, remove unneeded search bar context

Browse Source
This commit is contained in:
Jorrin
2024-03-23 16:29:28 +01:00
parent 7308eb2221
commit 4ec78b13ab
10 changed files with 169 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
import { useRef } from "react";
import { Platform } from "react-native";
import * as Haptics from "expo-haptics";
import { Tabs } from "expo-router";
@@ -8,119 +7,108 @@ import { useTheme, View } from "tamagui";
import { MovieWebSvg } from "~/components/Icon";
import SvgTabBarIcon from "~/components/SvgTabBarIcon";
import TabBarIcon from "~/components/TabBarIcon";
import SearchTabContext from "../../components/ui/SearchTabContext";
export default function TabLayout() {
// eslint-disable-next-line @typescript-eslint/no-empty-function
const focusSearchInputRef = useRef(() => {});
const theme = useTheme();
return (
<SearchTabContext.Provider value={{ focusSearchInputRef }}>
<Tabs
sceneContainerStyle={{
backgroundColor: theme.screenBackground.val,
<Tabs
sceneContainerStyle={{
backgroundColor: theme.screenBackground.val,
}}
screenListeners={() => ({
tabPress: () => {
void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
},
focus: () => {
void ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
},
})}
screenOptions={{
headerShown: false,
tabBarActiveTintColor: theme.tabBarIconFocused.val,
tabBarStyle: {
backgroundColor: theme.tabBarBackground.val,
borderTopColor: "transparent",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingBottom: Platform.select({ ios: 100 }),
height: 80,
},
tabBarItemStyle: {
paddingVertical: 18,
height: 82,
},
tabBarLabelStyle: [
{
marginTop: 2,
},
],
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="home" focused={focused} />
),
}}
screenListeners={({ route }) => ({
tabPress: () => {
void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
switch (route.name) {
case "search":
focusSearchInputRef.current();
break;
}
},
focus: () => {
void ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
},
})}
screenOptions={{
headerShown: false,
tabBarActiveTintColor: theme.tabBarIconFocused.val,
tabBarStyle: {
backgroundColor: theme.tabBarBackground.val,
borderTopColor: "transparent",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingBottom: Platform.select({ ios: 100 }),
height: 80,
},
tabBarItemStyle: {
paddingVertical: 18,
height: 82,
},
tabBarLabelStyle: [
{
marginTop: 2,
},
],
/>
<Tabs.Screen
name="downloads"
options={{
title: "Downloads",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="download" focused={focused} />
),
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="home" focused={focused} />
),
}}
/>
<Tabs.Screen
name="downloads"
options={{
title: "Downloads",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="download" focused={focused} />
),
}}
/>
<Tabs.Screen
name="search"
options={{
title: "Search",
tabBarLabel: "",
tabBarIcon: ({ focused }) => (
<View
top={2}
height={56}
width={56}
alignItems="center"
justifyContent="center"
overflow="hidden"
borderRadius={100}
backgroundColor={
focused ? theme.tabBarIconFocused : theme.tabBarIcon
}
>
<TabBarIcon name="search" color="#FFF" />
</View>
),
}}
/>
<Tabs.Screen
name="movie-web"
options={{
title: "movie-web",
tabBarIcon: ({ focused }) => (
<SvgTabBarIcon focused={focused}>
<MovieWebSvg />
</SvgTabBarIcon>
),
}}
/>
<Tabs.Screen
name="settings"
options={{
title: "Settings",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="cog" focused={focused} />
),
}}
/>
</Tabs>
</SearchTabContext.Provider>
/>
<Tabs.Screen
name="search"
options={{
title: "Search",
tabBarLabel: "",
tabBarIcon: ({ focused }) => (
<View
top={2}
height={56}
width={56}
alignItems="center"
justifyContent="center"
overflow="hidden"
borderRadius={100}
backgroundColor={
focused ? theme.tabBarIconFocused : theme.tabBarIcon
}
>
<TabBarIcon name="search" color="#FFF" />
</View>
),
}}
/>
<Tabs.Screen
name="movie-web"
options={{
title: "movie-web",
tabBarIcon: ({ focused }) => (
<SvgTabBarIcon focused={focused}>
<MovieWebSvg />
</SvgTabBarIcon>
),
}}
/>
<Tabs.Screen
name="settings"
options={{
title: "Settings",
tabBarIcon: ({ focused }) => (
<TabBarIcon name="cog" focused={focused} />
),
}}
/>
</Tabs>
);
}

10
apps/expo/src/app/(tabs)/settings.tsx
View File

@@ -11,7 +11,6 @@ import {
Select,
Separator,
Sheet,
Switch,
Text,
useTheme,
View,
@@ -21,6 +20,7 @@ import {
import type { ThemeStoreOption } from "~/stores/theme";
import ScreenLayout from "~/components/layout/ScreenLayout";
import { MWSwitch } from "~/components/ui/Switch";
import { checkForUpdate } from "~/lib/update";
import { getGestureControls, saveGestureControls } from "~/settings";
import { useThemeStore } from "~/stores/theme";
@@ -76,14 +76,12 @@ export default function SettingsScreen() {
<XStack width={200} alignItems="center" gap="$4">
<Label minWidth={110}>Gesture controls</Label>
<Separator minHeight={20} vertical />
<Switch
size="$4"
native
<MWSwitch
checked={gestureControlsEnabled}
onCheckedChange={handleGestureControlsToggle}
>
<Switch.Thumb animation="quicker" />
</Switch>
<MWSwitch.Thumb animation="quicker" />
</MWSwitch>
</XStack>
</YStack>
</View>