SettingList
High-performance list component built on FlashList for settings screens with section headers and custom components
- Stable unknown
- Release candidate since 1.16.1-rc.3
- Development since 1.16.1-dev.2111+9796905
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
Every prop, with its type and description, is listed in the @ovok/native/setting API reference.
Component Behavior
The SettingList component:
- Item Type Detection: Automatically detects whether items are headers (strings), standard items, or custom components
- Border Radius Management: Automatically applies appropriate border radius to grouped items
- Section Header Rendering: Renders string items as section headers using ListHeader component
- Custom Component Integration: Supports custom components with border radius props
- 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
borderTopRadiusandborderBottomRadiusprops
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;
};Related Components
- SettingListItem - Individual setting item component
- ListHeader - Section header component
Last updated on