We’ve been trying to refractor all the deprecated features in POS Extension version 2025.07. but there are many layout issues even if we just use the sample code from the dev docs, not to mention using our own ui… Please share some insight into when or how this could be fixed. This is obviously a large refractoring of our current codebase, but it seems senseless due to how unusable it is.
Hey @Adam_Jakab - I think I was able to replicate the issue on my end. Are you just using the Typescript boilerplate there? Here’s what i’m using in my extension modal:
import {
extension,
Text,
Icon,
Screen,
Stack,
Selectable,
} from '@shopify/ui-extensions/point-of-sale';
export default extension('pos.home.modal.render', (root) => {
const label1 = root.createComponent(Text);
label1.append('Hello world!');
const label2 = root.createComponent(Text, {variant: 'captionRegular'});
label2.append('This is an example of a nested stack!');
const price = root.createComponent(Text);
price.append("Let's go!");
const icon = root.createComponent(Icon, {
name: 'chevron-right',
});
const leftStack = root.createComponent(Stack, {
direction: 'block',
gap: '100',
});
leftStack.append(label1, label2);
const rightStack = root.createComponent(Stack, {
direction: 'inline',
gap: '600',
alignItems: 'center',
alignContent: 'center',
});
rightStack.append(price, icon);
const mainStack = root.createComponent(Stack, {
direction: 'inline',
gap: '400',
justifyContent: 'space-between',
alignItems: 'center',
alignContent: 'center',
paddingInline: '450',
paddingBlock: '600',
inlineSize: '100%',
});
mainStack.append(leftStack, rightStack);
const selectable = root.createComponent(Selectable, {
onPress: () => console.log('Pressed'),
});
selectable.append(mainStack);
const screen = root.createComponent(Screen, {
name: 'Stack',
title: 'Stack',
});
screen.append(selectable);
root.append(screen);
root.mount();
});
I think this does warrant an investigation for sure, but I just wanted to touch base with you to see if I’m approaching this the same way you are. Hope to speak soon!
Hey @Alan_G, I’m using the React boilerplate and also, whenever I try to make any sensible layout with the new Stack component in 2025-07, it just doesn’t seem to work at all so it shouldn’t be that hard to replicate I believe. Is this an oversight by the engineering team behind the Stack component change or a versioning issue between the Extension API and POS App?
Thanks for confirming @Adam_Jakab - I can’t say for sure why the issue is popping up at the moment, but did just want to loop back with you here to confirm we’re looking into this on our end and I’ve touched base with the product team on this.
I’ll get back in touch with you here once I have next steps to share.
Hey @Adam_Jakab - just following up on this here with you. I was able to get in touch with the product team and they are looking at making the components more resilient in general and we have escalated this issue up to them as an issue, but in the meantime they have also suggested using this as a possible workaround:
export default reactExtension("pos.home.modal.render", () => (
<Screen name="Stack" title="Stack">
<Selectable onPress={() => console.log("Pressed")}>
<Stack
direction="inline"
gap="400"
justifyContent="start"
alignItems="center"
paddingInline="450"
paddingBlock="600"
inlineSize="100%"
>
<Box maxInlineSize="65%" minInlineSize="0">
<Stack direction="block" gap="100" inlineSize="100%">
<Text>Hello world!</Text>
<Box inlineSize="100%">
<Text variant="captionRegular">
This is an example of a nested stack that can be very long and will wrap properly!
</Text>
</Box>
</Stack>
</Box>
<Stack direction="inline" gap="600" alignItems="center" flex={0}>
<Text>Let's go!</Text>
<Icon name="chevron-right" />
</Stack>
</Stack>
</Selectable>
</Screen>
));
I’ll keep an eye on things for you and loop back with you once I can confirm a fix on our end or a definitive answer, but I hope this helps in the meantime.
Hey Alan, Thanks for asking around and giving me a workaround, however I disagree that this is a resiliency issue as this feature has long been resilient and working flawlessly with way less boilerplate code since the POS UI components were released. This new update is a regression and migration issue nightmare currently, the only good thing about it is that version 2025-07 is not yet enforced. As a developer using POS APIs for a long time I would suggest rethinking this change to the stack component or at least providing us developers with more documentation and insight on why this change is happening and the philosophy behind it so we can better understand what you’re trying to achieve when changing something as fundamental as a base layout component.
Hey Adam, no worries and thanks for your feedback here, I appreciate your perspective on this a lot, especially as a developer using our POS APIs for quite a while.
While I still can’t guarantee anything, I did just want to confirm the issue you reported here has been logged officially on our end by our product team and I’ll pass along your last message, since you do raise some valid points. On the Stack changes specifically, my understanding is that the goal is to boost resiliency for varied POS devices with more explicit controls, but I do understand where you’re coming from when it comes to issues with migration, I’ll flag that for better docs/explanation too. Happy to advocate as best I can on my end internally here for you. Let me know if I can assist with anything else as always and I’ll take a look.