poc(app): Revisit Expo UI

app/app/(tabs)/(beep)/beep/index.tsx

@@ -207,15 +207,30 @@ export default function StartBeepingScreen() {
           {queue && queue.length > 1 && <Stack.Toolbar.Badge>{String(queue.length - 1)}</Stack.Toolbar.Badge>}
         </Stack.Toolbar.Button>
       )}
-      <Stack.Toolbar.Button
+      {form.formState.isSubmitting && (
+        <Stack.Toolbar.View>
+          <ActivityIndicator size="small" />
+        </Stack.Toolbar.View>
+      )}
+      <Stack.Toolbar.View>
+        <View style={{ paddingHorizontal: 8 }}>
+          <Switch
+            disabled={form.formState.isSubmitting}
+            value={user?.isBeeping ?? false}
+            onValueChange={onToggleIsBeeping}
+            trackColor={{ true: 'rgb(36, 147, 250)' }}
+          />
+        </View>
+      </Stack.Toolbar.View>
+      {/* <Stack.Toolbar.Button
         onPress={handleIsBeepingChange}
         variant="prominent"
         disabled={form.formState.isSubmitting}
         tintColor={user?.isBeeping ? "red" : undefined}
-        // icon={user?.isBeeping ? "stop.fill" : "play.fill"}
+        icon={user?.isBeeping ? "stop.fill" : "play.fill"}
       >
         {user?.isBeeping ? "Stop" : "Start"} Beeping
-      </Stack.Toolbar.Button>
+      </Stack.Toolbar.Button> */}
     </Stack.Toolbar>
   );
 

app/app/(tabs)/(beep)/beep/queue.tsx

@@ -34,8 +34,7 @@ export default function StartBeepingScreen() {
       contentContainerStyle={getContentContainerStyle(queue.length === 0)}
       ListEmptyComponent={
         <View style={{ gap: 8, alignItems: 'center' }}>
-          <Text size="5xl">⏳</Text>
-          <Text weight="800" size="lg">
+          <Text size="2xl" weight="800">
             Your queue is empty!
           </Text>
           <Text style={{ textAlign: "center", maxWidth: "80%" }}>

app/app/(tabs)/(profile)/profile/premium.tsx

@@ -104,6 +104,7 @@ function Package({ p, disabled }: { p: PurchasesPackage; disabled: boolean }) {
         gap: 8,
         flexDirection: "row",
         alignItems: "center",
+        // borderRadius: 50
       }}
       variant="outlined"
     >
@@ -119,6 +120,7 @@ function Package({ p, disabled }: { p: PurchasesPackage; disabled: boolean }) {
         isLoading={isPurchasing}
         onPress={() => onBuy(p)}
         disabled={disabled}
+        size="sm"
       >
         {p.product.priceString}
       </Button>
@@ -244,7 +246,7 @@ export default function Premium() {
   return (
     <FlatList
       data={offerings}
-      contentContainerStyle={{ padding: 16 }}
+      contentContainerStyle={{ paddingHorizontal: 16 }}
       contentInsetAdjustmentBehavior="automatic"
       renderItem={({ item }) => (
         <Offering item={item} disabled={numberOfActivePayments > 0} />

app/app/(tabs)/(ride)/ride/index.tsx

@@ -14,7 +14,7 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { Label } from "@/components/Label";
 import { Text } from "@/components/Text";
 import { Input } from "@/components/Input";
-import { LocationInput } from "@/components/LocationInput";
+import { LocationInput } from "@/components/location-input/LocationInput";
 import { Button } from "@/components/Button";
 import { BeepersMap } from "@/components/BeepersMap";
 import { RateLastBeeper } from "@/components/RateLastBeeper";
@@ -160,7 +160,11 @@ export default function MainFindBeepScreen() {
           />
           <Text color="error">{errors.destination?.message}</Text>
         </View>
-        <Button onPress={() => findBeep()}>Find Beep</Button>
+        <View style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+          <View>
+            <Button onPress={() => findBeep()}>Find Beep</Button>
+          </View>
+        </View>
         <Link asChild href="/ride/map">
           <Link.Trigger withAppleZoom>
             <BeepersMap />

app/components/AcceptDenyButton.tsx

@@ -62,6 +62,7 @@ export function AcceptDenyButton(props: Props) {
       isLoading={isPending}
       onPress={isAccept ? onSubmit : onConfirm}
       style={props.style}
+      color={isAccept ? undefined : 'red'}
     >
       {isAccept ? "Accept" : "Deny"}
     </Button>

app/components/Button.ios.tsx

@@ -0,0 +1,44 @@
+import { Host, Button as IOSButton, Text, ProgressView, ZStack } from "@expo/ui/swift-ui";
+import { buttonStyle, controlSize, frame, fixedSize, disabled, tint, resizable, hidden } from "@expo/ui/swift-ui/modifiers";
+import { Props } from "./Button";
+
+export function Button(props: Props) {
+  const {
+    children,
+    isLoading,
+    variant = "primary",
+    size = "md",
+    color,
+    activityIndicatorProps,
+    ...rest
+  } = props;
+
+  return (
+    <Host matchContents>
+      <IOSButton
+        onPress={rest.onPress as any}
+        modifiers={[
+          buttonStyle(variant === 'primary' ? 'glassProminent' : 'glass'),
+          controlSize(size === 'sm' ? 'regular' : 'large'),
+          fixedSize(),
+          frame({ maxWidth: Infinity, alignment: 'trailing' }),
+          ...(props.disabled ? [disabled()] : []),
+          ...(props.color ? [tint(props.color)] : [])
+        ]}
+      >
+        <ZStack>
+          {isLoading && <ProgressView modifiers={[resizable(), controlSize('regular')]} />}
+          {typeof children === 'string' ? (
+            <Text
+              modifiers={[
+                frame({ minWidth: 0, maxWidth: Infinity }),
+                ...(isLoading ? [hidden()] : [])
+              ]}>
+              {children}
+            </Text>
+          ) : undefined}
+        </ZStack>
+        </IOSButton>
+    </Host>
+  );
+}

app/components/Button.tsx

@@ -15,7 +15,7 @@ const sizeMap = {
   lg: 24,
 };
 
-interface Props extends PressableProps {
+export interface Props extends PressableProps {
   /**
    * Shows a loading indicator instead of children
    */

app/components/PremiumBanner.tsx

@@ -34,7 +34,7 @@ export function PremiumBanner() {
             Get premium to show at the top of the beeper list
           </Text>
           <Button onPress={() => router.navigate('/profile/premium')}>
-            Get Premium 👑
+            Get Premium
           </Button>
         </>
       )}

app/components/beeper/Beep.tsx

@@ -298,6 +298,7 @@ export function Beep(props: Props) {
             },
           ]}
         />
+        <View style={{ flexGrow: 1 }} />
         {beep.status === "waiting" ? (
           <View style={{ flexDirection: "row", gap: 8, flexGrow: 1 }}>
             <AcceptDenyButton item={beep} type="deny" />

app/components/location-input/CurrentLocationButton.ios.tsx

@@ -0,0 +1,27 @@
+import type { Props } from "./CurrentLocationButton";
+import { Image, Button, Host } from "@expo/ui/swift-ui";
+import { controlSize, buttonStyle, labelStyle, resizable, frame } from "@expo/ui/swift-ui/modifiers";
+
+export function CurrentLocationButton(props: Props) {
+  return (
+    <Host matchContents>
+      <Button
+        onPress={props.onPress}
+        modifiers={[
+          labelStyle('iconOnly'),
+          buttonStyle('glassProminent'),
+          controlSize('mini'),
+        ]}
+      >
+        <Image
+          systemName="location.fill"
+          size={16}
+          modifiers={[
+            frame({ width: 8, height: 16 }),
+            resizable(),
+          ]}
+        />
+      </Button>
+    </Host>
+  );
+}

app/components/location-input/CurrentLocationButton.tsx

@@ -0,0 +1,19 @@
+import { ActivityIndicator, Pressable } from "react-native";
+import { Text } from '../Text';
+
+export interface Props {
+  isLoading: boolean;
+  onPress: () => void;
+}
+
+export function CurrentLocationButton(props: Props) {
+  if (props.isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <Pressable onPress={props.onPress} style={{ paddingTop: 4 }} hitSlop={24}>
+      <Text size="2xl">️📍</Text>
+    </Pressable>
+  );
+}

app/components/LocationInput.tsx → app/components/location-input/LocationInput.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import * as Location from "expo-location";
 import { Input } from "@/components/Input";
-import { Text } from "@/components/Text";
-import { ActivityIndicator, Pressable, TextInput, TextInputProps, View } from "react-native";
+import { TextInput, TextInputProps, View } from "react-native";
+import { CurrentLocationButton } from "./CurrentLocationButton";
 
 interface Props extends TextInputProps {
   ref: React.Ref<TextInput>;
@@ -67,18 +67,12 @@ export function LocationInput(props: Props) {
     <View style={{ flexDirection: "row", gap: 8 }}>
       <Input
         placeholder={isLoading ? "Loading" : undefined}
-        style={{ flex: 1, flexGrow: 1 }}
+        style={{ flex: 1, flexGrow: 1, paddingRight: 52 }}
         textContentType="fullStreetAddress"
         {...props}
       />
-      <View style={{ position: 'absolute', right: 16, top: 12, display: 'flex', alignContent: 'center', justifyContent: 'center', width: 24, height: 24 }}>
-        {isLoading ? (
-          <ActivityIndicator />
-        ) : (
-          <Pressable onPress={handleGetCurrentLocation}>
-            <Text size="2xl">️📍</Text>
-          </Pressable>
-        )}
+      <View style={{ position: 'absolute', right: 22, top: 14, display: 'flex', alignContent: 'center', justifyContent: 'center', width: 24, height: 24 }}>
+        <CurrentLocationButton onPress={handleGetCurrentLocation} isLoading={isLoading} /> 
       </View>
     </View>
   );

app/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@expo/ui": "^55.0.5",
     "@gorhom/bottom-sheet": "5.2.8",
     "@react-native-async-storage/async-storage": "~2.2.0",
     "@react-native-menu/menu": "^2.0.0",
@@ -20,7 +21,7 @@
     "@tanstack/react-query": "^5.90.21",
     "@trpc/client": "^11.10.0",
     "@trpc/tanstack-react-query": "^11.10.0",
-    "expo": "~55.0.5",
+    "expo": "~55.0.8",
     "expo-application": "^55.0.10",
     "expo-constants": "~55.0.9",
     "expo-dev-client": "~55.0.18",