ResourceItem

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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

});

import React from 'react';

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

function App() {

return (

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

);

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();
});

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

Anchor to PropsProps

optional = ?

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

Anchor to BehaviorBehavior

📱 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

Was this page helpful?