# Setting

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

The Setting module provides a comprehensive solution for building performant setting lists with section headers, custom components, and automatic border radius management. Built on top of [FlashList](https://shopify.github.io/flash-list/docs/usage) for optimal performance with large datasets.

## Overview [#overview]

The Setting module is designed for creating settings screens and configuration lists with proper visual hierarchy, section grouping, and custom component integration.

### Key Features [#key-features]

- **High Performance**: Built on [FlashList](https://shopify.github.io/flash-list/docs/usage) for efficient rendering of large lists
- **Section Headers**: Automatic section header rendering with string items
- **Custom Components**: Support for custom components with border radius integration
- **Automatic Styling**: Dynamic border radius management for grouped items
- **Theme Integration**: Built-in theming support with spacing and colors
- **Flexible Icons**: Support for both icon functions and React Native Paper List.Icon
- **TypeScript Support**: Full type safety with comprehensive type definitions
- **Accessibility**: Forwards the underlying list/item semantics; add labels, roles,
  and actions in the host app where the screen needs them

## Architecture [#architecture]

The Setting system consists of several key components:

### Core Components [#core-components]

- **[SettingList](/native-sdk/guide/components/setting/setting-list/)** - Main list component with [FlashList](https://shopify.github.io/flash-list/docs/usage) integration
- **[SettingListItem](/native-sdk/guide/components/setting/setting-list-item/)** - Individual setting item with icon and navigation support
- **[ListHeader](/native-sdk/guide/components/setting/list-header/)** - Section header component for grouping settings

## Component Hierarchy [#component-hierarchy]

The Setting list follows a clear component structure:

```
SettingList (FlashList Container)
├── ListHeader (Section Header)
├── SettingListItem (Standard Item)
├── SettingListItem (Standard Item)
├── ListHeader (Section Header)
├── CustomComponent (Custom Item)
└── SettingListItem (Standard Item)
```

## Related Components [#related-components]

This Setting module integrates seamlessly with other SDK components to provide comprehensive settings and configuration solutions for healthcare applications.