listStyle#

The listStyle property allows you to customize the behavior and appearance of a list in your UI when using the List view.

Property Declaration#

1listStyle?: ListStyle;

Description#

The listStyle property defines the visual style of a list, allowing you to choose from various predefined list styles.

Accepted Values#

The listStyle property accepts the following string values:

• automatic: Uses the platform’s default behavior and appearance for a list.
• bordered: Displays a list with standard borders.
• carousel: Applies a carousel-like appearance to the list.
• elliptical: Gives the list an elliptical style.
• grouped: Displays the list in a grouped format.
• inset: Applies an inset appearance to the list.
• insetGroup: Combines inset and grouped styles for the list.
• plain: Displays the list in a plain style without additional decorations.
• sidebar: Renders the list in a sidebar-like appearance.

Default Behavior#

If listStyle is not specified, the default style is determined by the platform.

Usage Example#

Here’s how you can apply the listStyle property in your TypeScript code:

Example: Plain List Style#

1<List
2  listStyle="plain"
3>
4  <Text>Item 1</Text>
5  <Text>Item 2</Text>
6  <Text>Item 3</Text>
7</List>

This creates a list with a plain style.

Example: Grouped List Style#

1<List
2  listStyle="grouped"
3>
4  <Section header={
5    <Text>Fruits</Text>
6  }>
7    <Text>Apple</Text>
8    <Text>Banana</Text>
9  </Section>
10  <Section header={
11    <Text>Vegetables</Text>
12  }>
13    <Text>Carrot</Text>
14    <Text>Broccoli</Text>
15  </Section>
16</List>

This creates a grouped list with sections.

Example: Sidebar List Style#

1<List
2  listStyle="sidebar"
3>
4  <Text>Home</Text>
5  <Text>Settings</Text>
6  <Text>Profile</Text>
7</List>

This creates a sidebar-style list.

Notes#

• The listStyle property directly maps to SwiftUI’s listStyle modifier.
• Make sure to match the string value with one of the predefined styles listed above to avoid runtime errors.