Issue with CameraScanner in Stacks

MVANDER
Shopify Partner
1 0 0

Hello!

 

I'm trying to build an app with a POS UI extension using the CameraScanner component. The goal is to have the CameraScanner component take up most of the screen and to have a "Manual Entry" button at the bottom of the screen as a fallback. I've tried many, many layouts with Stacks and cannot get this to work. The button either ends up on top of the camera scanner UI somehow or the camera scanner UI itself gets messed up (see screenshots).

 

This is one of the layouts I tried which resulted in a broken UI with the camera switch icon at the top of the screen and no image from the camera:

<Stack direction="vertical" flexChildren flex={1}>
  <Stack direction="vertical" flex={1}>
    <CameraScanner />
  </Stack>
  <Stack direction="vertical">
    <Button title='Manual Entry' type='primary' />
  </Stack>
</Stack>

In the camera scanner documentation they show an example of the camera scanner with a banner overlaid, but no code sample is provided. I'm wondering if I can do something similar to what's shown there but with a button at the bottom of the scanner.

 

Can other components be put on a single screen with a CameraScanner? If so, are there any code samples I can refer to? The documentation is helpful but there's a severe lack of actual code samples for much of what's documented (as in, there are example screenshots but no accompanying code to show how that outcome was achieved).

 

Thank you!

-Matt

 

IMG_2422.PNGIMG_2423.PNG

Replies 0 (0)