Skip to main content

SettingList

High-performance list component built on FlashList that provides optimized rendering for settings screens. Supports section headers, custom components, and automatic border radius management for grouped items.

Quick Example​

import { SettingList, useAppTheme } from "@ovok/native";
import { Information, Settings, User } from "iconsax-react-nativejs";
import React from "react";

export const SettingListExample = () => {
  const theme = useAppTheme();

  const settingsData = [
    "Account",
    {
      title: "Profile",
      leftIcon: () => <User size={20} color={theme.colors.onSurface} />,
      onPress: () => console.log("Profile pressed"),
    },
    {
      title: "Preferences",
      leftIcon: () => <Settings size={20} color={theme.colors.onSurface} />,
      onPress: () => console.log("Preferences pressed"),
    },
    "Information",
    {
      title: "About",
      leftIcon: () => <Information size={20} color={theme.colors.onSurface} />,
      onPress: () => console.log("About pressed"),
    },
  ];

  return (
    <SettingList
      data={settingsData}
      contentContainerStyle={{
        padding: theme.spacing(4),
      }}
    />
  );
};

export default SettingListExample;

Props​

PropTypeRequiredDefaultDescription
dataArray<SettingListItemProps | CustomSettingListItem | string>✓-Array of setting items, custom components, or section headers
estimatedItemSizenumber✓-Estimated height of each item for FlashList optimization

Inherits all props from FlashListProps except renderItem

Component Behavior​

The SettingList component:

  1. Item Type Detection: Automatically detects whether items are headers (strings), standard items, or custom components
  2. Border Radius Management: Automatically applies appropriate border radius to grouped items
  3. Section Header Rendering: Renders string items as section headers using ListHeader component
  4. Custom Component Integration: Supports custom components with border radius props
  5. Performance Optimization: Uses FlashList for efficient rendering of large lists

Data Structure​

The data prop accepts three types of items:

// Section header (string)
"Settings"

// Standard setting item
{
  title: "Account",
  leftIcon: () => <User size={20} />,
  onPress: () => navigation.navigate("Account"),
}

// Custom component
{
  custom: true,
  component: MyCustomComponent,
  // Additional props passed to component
  someCustomProp: "value",
}

Border Radius Logic​

The component automatically manages border radius for visual grouping:

  • Top radius: Applied to first item or item following a section header
  • Bottom radius: Applied to last item or item before a section header
  • Custom components: Receive borderTopRadius and borderBottomRadius props

Data Types​

SettingListItemProps​

Standard setting list item:

type SettingListItemProps = ListItemProps & {
  title: string;
  onPress?: () => void;
  leftIcon?: React.ComponentProps<typeof List.Icon>["icon"];
  borderTopRadius?: boolean;
  borderBottomRadius?: boolean;
};

CustomSettingListItem​

Custom component integration:

type CustomSettingListItem = {
  custom: true;
  borderTopRadius?: boolean;
  borderBottomRadius?: boolean;
  component: React.ComponentType<{
    borderTopRadius?: boolean;
    borderBottomRadius?: boolean;
  }>;
  [key: string]: unknown;
};