1- import { Platform } from "react-native" ;
1+ import { Platform , View } from "react-native" ;
22
33import { useResolveClassNames } from "uniwind" ;
44import { SymbolView } from "./AppSymbol" ;
55import { ListRowLayout , type ListRowContentProps } from "./ListRowLayout" ;
6+ import { RadioIndicator } from "./RadioIndicator" ;
67import { RowPressable } from "./RowPressable" ;
78
8- export function ListRow ( props : ListRowContentProps & { readonly onPress : ( ) => void } ) {
9+ export function ListRow (
10+ props : ListRowContentProps & {
11+ readonly onPress : ( ) => void ;
12+ /** Marks the row as the chosen option while it still navigates. */
13+ readonly selected ?: boolean ;
14+ } ,
15+ ) {
916 const rippleStyle = useResolveClassNames ( "bg-subtle-strong" ) ;
1017 return (
1118 < RowPressable
1219 accessibilityRole = "button"
1320 accessibilityLabel = { [ props . label , props . description , props . detail ] . filter ( Boolean ) . join ( ", " ) }
14- accessibilityState = { { disabled : Boolean ( props . disabled ) } }
21+ accessibilityState = { {
22+ disabled : Boolean ( props . disabled ) ,
23+ ...( props . selected === undefined ? { } : { checked : props . selected } ) ,
24+ } }
1525 disabled = { props . disabled }
1626 onPress = { props . onPress }
1727 android_ripple = { { color : rippleStyle . backgroundColor } }
@@ -21,13 +31,34 @@ export function ListRow(props: ListRowContentProps & { readonly onPress: () => v
2131 < ListRowLayout
2232 { ...props }
2333 accessory = {
24- < SymbolView
25- name = "chevron.right"
26- size = { 16 }
27- tintColorClassName = "accent-chevron"
28- type = "monochrome"
29- weight = "semibold"
30- />
34+ < View className = "flex-row items-center gap-3" >
35+ { props . selected === undefined ? null : (
36+ < View
37+ accessibilityElementsHidden
38+ importantForAccessibility = "no-hide-descendants"
39+ className = "size-6 items-center justify-center"
40+ >
41+ { Platform . OS === "android" ? (
42+ < RadioIndicator selected = { props . selected } />
43+ ) : props . selected ? (
44+ < SymbolView
45+ name = "checkmark"
46+ size = { 18 }
47+ tintColorClassName = "accent-primary-text"
48+ type = "monochrome"
49+ weight = "semibold"
50+ />
51+ ) : null }
52+ </ View >
53+ ) }
54+ < SymbolView
55+ name = "chevron.right"
56+ size = { 16 }
57+ tintColorClassName = "accent-chevron"
58+ type = "monochrome"
59+ weight = "semibold"
60+ />
61+ </ View >
3162 }
3263 />
3364 </ RowPressable >
0 commit comments