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

Inherits FlashListProps for the union of SettingListItemProps, CustomSettingListItem, and string, except that renderItem and ItemSeparatorComponent are owned by the component. FlashList v2 does not require an SDK-specific estimatedItemSize prop.

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;
};