Issue with CameraScanner in Stacks

Retired Boards Appdev Extensions

Topic summary

A developer is struggling to implement a CameraScanner component with a “Manual Entry” button at the bottom of the screen using Stack layouts. Multiple layout attempts have failed, resulting in either the button overlapping the camera UI or the camera display breaking (showing only the camera switch icon without the actual camera feed).

Key Issues:

  • Stack-based layouts aren’t producing the desired result
  • Camera scanner won’t occupy sufficient screen space (>50% height)
  • Documentation provides examples with banner overlays but lacks accompanying code samples

Proposed Solution:
Another user encountered the same problem and found a workaround by using the Screen component instead of Stack layouts. This approach treats the camera view as a full-screen component and includes automatic redirection to a second screen once something is successfully scanned. However, the specific implementation code appears corrupted or improperly formatted in the discussion thread, making it difficult to verify the exact solution.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

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.PNG
IMG_2422.PNG1290×2796 217 KB

IMG_2423.PNG
IMG_2423.PNG1290×2796 42.6 KB

2

I encountered the same problem. Initially, I modified your code and managed to display the camera view with the button below it, but I couldn’t get the camera to occupy more than 50% of the screen height.

Then I came across the Screen component and decided to use the Camera view as a full-screen component, like this:

I also added automatic redirection to Screen 2 as soon as something was scanned successfully.