# SettingList

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

High-performance list component built on [FlashList](https://shopify.github.io/flash-list/docs/usage) that provides optimized rendering for settings screens. Supports section headers, custom components, and automatic border radius management for grouped items.

## Quick Example [#quick-example]

```tsx
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 [#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 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](https://shopify.github.io/flash-list/docs/usage) for efficient rendering of large lists

### Data Structure [#data-structure]

The `data` prop accepts three types of items:

```tsx
// 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 [#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 [#data-types]

### SettingListItemProps [#settinglistitemprops]

Standard setting list item:

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

### CustomSettingListItem [#customsettinglistitem]

Custom component integration:

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

## Related Components [#related-components]

- [SettingListItem](/native-sdk/guide/components/setting/setting-list-item/) - Individual setting item component
- [ListHeader](/native-sdk/guide/components/setting/list-header/) - Section header component