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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/setting API reference.

Component BehaviorCopy Anchor Link

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 SystemCopy Anchor Link

• 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 LogicCopy Anchor Link

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}

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• 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 ComponentsCopy Anchor Link

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