add switch theme, remove unneeded search bar context

apps/expo/src/components/ui/Button.tsx

@@ -1,51 +1,28 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { ButtonProps } from "tamagui";
-import React from "react";
 import { Button, styled } from "tamagui";
 
-const PrimaryButton = styled(Button, {
-  backgroundColor: "$buttonPrimaryBackground",
-  color: "$buttonPrimaryText",
-  fontWeight: "bold",
+export const MWButton = styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        backgroundColor: "$buttonPrimaryBackground",
+        color: "$buttonPrimaryText",
+        fontWeight: "bold",
+      },
+      secondary: {
+        backgroundColor: "$buttonSecondaryBackground",
+        color: "$buttonSecondaryText",
+        fontWeight: "bold",
+      },
+      purple: {
+        backgroundColor: "$buttonPurpleBackground",
+        color: "white",
+        fontWeight: "bold",
+      },
+      cancel: {
+        backgroundColor: "$buttonCancelBackground",
+        color: "white",
+        fontWeight: "bold",
+      },
+    },
+  } as const,
 });
-
-const SecondaryButton = styled(Button, {
-  backgroundColor: "$buttonSecondaryBackground",
-  color: "$buttonSecondaryText",
-  fontWeight: "bold",
-});
-
-const PurpleButton = styled(Button, {
-  backgroundColor: "$buttonPurpleBackground",
-  color: "white",
-  fontWeight: "bold",
-});
-
-const CancelButton = styled(Button, {
-  backgroundColor: "$buttonCancelBackground",
-  color: "white",
-  fontWeight: "bold",
-});
-
-export const MWButton = React.forwardRef<
-  typeof Button,
-  ButtonProps & {
-    type?: "primary" | "secondary" | "purple" | "cancel";
-  }
->((props, ref) => {
-  const { type, ...rest } = props;
-  switch (type) {
-    case "primary":
-      return <PrimaryButton {...rest} ref={ref as any} />;
-    case "secondary":
-      return <SecondaryButton {...rest} ref={ref as any} />;
-    case "purple":
-      return <PurpleButton {...rest} ref={ref as any} />;
-    case "cancel":
-      return <CancelButton {...rest} ref={ref as any} />;
-    default:
-      return <Button {...rest} ref={ref as any} />;
-  }
-});
-
-MWButton.displayName = "MWButton";

apps/expo/src/components/ui/SearchTabContext.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-const SearchTabContext = React.createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  focusSearchInputRef: { current: () => {} },
-});
-
-export default SearchTabContext;

apps/expo/src/components/ui/Searchbar.tsx

@@ -1,10 +1,9 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Keyboard } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
 import { Input, styled, useTheme, View } from "tamagui";
 
-import SearchTabContext from "./SearchTabContext";
-
 const SearchInput = styled(Input, {
   backgroundColor: "$searchBackground",
   borderColor: "$colorTransparent",
@@ -22,17 +21,16 @@ export function SearchBar({
   onSearchChange: (text: string) => void;
 }) {
   const theme = useTheme();
+  const pageIsFocused = useIsFocused();
   const [keyword, setKeyword] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<Input>(null);
 
-  const { focusSearchInputRef } = useContext(SearchTabContext);
-
   useEffect(() => {
-    focusSearchInputRef.current = () => {
+    if (pageIsFocused) {
       inputRef.current?.focus();
-    };
-  }, [focusSearchInputRef]);
+    }
+  }, [pageIsFocused]);
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(

apps/expo/src/components/ui/Switch.tsx

@@ -0,0 +1,27 @@
+import type { SwitchProps } from "tamagui";
+import { Switch, useTheme } from "tamagui";
+
+const MWSwitch = (props: SwitchProps) => {
+  const theme = useTheme();
+  return (
+    <Switch
+      native
+      nativeProps={{
+        trackColor: {
+          true: theme.switchActiveTrackColor.val,
+          false: theme.switchInactiveTrackColor.val,
+        },
+        thumbColor: theme.switchThumbColor.val,
+      }}
+      {...props}
+    />
+  );
+};
+
+const MWSwitchThumb = (props: any) => {
+  return <Switch.Thumb animation="quicker" {...props} />;
+};
+
+MWSwitch.Thumb = MWSwitchThumb;
+
+export { MWSwitch };