---
title: ResourceItem
description: >-
  Resource items represent specific objects within a collection, such as
  products or orders.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem.md#props)
* [Behavior](https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem.md#behavior)

# ResourceItem

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.

A `ResourceItem` should be rendered within a `ResourceList`.

##### JavaScript

```ts
import {extend, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const resourceItem1 = root.createComponent(ResourceItem, {
    id: '1234',
    onPress: () => console.log('Pressed 1'),
  });
  resourceItem1.appendChild('Cool item');
  const resourceItem2 = root.createComponent(ResourceItem, {
    id: '5678',
    onPress: () => console.log('Pressed 2'),
  });
  resourceItem2.appendChild('Cooler item');

  const resourceList = root.createComponent(ResourceList, {});

  resourceList.appendChild(resourceItem1);
  resourceList.appendChild(resourceItem2);

  root.appendChild(resourceList);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <ResourceList>
      <ResourceItem id="1234" onPress={() => console.log('Pressed 1')}>
        Cool item
      </ResourceItem>
      <ResourceItem id="5678" onPress={() => console.log('Pressed 2')}>
        Cooler item
      </ResourceItem>
    </ResourceList>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| id | `string` | Unique ID for the resource item. |
| onPress | `() => void` | Callback when the resource item is pressed. |

***

## Behavior

* 📱 All children of ResourceItems are placed in a single view object, which makes recycling the views expensive. Consider making your ResourceItems simple.
* 📱 Any child of ResourceItem that has an `onPress` will take precedence and the `onPress` of ResourceItem will not be invoked

| ✅ Do | 🛑 Don't |
| - | - |
| 📱 Keep ResourceItem shallow. Complex hierarchies have performance penalties | 📱 Use complex and deep Stack layouts |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem.md#props)
* [Behavior](https://shopify.dev/docs/api/product-subscription-extensions/components/resourceitem.md#behavior)