refactor to tamagui

apps/expo/src/app/(tabs)/_layout.tsx

@@ -1,10 +1,9 @@
 import { useRef } from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Platform } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Tabs } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
-
-import { defaultTheme } from "@movie-web/tailwind-config/themes";
+import { useTheme, View } from "tamagui";
 
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
@@ -15,11 +14,13 @@ 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: defaultTheme.extend.colors.background.main,
+          backgroundColor: theme.screenBackground.val,
         }}
         screenListeners={({ route }) => ({
           tabPress: () => {
@@ -38,9 +39,9 @@ export default function TabLayout() {
         })}
         screenOptions={{
           headerShown: false,
-          tabBarActiveTintColor: defaultTheme.extend.colors.tabBar.active,
+          tabBarActiveTintColor: theme.tabBarIconFocused.val,
           tabBarStyle: {
-            backgroundColor: defaultTheme.extend.colors.tabBar.background,
+            backgroundColor: theme.tabBarBackground.val,
             borderTopColor: "transparent",
             borderTopRightRadius: 20,
             borderTopLeftRadius: 20,
@@ -83,10 +84,16 @@ export default function TabLayout() {
             tabBarLabel: "",
             tabBarIcon: ({ focused }) => (
               <View
-                style={[
-                  styles.searchTab,
-                  focused ? styles.active : styles.inactive,
-                ]}
+                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>
@@ -117,22 +124,3 @@ export default function TabLayout() {
     </SearchTabContext.Provider>
   );
 }
-
-const styles = StyleSheet.create({
-  searchTab: {
-    top: 2,
-    height: 56,
-    width: 56,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    borderRadius: 100,
-    textAlign: "center",
-  },
-  active: {
-    backgroundColor: defaultTheme.extend.colors.tabBar.active,
-  },
-  inactive: {
-    backgroundColor: defaultTheme.extend.colors.tabBar.inactive,
-  },
-});

apps/expo/src/app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { Text, View } from "tamagui";
 
 import {
   bookmarks,
@@ -7,15 +7,16 @@ import {
   watching,
 } from "~/components/item/ItemListSection";
 import ScreenLayout from "~/components/layout/ScreenLayout";
-import { Text } from "~/components/ui/Text";
 
 export default function HomeScreen() {
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{ flex: 1 }} flex={1}>
       <ScreenLayout
         title={
-          <View className="flex-row items-center">
-            <Text className="text-2xl font-bold">Home</Text>
+          <View flexDirection="row" alignItems="center">
+            <Text fontWeight="bold" fontSize={20}>
+              Home
+            </Text>
           </View>
         }
       >

apps/expo/src/app/(tabs)/movie-web.tsx

@@ -1,5 +1,6 @@
+import { Text } from "tamagui";
+
 import ScreenLayout from "~/components/layout/ScreenLayout";
-import { Text } from "~/components/ui/Text";
 
 export default function MovieWebScreen() {
   return (

apps/expo/src/app/(tabs)/search.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Keyboard, ScrollView, View } from "react-native";
+import { Keyboard, ScrollView } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -7,19 +7,14 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useQuery } from "@tanstack/react-query";
+import { Text, View } from "tamagui";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
 import type { ItemData } from "~/components/item/item";
 import Item from "~/components/item/item";
-import {
-  bookmarks,
-  ItemListSection,
-  watching,
-} from "~/components/item/ItemListSection";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { SearchBar } from "~/components/ui/Searchbar";
-import { Text } from "~/components/ui/Text";
 
 export default function HomeScreen() {
   const [query, setQuery] = useState("");
@@ -113,36 +108,28 @@ export default function HomeScreen() {
       >
         <ScreenLayout
           title={
-            <View className="flex-row items-center">
-              <Text className="text-2xl font-bold">Search</Text>
+            <View flexDirection="row" alignItems="center">
+              <Text fontWeight="bold" fontSize={20}>
+                Search
+              </Text>
             </View>
           }
         >
-          {searchResultsLoaded ? (
+          {searchResultsLoaded && (
             <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
-              <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+              <View flexDirection="row" flexWrap="wrap">
                 {data?.map((item, index) => (
-                  <View key={index} className="basis-1/2 px-3 pb-3">
+                  <View
+                    key={index}
+                    paddingHorizontal={12}
+                    paddingBottom={12}
+                    width="50%"
+                  >
                     <Item data={item} />
                   </View>
                 ))}
               </View>
             </Animated.View>
-          ) : (
-            <ScrollView
-              scrollEnabled={
-                bookmarks.length > 0 || watching.length > 0 ? true : false
-              }
-            >
-              <ItemListSection
-                title="Bookmarks"
-                items={bookmarks.concat(watching)}
-              />
-              <ItemListSection
-                title="Continue Watching"
-                items={watching.concat(bookmarks)}
-              />
-            </ScrollView>
           )}
         </ScreenLayout>
       </ScrollView>

apps/expo/src/app/(tabs)/settings.tsx

@@ -1,22 +1,142 @@
-import React, { useState } from "react";
-import { Text, View } from "react-native";
-import { Switch } from "react-native-paper";
+import type { SelectProps } from "tamagui";
+import React from "react";
+import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
+import {
+  Adapt,
+  Label,
+  Select,
+  Separator,
+  Sheet,
+  Switch,
+  Text,
+  useTheme,
+  View,
+  XStack,
+  YStack,
+} from "tamagui";
 
+import type { ThemeStoreOption } from "~/stores/theme";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { useThemeStore } from "~/stores/theme";
+
+const themeOptions: ThemeStoreOption[] = [
+  "main",
+  "blue",
+  "gray",
+  "red",
+  "teal",
+];
 
 export default function SettingsScreen() {
-  const [isSwitchOn, setIsSwitchOn] = useState(true);
-  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
-
   return (
     <ScreenLayout title="Settings">
-      <View className="p-4">
-        <Text className="mb-4 text-lg font-bold text-white">Player</Text>
-        <View className="flex-row items-center justify-between rounded-lg border border-white px-4 py-2">
-          <Text className="text-md text-white">Gesture Controls</Text>
-          <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
-        </View>
+      <View padding={4}>
+        <Text marginBottom={4} fontSize={16} fontWeight="bold" color="white">
+          Player
+        </Text>
+        <YStack>
+          <XStack width={200} alignItems="center" gap="$4">
+            <Label minWidth={110}>Gesture controls</Label>
+            <Separator minHeight={20} vertical />
+            <Switch size="$4" native>
+              <Switch.Thumb animation="quicker" />
+            </Switch>
+          </XStack>
+
+          <XStack width={200} alignItems="center" gap="$4">
+            <Label minWidth={110}>Theme</Label>
+            <Separator minHeight={20} vertical />
+            <ThemeSelector />
+          </XStack>
+        </YStack>
       </View>
     </ScreenLayout>
   );
 }
+
+export function ThemeSelector(props: SelectProps) {
+  const theme = useTheme();
+  const themeStore = useThemeStore((s) => s.theme);
+  const setTheme = useThemeStore((s) => s.setTheme);
+
+  return (
+    <Select
+      value={themeStore}
+      onValueChange={setTheme}
+      disablePreventBodyScroll
+      native
+      {...props}
+    >
+      <Select.Trigger
+        maxWidth="$12"
+        iconAfter={<FontAwesome name="chevron-down" />}
+      >
+        <Select.Value />
+      </Select.Trigger>
+
+      <Adapt platform="native">
+        <Sheet
+          native
+          modal
+          dismissOnSnapToBottom
+          dismissOnOverlayPress
+          animationConfig={{
+            type: "spring",
+            damping: 20,
+            mass: 1.2,
+            stiffness: 250,
+          }}
+          snapPoints={[35]}
+        >
+          <Sheet.Handle backgroundColor="$sheetHandle" />
+          <Sheet.Frame backgroundColor="$sheetBackground" padding="$5">
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            animation="lazy"
+            backgroundColor="rgba(0, 0, 0, 0.8)"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Select.Content>
+        <Select.Viewport
+          animation="static"
+          animateOnly={["transform", "opacity"]}
+          enterStyle={{ o: 0, y: -10 }}
+          exitStyle={{ o: 0, y: 10 }}
+        >
+          {themeOptions.map((item, i) => {
+            return (
+              <Select.Item
+                index={i}
+                key={item}
+                value={item}
+                backgroundColor="$sheetItemBackground"
+                borderTopRightRadius={i === 0 ? "$8" : 0}
+                borderTopLeftRadius={i === 0 ? "$8" : 0}
+                borderBottomRightRadius={
+                  i === themeOptions.length - 1 ? "$8" : 0
+                }
+                borderBottomLeftRadius={
+                  i === themeOptions.length - 1 ? "$8" : 0
+                }
+              >
+                <Select.ItemText>{item}</Select.ItemText>
+                <Select.ItemIndicator ml="auto">
+                  <MaterialIcons
+                    name="check-circle"
+                    size={24}
+                    color={theme.sheetItemSelected.val}
+                  />
+                </Select.ItemIndicator>
+              </Select.Item>
+            );
+          })}
+        </Select.Viewport>
+      </Select.Content>
+    </Select>
+  );
+}