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 for optimal performance with large datasets.

OverviewCopy Anchor Link

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

Key FeaturesCopy Anchor Link

• High Performance: Built on FlashList 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

ArchitectureCopy Anchor Link

The Setting system consists of several key components:

Core ComponentsCopy Anchor Link

• SettingList - Main list component with FlashList integration
• SettingListItem - Individual setting item with icon and navigation support
• ListHeader - Section header component for grouping settings

Component HierarchyCopy Anchor Link

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

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