Skip to main content

List
component

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

Note

List items no longer have dividers as of POS 10.0.0.

Anchor to listList

Anchor to data
data
[]
required

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

Anchor to imageDisplayStrategy
imageDisplayStrategy
'automatic' | 'always' | 'never'
Default: `automatic`

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.

Anchor to isLoadingMore
isLoadingMore
boolean

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

Anchor to listHeaderComponent
listHeaderComponent
RemoteFragment

A header component for the list.

Anchor to onEndReached
onEndReached
() => void

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

Anchor to title
title
string

A large display title at the top of the List.

Was this section helpful?

Product List

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 />
));

Preview

Anchor to guidelinesGuidelines

List items have a wide variety of use cases:

  • To display and link to an object | Examples: an item in the cart, a customer in the customer list
  • To display information | Examples: the payment breakdown in an order, staff contact information
  • To display a menu item | Examples: an item on the first page of settings, an item in “More actions”
  • To display a setting
  • To display an action related to other items in the section
  • To show a selectable option | Example: one filter option
  • To display an external link
Was this section helpful?

Anchor to content-guidelinesContent Guidelines

Subtitles:

  • Each subtitle should have a different piece of information. Don't use dashes to display more than one type of information on the same line.
  • Subtitles should be shown in order of relevance.
  • If you're showing the results of the form, the label should be the form field title and the subtitle should be the information the merchant entered.
Was this section helpful?

Anchor to relatedRelated

See how to use the ProductSearch API with a SearchBar to search for products.ProductSearch API