# SettingListItem

Canonical page: https://docs.ovok.com/native-sdk/guide/components/setting/setting-list-item

Individual setting item component built on React Native Paper's List.Item. Provides consistent styling, icon support, navigation arrows, and automatic border radius management for grouped settings.

## Quick Example [#quick-example]

```tsx
import { SettingListItem, useAppTheme } from "@ovok/native";
import { User } from "iconsax-react-nativejs";
import React from "react";

const SettingListItemExample = () => {
  const theme = useAppTheme();

  return (
    <SettingListItem
      title="User Profile"
      leftIcon={() => <User size={20} color={theme.colors.onSurface} />}
      onPress={() => console.log("Profile pressed")}
      borderTopRadius={true}
      borderBottomRadius={true}
    />
  );
};

export default SettingListItemExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/setting` API reference](/native-sdk/reference/setting).

## Component Behavior [#component-behavior]

The SettingListItem component:

1. **Icon Management**: Supports both custom left icons and automatic right navigation arrow
2. **Border Radius**: Conditionally applies border radius for grouped appearance
3. **Theme Integration**: Uses theme colors and spacing for consistent styling
4. **Touch Feedback**: Provides appropriate touch feedback via React Native Paper
5. **Accessibility boundary**: Forwards the underlying Paper list-item semantics;
   configure labels, roles, and actions in the host app

### Icon System [#icon-system]

- **Left Icon**: Custom icon function or React Native Paper List.Icon component
- **Right Icon**: Automatic ArrowRight2 icon unless custom `right` prop is provided
- **Icon Colors**: Left icons use `theme.colors.primary`, right icons use `theme.colors.onSurfaceDisabled`

### Border Radius Logic [#border-radius-logic]

Border radius is applied based on item position in grouped lists:

```tsx
// Top radius for first item in group
borderTopRadius={true}

// Bottom radius for last item in group
borderBottomRadius={true}

// Both for single items
borderTopRadius={true} borderBottomRadius={true}
```

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Left icon color
- `theme.colors.onSurfaceDisabled` - Right arrow color and inactive text
- `theme.colors.surface` - Background color
- `theme.spacing(3)` - Horizontal padding
- `theme.spacing(2)` - Vertical padding
- `theme.borderRadius(2)` - Border radius value

## Related Components [#related-components]

- [SettingList](/native-sdk/guide/components/setting/setting-list/) - Container component that renders SettingListItem
- [ListHeader](/native-sdk/guide/components/setting/list-header/) - Section header component for grouping