When expo was updated to version 51, they removed the ratio from the attributes of the component’s CameraView, which led to the edges of the component creeping out of the modal window where it pops up.

I tried to solve the problem by changing the styles for different device sizes. But this decision does not satisfy us.

Here is the code where we use it

<>
      {Device.isDevice ? (
        <>
          <CameraView
            facing="back"
            autofocus={autoFocus ? 'on' : 'off'}
            flash={flashMode}
            onBarcodeScanned={handleBarCodeScanned}
            barcodeScannerSettings={{
              barcodeTypes: ['qr'],
            }}
            style={{ width: '98%', height: '98%', marginTop: '4%' }}
          >
            {isDisabled && (
              <Box width="100%" height="100%" bgColor="black" opacity={0.7} />
            )}
            {!isDisabled && (
              <BarcodeMask
                width={250}
                height={250}
                showAnimatedLine={false}
                edgeColor={
                  isLoading
                    ? get(theme.colors, toolbarActiveColor)
                    : get(theme.colors, toolbarInactiveColor)
                }
              />
            )}

            <Pressable onPress={onPress}>
              <VStack height="100%">
                {/* Top toolbar */}
                {/* <HStack
            p={2}
            space={3}
            alignItems={"flex-start"}
            justifyContent={"flex-end"}
          >
            // Place For top toolbar Buttons
          </HStack> */}
                <Spacer />
                {/* Bottom toolbar */}
                <HStack
                  p={2}
                  space={3}
                  alignItems="flex-end"
                  justifyContent="flex-end"
                >
                  <IconButton
                    size="lg"
                    _icon={{
                      as: Ionicons,
                      ...(flashMode === 'on'
                        ? {
                            name: 'flash',
                            color: toolbarActiveColor,
                          }
                        : {
                            name: 'flash-off',
                            color: toolbarInactiveColor,
                          }),
                    }}
                    onPress={toggleFlash}
                  />
                  {!isIos && (
                    <IconButton
                      size="lg"
                      _icon={{
                        as: MaterialCommunityIcons,
                        name: 'focus-auto',
                        color: autoFocus
                          ? toolbarActiveColor
                          : toolbarInactiveColor,
                      }}
                      onPress={toggleAutoFocus}
                    />
                  )}
                </HStack>
              </VStack>
            </Pressable>
          </CameraView>
        </>

Dependencies used:

"expo": "51.0.2",
"expo-camera": "^15.0.14"
"react-native": "0.74.1",

If anyone has a solution, please help

Thank you