Skip to main content

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.

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​

  • 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

Architecture​

The Setting system consists of several key components:

Core Components​

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)

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