Issue with CameraScanner in Stacks

[MVANDER]

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

[mrudul]

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:

<Navigator>
  <Screen
    name="ScreenOne"
    title="ScreenOne Title"
    secondaryAction={{
      text: 'Enter code manually',
      onPress: () => api.navigation.navigate('ScreenTwo')
    }}
  >
    <Banner
      title="Point camera at barcode or select 'Enter Code Manually' at top-right of the screen"
      variant="information"
      visible
    />
    <CameraScanner />
  </Screen>
  <Screen name="ScreenTwo" title="Enter code manually" secondaryAction={{
      text: 'Close',
      onPress: () => api.navigation.dismiss()
    }}>
    <ScrollView>
      // Rest of the code
    </ScrollView>
  </Screen>
</Navigator>

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