SettingListItem

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

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

Prop	Type	Required	Default	Description
title	string	✓	-	Main text displayed in the item
onPress	() => void	-	-	Callback fired when item is pressed
leftIcon	React.ComponentProps<typeof List.Icon>["icon"]	-	-	Icon component displayed on the left
borderTopRadius	boolean	-	false	Whether to apply top border radius
borderBottomRadius	boolean	-	false	Whether to apply bottom border radius

Inherits all props from React Native Paper's ListItemProps

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: Includes proper accessibility labels and touch targets

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 is applied based on item position in grouped lists:

// 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

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

• SettingList - Container component that renders SettingListItem
• ListHeader - Section header component for grouping