diff --git a/apps/mobile/src/components/ListActionRow.tsx b/apps/mobile/src/components/ListActionRow.tsx
new file mode 100644
index 000000000000..35da97d517c9
--- /dev/null
+++ b/apps/mobile/src/components/ListActionRow.tsx
@@ -0,0 +1,42 @@
+import { Platform } from "react-native";
+import { useResolveClassNames } from "uniwind";
+
+import { AppActivityIndicator } from "./AppActivityIndicator";
+import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout";
+import { RowPressable } from "./RowPressable";
+
+export function ListActionRow(
+ props: ListRowContentProps & {
+ readonly tone?: "default" | "danger";
+ readonly loading?: boolean;
+ readonly onPress: () => void;
+ },
+) {
+ const rippleStyle = useResolveClassNames("bg-subtle-strong");
+ const disabled = Boolean(props.disabled || props.loading);
+ return (
+
+
+ ) : undefined
+ }
+ />
+
+ );
+}
diff --git a/apps/mobile/src/components/ListRowLayout.tsx b/apps/mobile/src/components/ListRowLayout.tsx
index 96138fdbb8a0..9464e9d13ec0 100644
--- a/apps/mobile/src/components/ListRowLayout.tsx
+++ b/apps/mobile/src/components/ListRowLayout.tsx
@@ -21,7 +21,8 @@ export function ListRowLayout({
detail,
disabled,
accessory,
-}: ListRowContentProps & { readonly accessory?: ReactNode }) {
+ tone = "default",
+}: ListRowContentProps & { readonly accessory?: ReactNode; readonly tone?: "default" | "danger" }) {
const { fontScale } = useWindowDimensions();
// Leave the label room to wrap at accessibility text sizes.
const stackDetail = fontScale >= 1.5;
@@ -38,14 +39,20 @@ export function ListRowLayout({
) : null}
- {label}
+
+ {label}
+
{description ? (
{description}
) : null}
diff --git a/apps/mobile/src/features/settings/components/SettingsActionRow.tsx b/apps/mobile/src/features/settings/components/SettingsActionRow.tsx
index efef1f014668..d524ea809ec5 100644
--- a/apps/mobile/src/features/settings/components/SettingsActionRow.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsActionRow.tsx
@@ -1,60 +1 @@
-import type { ComponentProps } from "react";
-import { Platform, Pressable } from "react-native";
-
-import { AppActivityIndicator } from "../../../components/AppActivityIndicator";
-import { SymbolView } from "../../../components/AppSymbol";
-import { AppText as Text } from "../../../components/AppText";
-import { MaterialListRow } from "../../../components/MaterialListRow";
-import { cn } from "../../../lib/cn";
-
-export function SettingsActionRow(props: {
- readonly icon: ComponentProps["name"];
- readonly label: string;
- readonly tone?: "default" | "danger";
- readonly disabled?: boolean;
- readonly loading?: boolean;
- readonly onPress: () => void;
-}) {
- const danger = props.tone === "danger";
- const textClassName = danger ? "tabular-nums text-danger-foreground" : "text-foreground";
- const iconColorClassName = danger ? "accent-danger-foreground" : "accent-icon";
- const icon = (
-
- );
- const spinner = props.loading ? (
-
- ) : null;
-
- if (Platform.OS === "android") {
- return (
-
- );
- }
-
- return (
-
- {icon}
- {props.label}
- {spinner}
-
- );
-}
+export { ListActionRow as SettingsActionRow } from "../../../components/ListActionRow";