# List

The list is a scrollable component in which the list rows are rendered.

```tsx
import React, {useState} from 'react';
import {
  Navigator,
  Screen,
  List,
  Text,
  ScrollView,
  Section,
  ListRowSubtitle,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const [seeDetails, setSeeDetails] = useState(false);
  const listData = [
    {
      id: 'graphicTees',
      leftSide: {
        label: 'Graphic Tees',
        subtitle: [{content: 'Summer Collection'}, {content: 'Unisex'}] as [
          ListRowSubtitle,
          ListRowSubtitle?,
        ],
      },
      rightSide: {
        label: 'Product details',
        showChevron: true,
      },
      onPress: () => setSeeDetails(!seeDetails),
    },
    {
      id: 'denimShorts',
      leftSide: {
        label: 'Denim Shorts',
        subtitle: [{content: 'Summer Collection'}, {content: 'Denim'}] as [
          ListRowSubtitle,
          ListRowSubtitle?,
        ],
      },
    },
  ];
  return (
    <Navigator>
      <Screen name="ProductList" title="Product List">
        <List title="Products" data={listData} />
        {seeDetails && (
          <ScrollView>
            <Section title="Our T-shirts">
              <Text>Our shirts are made with 100% organic cotton!</Text>
            </Section>
          </ScrollView>
        )}
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.home.modal.render', () => (
  <SmartGridModal />
));

```

```ts
import {
  Navigator,
  Screen,
  List,
  Text,
  ScrollView,
  Section,
  ListRowSubtitle,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  let showDetails = false;
  const section = root.createComponent(Section, {
    title: 'Our T-shirts',
  });

  const scrollView = root.createComponent(ScrollView);

  const triggerShowDetails = () => {
    showDetails = !showDetails;
    if (showDetails) {
      scrollView.append(section);
    } else {
      scrollView.removeChild(section);
    }
  };

  const listData = [
    {
      id: 'graphicTees',
      leftSide: {
        label: 'Graphic Tees',
        subtitle: [{content: 'Summer Collection'}, {content: 'Unisex'}] as [
          ListRowSubtitle,
          ListRowSubtitle?,
        ],
      },
      rightSide: {
        label: 'Product details',
        showChevron: true,
      },
      onPress: () => triggerShowDetails(),
    },
    {
      id: 'denimShorts',
      leftSide: {
        label: 'Denim Shorts',
        subtitle: [{content: 'Summer Collection'}, {content: 'Denim'}] as [
          ListRowSubtitle,
          ListRowSubtitle?,
        ],
      },
    },
  ];

  const list = root.createComponent(List, {
    title: 'Products',
    data: listData,
  });

  const textBlock = root.createComponent(
    Text,
    null,
    'Our shirts are made with 100% organic cotton!',
  );

  section.append(textBlock);

  const screen = root.createComponent(Screen, {
    name: 'ProductList',
    title: 'Product List',
  });

  screen.append(list);

  if (showDetails) {
    scrollView.append(section);
  }

  screen.append(scrollView);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);
});

```

## List

### ListProps

### data

value: `ListRow[]`

The array of `ListRow` which will be converted into rows for this list.

### imageDisplayStrategy

value: `'automatic' | 'always' | 'never'`

The logic behind displaying an image or placeholder. `automatic` will display an image or placeholder if it detects that a `ListItem` in `data` has an `imageUri` value. `never` will never display images or placeholders. `always` will always display images or placeholders if `imageUri` is undefined or empty.

### isLoadingMore

value: `boolean`

Whether or not more data is being loaded. Set this to `true` when paginating and fetching more data for the list.

### listHeaderComponent

value: `RemoteFragment`

A header component for the list.

### onEndReached

value: `() => void`

Callback for when the user reaches the end of the `List`. This can be used to fire a request to load more data.

### title

value: `string`

A large display title at the top of the `List`.

### ListRow

### id

value: `string`

The unique identifier for this list item.

### leftSide

value: `ListRowLeftSide`

The user interface of the left side of the row.

### onPress

value: `() => void`

Callback for when the user taps the row.

### rightSide

value: `ListRowRightSide`

The user interface of the right side of the row.

### ListRowLeftSide

### badges

value: `BadgeProps[]`

Colored badges that are displayed underneath the `title` and `subtitles`.

### image

value: `{ source?: string; badge?: number; }`


### label

value: `string`

The main label that will be displayed on the left side of the row.

### subtitle

value: `[ListRowSubtitle, ListRowSubtitle?, ListRowSubtitle?]`

The subtitles to display beneath the main label. Up to 3 subtitles can be displayed. Subtitles can optionally be configured with colors by passing an object with a `content` and `color` properties.

### BadgeProps

### status

value: `BadgeStatus`

A circle icon displaying the status of the badge.

### text

value: `string`

The text displayed inside the badge.

### variant

value: `BadgeVariant`

The appearance and function of the badge.

### SubtitleType

### color

value: `ColorType`

Property used to modify the subtitle appearance.

### content

value: `string`

The subtitles to display beneath the main label.

### ListRowRightSide

### label

value: `string`

The main label that will be displayed on the right side of the row.

### showChevron

value: `boolean`

Show a chevron. Set this to true if pressing on the row navigates to another screen.

### toggleSwitch

value: `ToggleSwitch`

A toggle switch that is be displayed on the right side of the row.

### ToggleSwitch

### disabled

value: `boolean`

Whether or not the toggle switch is disabled.

### value

value: `boolean`

Whether or not the toggle switch is on or off.

## Related

- [ProductSearch API](/api/pos-ui-extensions/apis/productsearch-api#example-search-for-products-with-a-search-bar)