POS Extension CameraScanner

Extensions
1

Hey!

I am looking into the POS-Extensions and i think it a very intuitive development process. However, i am using the camera-scanner, and i cant figure out how to:

  • The camera scanner UI can be adjusted to display the camera view on part of the screen while dedicating the remaining portion to other components. This can be useful for tasks like inventory management.

As stated possible in the documentation. I tried to wrap it in a box, a stack, an image etc. but it is never working as intended.

In short, i want the camera in the top 1/3 of the extension, with the list and buttons filling up the rest. Source-code:

return (
    <>
      <Navigator>
        <Screen title="Scanner" name="Scanner">
          <Stack direction="block" flex="1">
            {/* CameraScanner container with an explicit height */}

              <CameraScanner />
    
            <Button title="Ryd" onPress={onClearListPress} />
            <ScrollView>
              <List title="Ordrer" data={listItems} />
            </ScrollView>
            <Stack direction="horizontal" gap="small" flexChildren={true} padding="1000">
              <Button title="Forsæt" onPress={() => api.navigation.navigate('Handle')} />
            </Stack>
          </Stack>
        </Screen>

IMG_7338
IMG_73381170×2532 57.7 KB

Thank you in advance!

2

Hi Rasmus

I can be very wrong but I think the CameraScanner need to be wrap inside Screen component. I’m not sure if this will work for you, but I was trying to use the CameraScanner the other day, and have Screen inside a Screen and CameraScanner inside the inner Screen, then it have similar result as your screenshot (but the CameraScanner is at the bottom of the screen though, I think it was due to the controlling height/size/overflow seems to be difficult with Box).

So the code will be

        <Screen title="Scanner" name="Scanner">
          <Stack direction="block" flex="1">

            <Button title="Ryd" onPress={onClearListPress} />
            <ScrollView>
              <List title="Ordrer" data={listItems} />
            </ScrollView>
            <Stack direction="horizontal" gap="small" flexChildren={true} padding="1000">
              <Button title="Forsæt" onPress={() => api.navigation.navigate('Handle')} />
            </Stack>
  
			<Screen>
              <CameraScanner />
    		</Screen>
          </Stack>
        </Screen>

One thing I found is the height and width of Box/Stack to be a bit hard to control/use, so might not get exactly the height or size you want.

3

Hi Vito

I tried your implementation, and do i indeed run into the same issues with width and height.

I think Shopify POS UI Extensions are great, but we do need some kind of style-guide documentation to tweak our implementations!