Extras

package.json

@@ -35,6 +35,7 @@
     "@react-navigation/drawer": "^7.10.2",
     "expo": "~54.0.33",
     "expo-constants": "~18.0.13",
+    "expo-haptics": "~15.0.8",
     "expo-linking": "~8.0.12",
     "expo-location": "~19.0.8",
     "expo-router": "~6.0.23",

src/app/(tabs)/index.tsx

@@ -1,12 +1,15 @@
 import { router } from "expo-router"
 import { type ReactElement, useCallback, useState } from "react"
-import { FlatList, Pressable } from "react-native"
+import { Alert, Pressable, View } from "react-native"
 
 import { SafeAreaView } from "react-native-safe-area-context"
 
 import Card from "#design/elements/Card"
 import Typography from "#design/elements/Typography"
 import { shapes, spacing, type ThemeColors } from "#design/foundations"
+import DraggableList from "#design/patterns/DraggableList"
+import SwipeToDelete from "#design/patterns/SwipeToDelete"
+import { haptics } from "#shared/haptics"
 import { useAddCurrentLocation } from "#shared/location"
 import {
   ColorPickerModal,
@@ -20,7 +23,7 @@ const REFRESH_SETTLE_MS = 800
 
 export default function Home(): ReactElement {
   const styles = useThemedStyles(createStyles)
-  const { data: savedLocations } = useSavedLocations()
+  const { data: savedLocations, remove, reorder } = useSavedLocations()
   const {
     add: addCurrentLocation,
     currentLocation,
@@ -41,56 +44,80 @@ export default function Home(): ReactElement {
     }, REFRESH_SETTLE_MS)
   }, [])
 
+  const confirmRemove = useCallback(
+    (location: SavedLocation) => {
+      Alert.alert("Remove location", `Remove ${location.name}?`, [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Remove",
+          style: "destructive",
+          onPress: () => {
+            remove(location.id)
+            haptics.success()
+          },
+        },
+      ])
+    },
+    [remove],
+  )
+
   const renderItem = useCallback(
-    ({ item }: { item: SavedLocation }) => (
-      <SavedLocationCard
-        location={item}
-        onPress={() => {
-          router.push(`/locations/${item.id}`)
+    (item: SavedLocation) => (
+      <SwipeToDelete
+        onDelete={() => {
+          confirmRemove(item)
         }}
-        reloadToken={reloadToken}
-      />
+      >
+        <SavedLocationCard
+          location={item}
+          onPress={() => {
+            router.push(`/locations/${item.id}`)
+          }}
+          reloadToken={reloadToken}
+        />
+      </SwipeToDelete>
     ),
-    [reloadToken],
+    [confirmRemove, reloadToken],
   )
 
   const showPrompt =
     isOnline && !isCurrentLocationSaved && currentLocationError === null
 
+  const header = (
+    <View style={styles.header}>
+      <Typography variant="title">Your locations</Typography>
+      {showPrompt ? (
+        <Pressable
+          disabled={isLoadingCurrentLocation || currentLocation === null}
+          onPress={() => {
+            setIsPickingColor(true)
+          }}
+          style={({ pressed }) => pressed && styles.promptPressed}
+        >
+          <Card style={styles.prompt}>
+            <Typography variant="label" style={styles.promptText}>
+              {isLoadingCurrentLocation
+                ? "Locating…"
+                : currentLocation === null
+                  ? "Unable to read location"
+                  : `Add your location: ${currentLocation.name}`}
+            </Typography>
+          </Card>
+        </Pressable>
+      ) : null}
+    </View>
+  )
+
   return (
     <SafeAreaView edges={["top"]} style={styles.container}>
-      <FlatList
-        contentContainerStyle={styles.content}
+      <DraggableList
         data={savedLocations}
+        header={header}
         keyExtractor={(location) => location.id}
-        ListHeaderComponent={
-          <>
-            <Typography variant="title">Your locations</Typography>
-            {showPrompt ? (
-              <Pressable
-                disabled={isLoadingCurrentLocation || currentLocation === null}
-                onPress={() => {
-                  setIsPickingColor(true)
-                }}
-                style={({ pressed }) => pressed && styles.promptPressed}
-              >
-                <Card style={styles.prompt}>
-                  <Typography variant="label" style={styles.promptText}>
-                    {isLoadingCurrentLocation
-                      ? "Locating…"
-                      : currentLocation === null
-                        ? "Unable to read location"
-                        : `Add your location: ${currentLocation.name}`}
-                  </Typography>
-                </Card>
-              </Pressable>
-            ) : null}
-          </>
-        }
         onRefresh={handleRefresh}
+        onReorder={reorder}
         refreshing={refreshing}
         renderItem={renderItem}
-        showsVerticalScrollIndicator={false}
       />
 
       {currentLocation === null ? null : (
@@ -111,13 +138,12 @@ export default function Home(): ReactElement {
 }
 
 const createStyles = (colors: ThemeColors) => ({
-  content: {
-    gap: spacing.between,
-    paddingHorizontal: spacing.between,
-    paddingVertical: spacing.between,
-  },
   container: {
     backgroundColor: colors.background,
+    flex: 1,
+  },
+  header: {
+    gap: spacing.between,
   },
   prompt: {
     alignItems: "flex-start" as const,

src/app/_layout.tsx

@@ -1,21 +1,32 @@
 import { Stack } from "expo-router"
 import { StatusBar } from "expo-status-bar"
 import { type ReactElement } from "react"
+import { StyleSheet } from "react-native"
+import { GestureHandlerRootView } from "react-native-gesture-handler"
 
 import { SavedLocationsProvider } from "#shared/locations"
 import { OfflineBanner } from "#shared/network"
 import { RESOLVED_THEME, SettingsProvider, useTheme } from "#shared/settings"
 
 export default function Layout(): ReactElement {
   return (
-    <SettingsProvider>
-      <SavedLocationsProvider>
-        <ThemedRoot />
-      </SavedLocationsProvider>
-    </SettingsProvider>
+    // Root wrapper required by react-native-gesture-handler.
+    <GestureHandlerRootView style={styles.root}>
+      <SettingsProvider>
+        <SavedLocationsProvider>
+          <ThemedRoot />
+        </SavedLocationsProvider>
+      </SettingsProvider>
+    </GestureHandlerRootView>
   )
 }
 
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+})
+
 function ThemedRoot(): ReactElement {
   const { colors, resolvedTheme } = useTheme()
 

src/shared/design/elements/Icon/constants.ts

@@ -5,6 +5,7 @@ import {
   faHeart,
   faHouse,
   faMagnifyingGlass,
+  faTrash,
 } from "@fortawesome/free-solid-svg-icons"
 
 export const APP_ICONS: Record<string, IconProp> = {
@@ -13,4 +14,5 @@ export const APP_ICONS: Record<string, IconProp> = {
   home: faHouse,
   search: faMagnifyingGlass,
   settings: faGear,
+  trash: faTrash,
 }

src/shared/design/patterns/DraggableList/DraggableList.test.tsx

@@ -0,0 +1,60 @@
+import { render } from "@testing-library/react-native"
+import { type ReactNode } from "react"
+import { Text } from "react-native"
+
+import DraggableList from "./DraggableList"
+
+jest.mock("react-native-gesture-handler", () => {
+  const chain = {
+    activateAfterLongPress: () => chain,
+    onStart: () => chain,
+    onUpdate: () => chain,
+    onEnd: () => chain,
+  }
+  return {
+    Gesture: { Pan: () => chain },
+    GestureDetector: ({ children }: { children?: ReactNode }) => children,
+  }
+})
+
+jest.mock("react-native-reanimated", () => {
+  const { View } = jest.requireActual("react-native")
+  return {
+    __esModule: true,
+    default: { View },
+    useSharedValue: (value: unknown) => ({ value }),
+    useAnimatedStyle: () => ({}),
+    withTiming: (value: unknown) => value,
+  }
+})
+
+jest.mock("react-native-worklets", () => ({ scheduleOnRN: jest.fn() }))
+
+jest.mock("#shared/haptics", () => ({ haptics: { tap: jest.fn() } }))
+
+type Row = { id: string; label: string }
+
+const DATA: Row[] = [
+  { id: "a", label: "Madrid" },
+  { id: "b", label: "Lisbon" },
+  { id: "c", label: "Paris" },
+]
+
+describe("Design > Patterns > DraggableList", () => {
+  it("renders the header and a row per item", () => {
+    const { getByText } = render(
+      <DraggableList
+        data={DATA}
+        header={<Text>Your locations</Text>}
+        keyExtractor={(item) => item.id}
+        onReorder={jest.fn()}
+        renderItem={(item) => <Text>{item.label}</Text>}
+      />,
+    )
+
+    expect(getByText("Your locations")).toBeTruthy()
+    expect(getByText("Madrid")).toBeTruthy()
+    expect(getByText("Lisbon")).toBeTruthy()
+    expect(getByText("Paris")).toBeTruthy()
+  })
+})