> 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](/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`. ```ts?title: "JavaScript" 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(); }); ``` ```tsx?title: "React" import React from 'react'; import {extend, render, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions-react'; function App() { return ( console.log('Pressed 1')}> Cool item console.log('Pressed 2')}> Cooler item ); } extend( 'Playground', render(() => ), ); ``` ## 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 |